Builder - Section Content Hero With Image

Back to Builder

ID Section

Container

Container Small Normal Large

Vertical Align Top Center Bottom

Text Align Item Align Left Item Align Center Item Align Right Item Align Left (Center on Small Screen) Item Align Right (Center on Small Screen)

Background

Bg Color

Text Color

Content

Image Content

Size

Title

Content

Button

Button Text

Target Link

Button Style Solid Outline

Border Box Style Rounded Small Rounded Rounded Large Rounded X Large

Color Swatch Color Swatch A Color Swatch B Color Swatch C Color Swatch D Setting your color swatch in blogger theme Designer

Get Code

<!--========== CONTENT HERO (+IMAGE) ==========--> <section id="{{dfltContainer}}" style="background: {{HeroImgBGColor}}; color: {{HeroTxtColor}};"> <div class="{{dfltContainer}}"> <div class="row {{ValginCenter}}"> <div class="columns six-res"> <div class="content reveal"> <center><img src="{{HeroImgImgContent}}" width="{{HeroImgCtSize}}"/></center> </div> </div> <div class="columns four-res"> <div class="content {{HeroAlign}} reveal"> <h1>{{HeroImgTitle}}</h1> <p>{{HeroImgContent}}</p> <a class="{{HeroImgBtnStyle}} {{HeroImgbtnSwatch}} {{HeroImgbtnSmRounded}}" href="{{linktarget}}">{{HeroImgBtn}}</a> </div> </div> </div> </div> </section> <!--========== CONTENT HERO (+IMAGE) END ==========-->

{{HeroImgTitle}}

{{HeroImgContent}}

{{HeroImgBtn}}