Premade hero designs for Flatsome Theme
Discover our ready-made hero designs for the Flatsome Theme and WooCommerce. These eye-catching sections will turn your website, products, and promotions into impactful visual messages.
[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]