Banner designs for Flatsome Theme
Discover our ready-made banner designs for Flatsome Theme and WooCommerce. Optimized for conversions, they’ll make your webshop, products, and promotions irresistible.
[row label="Banner 1" style="collapse"] [col span__sm="12" align="center" bg_color="#aa70ff" class="col-round"] [ux_image_box style="overlay" img="https://www.flatsomedesigns.com/wp-content/uploads/sumaid-pal-singh-bakshi-CVI1ZFb_RIU-unsplash.jpg" image_height="75%" image_overlay="rgba(0, 0, 0, 0)" image_hover="zoom" link="#" text_pos="middle"] [row_inner style="collapse"] [col_inner span__sm="12" padding="15px 15px 15px 15px" bg_color="rgba(0, 0, 0, 0.337)"] [ux_text font_size="3.5" class="h1"] 70% [/ux_text] [ux_text font_size="1.25" class="tagline"] <p>Discount</p> [/ux_text] [/col_inner] [/row_inner] [/ux_image_box] [gap] [ux_text font_size="2.5" text_color="#161616" class="h1 collapse uppercase"] <p>Black <br />Friday</p> [/ux_text] [gap height="20px"] [button text="Go to shop" padding="10px 30px 10px 30px"] [gap height="20px"] [/col] [/row]
[row label="Banner" h_align="center"] [col span__sm="12" span__md="12" align="center" bg_color="rgb(236, 233, 227)"] [row_inner] [col_inner span__sm="12"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/karolina-grabowska-uOXV1GBLdNs-unsplash.jpg" image_size="original"] [/col_inner] [col_inner span__sm="12" padding="0px 10% 0px 10%" margin="-70px 0px 0px 0px" align="center"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/wooden-brush-sample.jpg" image_size="original" width="56" class="circle"] [ux_text text_color="#aa70ff" class="tagline"] <p>Black Friday Sale</p> [/ux_text] [ux_text font_size="3" class="h1 collapse"] <p>50% OFF</p> [/ux_text] [gap height="3px"] [gap height="15px"] [button text="Shop outlet →" padding="10px 30px 10px 30px"] [/col_inner] [/row_inner] [/col] [/row]
[row label="Banner 3" style="collapse"] [col span__sm="12" align="center" bg_color="#171717" color="light"] [ux_image_box style="shade" img="https://www.flatsomedesigns.com/wp-content/uploads/curology-DGH1u80sZik-unsplash.jpg" image_height="80%" image_overlay="rgba(0, 0, 0, 0.081)" image_hover="zoom" link="#" text_padding="20px 20px 20px 20px"] [ux_text font_size="2" text_color="rgb(255,255,255)" class="h1 collapse"] <p>BLACK FRIDAY</p> [/ux_text] [/ux_image_box] [gap] [ux_text class="tagline"] <p>Enjoy up to</p> [/ux_text] [ux_text font_size="2.65" class="h1 collapse"] <p>70% <br />OFF</p> [/ux_text] [gap height="15px"] [button text="Shop now" color="secondary" padding="10px 30px 10px 30px" icon="icon-shopping-cart"] [gap] [/col] [/row]
[row label="Banner 4"] [col span__sm="12" padding="10% 10% 10% 10%" align="center" bg_color="#171717" color="light"] [divider width="100%" margin="20px" color="rgb(255, 255, 255)"] [ux_text font_size="3.5" line_height="0.95" class="h1 collapse"] <p>BLACK <br />FRIDAY</p> [/ux_text] [gap height="10px"] [ux_text font_size="1.75" class="collapse"] <p>70% OFF</p> [/ux_text] [divider width="100%" margin="20px" color="rgb(255, 255, 255)"] [button text="Shop now" color="secondary" padding="10px 30px 10px 30px"] [/col] [/row]
[row label="Banner 5" style="collapse"] [col span__sm="12" padding="10% 10% 10% 10%" align="center" bg_color="rgb(236, 233, 229)" border="0px 0px 20vh 0px" border_color="#dad7d3"] [ux_text font_size="3" class="h1 uppercase collapse"] <p>Final <br />chance</p> [/ux_text] [ux_text font_size="1.2"] <p>To buy with -50%</p> [/ux_text] [button text="Shop sale" padding="10px 30px 10px 30px"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/kisspng-responsive-web-design-wordpress-woocommerce-chair-armchair.png" image_size="original"] [/col] [/row]
[row label="Banner 6"] [col span__sm="12" padding="30px 30px 0px 30px" bg_color="#aa70ff"] [row_inner] [col_inner span__sm="12" padding="30px 30px 30px 30px" padding__sm="15px 15px 15px 15px" align="center" bg_color="rgb(255, 255, 255)" bg_radius="20" class="col-round"] [ux_text font_size="1.3" class="h1 collapse"] <p>BLACK FRIDAY</p> [/ux_text] [gap height="10px"] [ux_text font_size="3" line_height="0.95" class="h1 collapse"] <p>70% OFF</p> [/ux_text] [gap height="20px"] [button text="Shop now" color="alert" padding="10px 30px 10px 30px"] [ux_text class="collapse"] <p>Valid untill 23 nov </p> [/ux_text] [/col_inner] [/row_inner] [/col] [/row]
[row label="Banner 7" col_bg="rgb(86, 64, 136)"] [col span__sm="12" span__md="12" padding="10% 10% 10% 10%" align="center" bg_color="rgb(254, 190, 156)"] [ux_image_box style="shade" img="https://www.flatsomedesigns.com/wp-content/uploads/tamara-bellis-LJqRUWr9V0w-unsplash.jpg" image_height="75%"] [/ux_image_box] [row_inner label="% Circle" h_align="center"] [col_inner span="3" span__sm="6" span__md="6" margin="-100px 0px 0px 0px" class="index-up"] [ux_image_box style="overlay" image_height="100%" image_radius="100" image_overlay="#f8ff92" text_pos="middle"] [ux_text font_size="2" font_size__md="1.75" text_color="rgb(0,0,0)" class="h1"] <p>-70%</p> [/ux_text] [/ux_image_box] [/col_inner] [/row_inner] [ux_text font_size="2" text_color="rgb(255, 255, 255)" class="h1 uppercase collapse"] <p>Summer Sale</p> [/ux_text] <p>Valid until 31 August</p> [button text="Shop now" padding="10px 30px 10px 30px" icon="icon-heart"] [/col] [/row]
[row] [col span="4" span__sm="12" padding="0px 0px 40px 0px" bg_color="rgb(236, 233, 226)"] [ux_image_box style="push" img="https://www.flatsomedesigns.com/wp-content/uploads/hyla-IKFk5BHOUF0-unsplash.jpg" image_height="75%" text_align="left" text_bg="#f7ff93" text_padding="5% 5% 5% 5%"] [ux_text font_size="2.5" line_height="1.1" class="h1 uppercase collapse"] <p>Super <br />Sale</p> [/ux_text] [ux_text font_size="2" font_size__md="1.5" class="collapse"] <p>70% OFF </p> [/ux_text] [gap height="10px"] [button text="Shop now" padding="10px 30px 10px 30px" expand="true"] [/ux_image_box] [/col] [/row]
Free • Locked
[row label="Banner 9"] [col span__sm="12"] [ux_image_box img="https://www.flatsomedesigns.com/wp-content/uploads/inside-weather-348dJPXEFHk-unsplash.jpg" image_height="75%" image_overlay="rgba(0, 0, 0, 0)" image_hover="zoom" text_bg="#f8ff92" text_padding="30px 0px 50px 0px"] [row_inner style="collapse" h_align="center"] [col_inner span="10" span__sm="11" span__md="12" padding="10% 20px 10% 20px" margin="-100px 0px 0px 0px" bg_color="rgba(255, 255, 255, 0.977)" bg_radius="20"] [ux_text class="tagline"] <p>Mega sale</p> [/ux_text] [ux_text class="h1 uppercase"] <p>Spring sale</p> [/ux_text] [gap height="15px"] [button text="Shop now" padding="10px 30px 10px 30px"] [/col_inner] [/row_inner] [/ux_image_box] [/col] [/row]
Free • Locked
[row label="Banner 10" padding="20px 20px 20px 20px"] [col span__sm="12" span__md="12" align="center" bg_color="rgb(96, 118, 105)" color="light"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/dose-juice-UAyYiZqGlWc-unsplash.jpg" image_size="original" height="75%"] [row_inner style="collapse"] [col_inner span__sm="12" padding="10px 0px 20px 0px"] [ux_text font_size="1" class="tagline collapse"] <p>All items</p> [/ux_text] [ux_text font_size="2.35" font_size__sm="2.5" class="h1 collapse"] <p>75% OFF</p> [/ux_text] [gap height="10px"] [button text="Voucher: #happy24" color="white"] [/col_inner] [/row_inner] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/dose-juice-sTPy-oeA3h0-unsplash.jpg" image_size="original" height="75%"] [/col] [/row]
Free • Locked
[row label="Banner 11"] [col span__sm="12" margin="0px 0px 0px 0px"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/getty-images-RfVCkUPmIhw-unsplash.jpg" bg_size="original" bg_pos="28% 40%" height="330px" class="round-corners"] [row_inner style="collapse" v_align="middle" h_align="right" padding="8% 25% 5% 8%" padding__sm="8% 10% 20% 10%"] [col_inner span="7" span__sm="12" margin="0px 0px 0px 10px" margin__sm="0px 0px 0px 0px" bg_color="#ffffff" bg_radius="20"] [ux_text font_size="2" class="h2 collapse"] <p>Summer Sale</p> [/ux_text] [gap height="5px"] [ux_text class="collapse"] <p>Lorem ipsum dolor sit amet dolore magna aliquam erat.</p> [/ux_text] [gap height="20px"] [button text="Shop now" padding="10px 0px 10px 0px" expand="true"] [/col_inner] [col_inner span="5" span__sm="8" margin="0px 0px 0px -130px" margin__sm="-60px 0px 0px 0px"] [ux_image_box style="overlay" image_height="100%" image_width="60" image_radius="100" image_overlay="rgb(243, 252, 111)" text_pos="middle"] [ux_text font_size="1.65" font_size__sm="1.5" font_size__md="1.75" text_color="rgb(0,0,0)" class="h1"] <p>-70%</p> [/ux_text] [/ux_image_box] [/col_inner] [/row_inner] [/section] [/col] [/row]
Free • Locked
[section label="Banner 12"] [row col_bg="#7450af"] [col span__sm="12" color="light"] [row_inner style="collapse" v_align="middle"] [col_inner span="6" span__sm="12"] [ux_banner height="99.99%" height__sm="70%" bg="https://www.flatsomedesigns.com/wp-content/uploads/45269.jpg" bg_color="rgba(255, 255, 255, 0)"] [/ux_banner] [/col_inner] [col_inner span="6" span__sm="12" padding="30px 15% 0px 15%" padding__sm="30px 10% 30px 10%" align="center"] [ux_stack direction="col" distribute="center" align="center" gap="0.75"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/flame-icon.png" width="10"] [ux_text class="tagline collapse"] <p>Super sale</p> [/ux_text] [/ux_stack] [ux_text font_size="3.05" class="h1 collapse"] <p>50% OFF</p> [/ux_text] [gap height="15px"] [button text="Go to shop" color="secondary" padding="10px 0px 10px 0px" expand="true" icon="icon-shopping-cart" icon_pos="left"] [/col_inner] [/row_inner] [/col] [/row] [/section]