Experience our striking pre-made hero designs for the Flatsome Theme and WooCommerce. These hero sections, optimized for engagement and meticulously crafted, will transform your website, products, and promotions into compelling visual messages for your visitors.
[row label="Hero 1"] [col span__sm="12" bg_color="#564088"] [row_inner style="collapse" width="full-width" v_align="middle" h_align="center"] [col_inner span="6" span__sm="11" span__md="10" padding="30px 0px 30px 0px" align="center" color="light"] [ux_text font_size="2.5" class="collapse h1 uppercase"] <p>Price deal</p> [/ux_text] [row_inner_1 label="Product + Countdown" h_align="center"] [col_inner_1 span="6" span__md="12" padding="5% 5% 5% 5%" padding__sm="20px 20px 10px 20px" margin="15px 0px 0px 0px" bg_color="rgb(255, 255, 255)" bg_radius="10"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/adiddas-sneaker.png" image_size="original"] [ux_countdown size="150" bg_color="#564088" year="2024"] [/col_inner_1] [/row_inner_1] [testimonial pos="center"] [gap height="0px"] [/testimonial] [ux_text class="h1 headline collapse"] <p>Force Sneaker 11</p> [/ux_text] [gap height="5px"] [ux_text font_size="1.5" class="collapse"] <p><span style="color: #c0c0c0;"><del>$125</del></span> $99</p> [/ux_text] [gap height="15px"] [button text="Shop now" padding="10px 30px 10px 30px"] [/col_inner] [col_inner span="6" span__sm="12" span__md="12" force_first="medium" padding="30px 30px 30px 30px" padding__md="0px 0px 0px 0px"] [ux_banner height="99.99%" height__sm="250px" height__md="50.99%" bg="https://www.flatsomedesigns.com/wp-content/uploads/engin-akyurt-YB3tGENlFPo-unsplash.jpg" bg_size="original" bg_color="#564088" bg_pos="57% 100%"] [/ux_banner] [/col_inner] [/row_inner] [/col] [/row]
[section label="Hero 02" bg_color="rgb(223, 220, 216)" padding="0px"] [gap height="50px"] [row] [col span__sm="12"] [row_inner v_align="bottom"] [col_inner span="4" span__sm="12" span__md="12" padding="0px 10% 0px 0px" padding__md="0px 0px 0px 0px"] [ux_text font_size="2.5" line_height="1.5" class="h1 collapse"] <p>Handcrafted<br />Natural<br />Organic<br />South African <br /><br /></p> [/ux_text] [gap] [button text="Shop now" expand="true"] [gap] <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam lacus nec congue facilisis. In egestas felis ut libero pretium, a auctor ex ornare. </p> [/col_inner] [col_inner span="8" span__sm="12" span__md="12" force_first="medium"] [ux_banner height="600px" height__md="56.25%" bg="https://www.flatsomedesigns.com/wp-content/uploads/sincerely-media-lAPeTNMpXgw-unsplash.jpg" bg_size="original" bg_color="rgb(223, 220, 216)" bg_pos="0% 100%"] [/ux_banner] [/col_inner] [/row_inner] [/col] [/row] [/section]
[section label="Hero Top" bg_color="rgb(240, 236, 228)" height="380px"] [gap height__sm="150px" height__md="220px"] [/section] [row label="Hero Bottom" h_align="center"] [col span__sm="12" margin="-350px 0px 0px 0px" margin__sm="-200px 0px 0px 0px" margin__md="-250px 0px 0px 0px" align="left"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/laura-adai-8Vguc-IvaQ4-unsplash.jpg" bg_size="original" bg_color="rgba(255, 255, 255, 0)" bg_overlay="rgba(0, 0, 0, 0.151)" bg_pos="50% 100%" parallax="2" dark="true" height="650px" height__sm="350px" height__md="450px" class="round-corners"] [row_inner h_align="center"] [col_inner span="6" span__sm="12" align="center"] [ux_text class="tagline collapse"] <p>for adventures</p> [/ux_text] [ux_text font_size="3.5" font_size__sm="2.25" class="h1 collapse"] <p>Hit the Road</p> [/ux_text] [/col_inner] [/row_inner] [/section] [row_inner h_align="center"] [col_inner span__sm="12" padding="0px 3% 0px 3%" margin="-150px 0px 0px 0px" margin__sm="-130px 0px 0px 0px" align="center"] [button text="Discover" padding="10px 30px 10px 30px"] [/col_inner] [/row_inner] [/col] [/row]
[section label="Hero 04" bg="https://www.flatsomedesigns.com/wp-content/uploads/daniel-storek-JM-qKEd1GMI-unsplash-1.jpg" bg_overlay__sm="rgba(255, 255, 255, 0.3)" bg_pos="57% 73%" padding="0px" height="75vh" height__sm="500px" height__md="55vh"] [row] [col span="5" span__sm="12" span__md="7"] [gap] [ux_text text_align="left" text_align__sm="center" text_color="#aa70ff" class="tagline"] <p>the ultimate sneaker</p> [/ux_text] [ux_text font_size="3.25" font_size__sm="2" font_size__md="3" text_align="left" text_align__sm="center" class="h1 collapse"] <p>Step in a shoe built precisely for you</p> [/ux_text] [gap height="15px"] [ux_text text_align="left" text_align__sm="center"] <p>Lorem ipsum sed diam nonummy nibh dolor sit amet sed diam nonummy nibh euismod tinci dolor sit amet dunt ut laoreet dolore magna aliquam erat volutpat.</p> [/ux_text] [gap height="10px" height__sm="5px" height__md="10px"] [ux_stack distribute__sm="center"] [button text="Join the waiting list" padding="10px 30px 10px 30px"] [/ux_stack] [/col] [/row] [/section]
[section label="Hero 05" bg="1408" bg_pos="29% 15%" parallax="3" dark="true" height="80vh" height__sm="550px" height__md="60vh" class="section-bottom"] [row v_align="bottom"] [col span="4" span__sm="12" span__md="7"] [ux_text font_size="2.5" font_size__sm="2.25" class="h1 collapse"] <p>Ready for the ride</p> [/ux_text] [gap height="20px"] [ux_text class="collapse"] <p>Lorem ipsum dolor sit amet sed diam nibh euismod tincidunt laoreet dolore utpat.</p> [/ux_text] [/col] [col span="8" span__sm="12" span__md="5"] [ux_stack distribute="end" distribute__sm="start"] [button text="Explore now" color="white" padding="10px 30px 10px 30px" icon="icon-angle-right" icon_reveal="true"] [/ux_stack] [/col] [/row] [/section]
[section label="Hero 06" bg_color="rgb(249, 248, 246)" padding="50px" padding__sm="20px" padding__md="30px"] [gap height="20px"] [row style="small" v_align="middle"] [col span="4" span__sm="6" span__md="6"] [ux_banner height="480px" height__sm="200px" height__md="400px" bg="https://www.flatsomedesigns.com/wp-content/uploads/swati-b-UeEYpTQhxQw-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="100% 77%"] [/ux_banner] [/col] [col span="4" span__sm="6" span__md="6"] [ux_banner height="480px" height__sm="200px" height__md="400px" bg="https://www.flatsomedesigns.com/wp-content/uploads/christelle-bourgeois-xOHLRUW4k8-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="100% 42%"] [/ux_banner] [/col] [col span="4" span__sm="12" span__md="9" padding="0px 0px 0px 12%" padding__md="0px 0px 0px 0px"] [gap height__sm="5px" height__md="20px"] [ux_text font_size="3" font_size__sm="2.5" class="h1 collapse"] <p>Living Space</p> [/ux_text] [gap height="20px" height__sm="10px"] <p>Lorem ipsum dolor sit amet sed diam non ummy nibh euismod tincidunt ut laoreet dolore magna aliquam volutpat dolores.</p> [button text="Learn more" padding="10px 30px 10px 30px"] [/col] [/row] [/section]
[section label="Hero 07" padding__sm="10px" padding__md="20px"] [gap] [row v_align="middle"] [col span="5" span__sm="12" padding="0px 10% 0px 10%" padding__sm="0px 20px 0px 20px" padding__md="0px 10% 0px 0px" align="center"] [gap height__sm="5px" height__md="10px"] [ux_text font_size="4" font_size__md="2.75" text_align="center" text_align__sm="center" class="h1 collapse"] <p>Super Social</p> [/ux_text] [gap height="15px"] [ux_text text_align="center" text_align__sm="center"] <p>Lorem ipsum dolor sit ametdiam nonummy nibh euismod tincidunt ut dolore aliquam erat volutpat.</p> [/ux_text] [gap height="10px" height__sm="5px"] [ux_stack distribute="center" distribute__sm="center"] [button text="Join now" color="secondary" padding="10px 30px 10px 30px"] [/ux_stack] [/col] [col span="7" span__sm="12" span__md="7" force_first="medium" margin="0px 0px 0px 0px"] [row_inner style="collapse" v_align="middle"] [col_inner span="2" span__sm="2" margin="-200px 0px 0px 100px" margin__sm="-100px 0px 0px 40px" margin__md="-100px 0px 0px 40px"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/purple-block.jpg" height="100%" class="circle"] [/col_inner] [col_inner span="8" span__sm="8"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/michael-tucker-hRSKKLUxC80-unsplash-1.jpg" image_size="original" height="100%" class="circle"] [/col_inner] [col_inner span="2" span__sm="2" margin="250px 0px 0px -100px" margin__sm="100px 0px 0px -40px" margin__md="170px 0px 0px -60px"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/purple-block.jpg" height="100%" class="circle"] [/col_inner] [/row_inner] [/col] [/row] [/section]
[section label="Hero 08"] [row] [col span__sm="12" padding="0px 3% 0px 3%" padding__sm="0px 0px 0px 0px" padding__md="0px 4% 0px 4%"] [ux_banner height="600px" height__sm="270px" height__md="550px" bg="https://www.flatsomedesigns.com/wp-content/uploads/louis-hansel-wVoP_Q2Bg_A-unsplash.jpg" bg_size="original" bg_color="rgba(255, 255, 255, 0)" bg_pos="2% 67%" class="round-corners"] [/ux_banner] [/col] [/row] [row] [col span="4" span__sm="11" span__md="6" padding="10% 10% 8% 10%" padding__sm="8% 8% 6% 8%" padding__md="7% 7% 5% 7%" margin="-470px 0px 0px 0px" margin__sm="-100px 0px 0px 17px" margin__md="-425px 0px 0px 0px" bg_color="rgb(194, 214, 219)" bg_radius="20"] [ux_text font_size="2.25" font_size__sm="1.8" class="h1 collapse"] <p>Divine Dining</p> [/ux_text] [gap height="10px"] <p>Lorem ipsum dolor sit amet tincidunt ut laoreet magna aliquam erat volutpat.</p> [button text="Make a reservation" padding="10px 0px 10px 0px" expand="true"] [/col] [/row] [/section]
[row label="Hero 09" style="collapse" width="full-width"] [col span="6" span__sm="12"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/glauber-sampaio-3vv1A8zNG9A-unsplash.jpg" bg_size="original" bg_pos="67% 38%" height="600px" height__sm="225px" height__md="450px"] [gap height__sm="5px"] [/section] [/col] [col span="6" span__sm="12"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/kateryna-hliznitsova-2NDtPNiLcD0-unsplash.jpg" bg_size="original" bg_overlay="rgba(255, 255, 255, 0.3)" bg_pos="1% 32%" parallax="7" height="600px" height__sm="250px" height__md="450px"] [row_inner style="collapse" h_align="center"] [col_inner span="7" span__sm="12" span__md="11" padding="40px 0px 0px 0px" padding__sm="15px 0px 0px 0px" align="center"] [ux_text font_size="2" font_size__sm="1.75" font_size__md="1.75" class="h1 collapse"] <p>Making Memories</p> [/ux_text] [gap height="15px" height__sm="10px"] <p>Lorem ipsum dolor sit ametdolore magna aliquam erat volutpat.</p> [button text="Shop now"] [/col_inner] [/row_inner] [/section] [/col] [/row]
[gap] [row label="Hero 10 - Icons" style="small"] [col span__sm="12" padding="10px 30px 15px 30px" padding__sm="20px 30px 20px 30px" margin="0px 0px 0px 0px" align="center" bg_color="#aa70ff" bg_radius="15" color="light"] [ux_stack direction__md="col" distribute="between" distribute__sm="center" distribute__md="center" align__sm="center" align__md="center" gap__sm="0"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/shipping-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>Free shipping above $50</p> [/ux_text] [/featured_box] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/star-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>100% satisfaction guarantee</p> [/ux_text] [/featured_box] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/support-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>Excellent customer service</p> [/ux_text] [/featured_box] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/return-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>14 days to return your order</p> [/ux_text] [/featured_box] [/ux_stack] [/col] [/row] [row label="Hero 10 - Banners" style="small"] [col span="8" span__sm="12" span__md="12" margin="0px 0px -20px 0px" margin__md="0px 0px 0px 0px"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/sanju-pandita-Zgc88ajylto-unsplash.jpg" bg_size="original" bg_color="rgb(255, 255, 255)" bg_pos="54% 45%" height="500px" height__sm="350px" height__md="400px" class="section-bottom round-corners"] [row_inner] [col_inner span="5" span__sm="12" span__md="6" padding="8% 8% 5% 8%" padding__sm="20px 10px 15px 20px" margin="0px 0px -20px 10px" margin__sm="0px 0px -30px 0px" align="center" bg_color="rgb(255,255,255)" bg_radius="20" animate="bounceInUp"] [ux_text font_size="2.15" font_size__sm="2" class="h1 collapse"] <p>Best Sellers</p> [/ux_text] [gap height="5px"] [ux_text class="collapse"] <p>Lorem ipsum dolor sit amet lao dolore magna aliquam erat.</p> [/ux_text] [gap height="15px"] [button text="Go to shop" color="secondary" expand="0"] [/col_inner] [/row_inner] [/section] [/col] [col span="4" span__sm="12" span__md="12" margin="0px 0px -20px 0px"] [row_inner style="small"] [col_inner span__sm="12" span__md="6" align="center"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/richard-horvath-pBykuVJKyKQ-unsplash.jpg" bg_color="rgb(23, 23, 23)" bg_overlay="rgba(0, 0, 0, 0.15)" bg_pos="100% 57%" dark="true" height="240px" height__sm="200px" class="round-corners"] [gap height="10px"] [ux_text text_align="center" class="tagline red collapse"] <p>New and fresh</p> [/ux_text] [ux_text font_size="2.5" font_size__sm="2.3" text_align="center" class="h1 collapse"] <p>New Collection</p> [/ux_text] [gap height="15px"] [ux_stack distribute="center"] [button text="Shop now" color="secondary" expand="0"] [/ux_stack] [/section] [/col_inner] [col_inner span__sm="12" span__md="6" align="center"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/pongracz-noemi-qAOo_33VmTE-unsplash.jpg" bg_color="rgb(23, 23, 23)" bg_overlay="rgba(0, 0, 0, 0.15)" bg_pos="100% 57%" dark="true" height="240px" height__sm="200px" class="round-corners"] [gap height="10px"] [ux_text text_align="center" class="tagline red collapse"] <p>Mega Clearance</p> [/ux_text] [ux_text font_size="2.5" font_size__sm="2.3" text_align="center" class="h1 collapse"] <p>Summer SALE </p> [/ux_text] [gap height="15px"] [ux_stack distribute="center"] [button text="Clearance" color="secondary" expand="0"] [/ux_stack] [/section] [/col_inner] [/row_inner] [/col] [/row] [gap height="15px"]
[section label="Hero 11" bg_color="rgb(249, 248, 246)" padding="90px" padding__sm="30px" padding__md="60px"] [row style="collapse" v_align="middle"] [col span="4" span__sm="12" span__md="12"] [row_inner style="collapse" v_align="middle" h_align="right"] [col_inner span="8" span__sm="8" margin="0px 0px 0px -15px"] [ux_banner height="350px" height__sm="300px" height__md="500px" bg="https://www.flatsomedesigns.com/wp-content/uploads/markus-spiske-i1ksCIjm0dQ-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="0% 53%"] [/ux_banner] [/col_inner] [/row_inner] [row_inner style="collapse"] [col_inner span="5" span__sm="5" margin="-180px 0px 0px 0px" margin__sm="-150px 0px 0px 15px" margin__md="-300px 0px 0px 15px"] [ux_banner height="225px" height__sm="200px" height__md="355px" bg="https://www.flatsomedesigns.com/wp-content/uploads/markus-spiske-HPShmrVajK0-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="44% 30%"] [/ux_banner] [/col_inner] [/row_inner] [/col] [col span="4" span__sm="12" span__md="12" padding="0px 10% 0px 10%" padding__sm="0px 5% 0px 5%" align="center"] [gap height__sm="30px" height__md="50px"] [ux_text font_size="1.25"] <h1>Your Daily Beverage</h1> [/ux_text] <p>Lorem ipsum dolor sit amet ut laoreet dolore magna aliquam volutpat.</p> [button text="Shop now" padding="10px 30px 10px 30px"] [/col] [col span="4" span__sm="12" span__md="3" visibility="hide-for-medium"] [row_inner style="collapse" v_align="middle"] [col_inner span="8" span__sm="12" margin="0px 0px 0px 15px"] [ux_banner height="350px" bg="https://www.flatsomedesigns.com/wp-content/uploads/markus-spiske-9pbe-tJFRaU-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="39% 24%"] [/ux_banner] [/col_inner] [/row_inner] [row_inner style="collapse" h_align="right"] [col_inner span="5" span__sm="12" margin="-180px 0px 0px 0px"] [ux_banner height="225px" bg="https://www.flatsomedesigns.com/wp-content/uploads/markus-spiske-NBNJWpzyIpc-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="19% 35%"] [/ux_banner] [/col_inner] [/row_inner] [/col] [/row] [/section]
[ux_slider label="Hero 12: Images" arrows="false" nav_style="simple" bullet_style="dashes" timer="3000" pause_hover="false"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/rodion-kutsaiev-mCL702J-lA-unsplash.jpg" bg_size="original" bg_pos="0% 24%" height="600px" height__sm="550px"] [gap] [/section] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/rodion-kutsaiev-havydp8g2DU-unsplash-2.jpg" bg_size="original" bg_pos="14% 23%" height="600px" height__sm="550px"] [gap] [/section] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/rodion-kutsaiev-BlQyAdgorqo-unsplash-1.jpg" bg_size="original" bg_pos="14% 23%" height="600px" height__sm="550px"] [gap] [/section] [/ux_slider] [row label="Hero 12: Text" style="collapse"] [col span="4" span__sm="11" span__md="6" padding="10% 10% 10% 10%" padding__sm="9% 9% 9% 9%" margin="-360px 0px 0px 0px" margin__sm="-330px 10px 0px 15px" margin__md="-380px 0px 0px 20px" bg_color="rgb(255, 255, 255)" bg_radius="20"] [ux_text font_size="1.35" text_align="left" text_align__sm="center"] <h1>Unlock the Power</h1> [/ux_text] [ux_text text_align="left" text_align__sm="center"] <p>Lorem ipsum dolor sit amet tincidunt ut laoret dolore magna erat dolores.</p> [/ux_text] [ux_stack distribute__sm="center"] [button text="Shop collection" padding="10px 30px 10px 30px"] [/ux_stack] [/col] [/row] [section label="Hero 12 - USP's" bg_color="#aa70ff" dark="true" padding="20px"] [row style="collapse"] [col span__sm="12" margin="0px 0px 0px 0px" margin__md="0px 0px 0px 20px"] [ux_stack direction__md="col" distribute="between" distribute__sm="center" distribute__md="center" align__sm="center" align__md="center" gap__sm="0"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/shipping-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>Free shipping above $50</p> [/ux_text] [/featured_box] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/star-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>100% satisfaction guarantee</p> [/ux_text] [/featured_box] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/support-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>Excellent customer service</p> [/ux_text] [/featured_box] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/return-icon.png" inline_svg="0" img_width="20" pos="left"] [gap height="3px"] [ux_text font_size="0.9" class="collapse"] <p>14 days to return your order</p> [/ux_text] [/featured_box] [/ux_stack] [gap height="10px" height__md="5px"] [/col] [/row] [/section]