Call to action designs for Flatsome Theme
Get your visitors clicking with our pre-made call to action (CTA) designs for the Flatsome Theme. They’re perfect for nudging your audience towards taking that all-important action. Try them out for free!
[section label="CTA 01"] [row col_bg="#aa70ff" col_bg_radius="20"] [col span__sm="12" padding="2% 2% 2% 2%" padding__sm="7% 7% 7% 7%" padding__md="4% 4% 4% 4%" bg_color="#aa70ff" color="light"] [row_inner style="collapse" v_align="middle"] [col_inner span="2" span__sm="12" span__md="12"] [ux_banner height="70%" height__sm="50%" height__md="30%" bg="https://www.flatsomedesigns.com/wp-content/uploads/320863.jpg" bg_color="rgba(255, 255, 255, 0.099)" bg_pos="52% 14%" class="round-corners"] [/ux_banner] [/col_inner] [col_inner span="7" span__sm="12" span__md="12" padding="15px 10% 0px 5%" padding__sm="20px 0px 15px 0px" padding__md="30px 10% 15px 10%"] [ux_text font_size__sm="1.25" text_align="left" text_align__md="center"] <h2>Our team is here for all your questions</h2> [/ux_text] [ux_text text_align="left" text_align__md="center"] <p>Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diam nonummy nibhuias euismod tincidunt ut laoreet dolore magna aliquam.</p> [/ux_text] [/col_inner] [col_inner span="3" span__sm="12" span__md="12" padding="0px 30px 0px 0px" padding__md="0px 0px 0px 0px"] [ux_stack distribute="end" distribute__md="start" align__md="center"] [button text="Get in touch" padding="10px 30px 10px 30px" expand="true"] [/ux_stack] [/col_inner] [/row_inner] [/col] [/row] [/section]
[section label="CTA 02" padding="20px" padding__md="10px"] [gap] [row col_bg="#e0dbd9" col_bg_radius="20" padding="3% 3% 3% 3%" padding__sm="8% 8% 8% 8%" padding__md="4% 4% 4% 4%"] [col span__sm="12"] [row_inner style="collapse" v_align="middle"] [col_inner span="3" span__sm="12" span__md="12" visibility="hide-for-medium"] [ux_banner height="300px" height__sm="200px" height__md="350px" bg="https://www.flatsomedesigns.com/wp-content/uploads/quokkabottles-3HWIsBpEZ_M-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="50% 22%" class="round-corners"] [/ux_banner] [/col_inner] [col_inner span="6" span__sm="12" span__md="12" padding="30px 10% 0px 10%" padding__sm="30px 0px 0px 0px" padding__md="30px 10% 10px 10%" align="center"] [ux_text font_size="1.45" font_size__sm="1.5" class="collapse lowercase"] <h2>Become a special member</h2> [/ux_text] <p>Lorem ipsum dolor sit amet sed diam nonummy nibh euismod tincidunt laoreet dolore magna aliquam.</p> [button text="Join now" padding="13px 30px 13px 30px" link="#popup-donation" class="button-small"] [/col_inner] [col_inner span="3" span__sm="12" span__md="12" force_first="medium"] [ux_banner height="300px" height__sm="200px" height__md="350px" bg="https://www.flatsomedesigns.com/wp-content/uploads/quokkabottles-aOHsjcL4ZWI-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="11% 69%" class="round-corners"] [/ux_banner] [/col_inner] [/row_inner] [/col] [/row] [/section]
[gap] [row label="CTA 03"] [col span__sm="12"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/pawel-czerwinski-_NPyWow9CZk-unsplash.jpg" bg_size="original" bg_overlay="rgba(0, 0, 0, 0.2)" bg_pos="49% 100%" parallax="3" dark="true" height="450px" height__sm="300px" height__md="400px" class="round-corners"] [row_inner h_align="center"] [col_inner span="5" span__sm="12" span__md="8" padding="50px 0px 0px 0px" padding__sm="60px 0px 70px 0px" padding__md="30px 0px 0px 0px" align="center"] [ux_text font_size="2" font_size__sm="1.75"] <h2>Time for Coffee</h2> [/ux_text] [button text="Join the Club" color="success" padding="10px 30px 10px 30px"] [/col_inner] [/row_inner] [/section] [row_inner style="collapse" h_align="center"] [col_inner span="7" span__sm="10" span__md="11" padding="2% 5% 2% 5%" padding__sm="5% 10% 5% 10%" margin="-35px 0px 0px 0px" margin__sm="-95px 0px 0px 0px" margin__md="-55px 0px 0px 0px" align="left" bg_color="#171717" bg_radius="20" color="light"] [ux_stack direction__md="col" gap="2.25" gap__md="0"] [ux_text] <ul> <li class="bullet-checkmark">Exlusive deals</li> </ul> [/ux_text] [ux_text] <ul> <li class="bullet-checkmark">Always up to date</li> </ul> [/ux_text] [ux_text] <ul> <li class="bullet-checkmark">No more waiting</li> </ul> [/ux_text] [ux_text] <ul> <li class="bullet-checkmark">Mega discounts</li> </ul> [/ux_text] [/ux_stack] [/col_inner] [/row_inner] [/col] [/row]
[gap] [row label="CTA 04"] [col span__sm="12"] [section bg="https://www.flatsomedesigns.com/wp-content/uploads/getty-images-ydM8X8ZUKnY-unsplash.jpg" bg_size="original" bg_overlay__sm="rgba(0, 0, 0, 0.275)" bg_pos="89% 23%" dark="true" padding="20px" height="300px" height__md="250px" class="round-corners"] [row_inner style="collapse"] [col_inner span="7" span__sm="12" span__md="8" padding="0px 0px 0px 5%" padding__sm="0px 0px 0px 0px" align="center"] [gap height="20px" height__sm="20px" height__md="30px"] [ux_text font_size="1.45" font_size__sm="1.5" font_size__md="1.2"] <h2>Shop now with mega discounts</h2> [/ux_text] <p>Lorem ipsum ut laoreet dolore magna aliquam erat.</p> [button text="Shop collection" padding="10px 30px 10px 30px"] [/col_inner] [/row_inner] [/section] [/col] [/row]
[section label="CTA 05" bg="https://www.flatsomedesigns.com/wp-content/uploads/philip-oroni-EaFX0kRvXT8-unsplash.jpg" bg_size="original" bg_overlay="rgba(0, 0, 0, 0)" bg_pos="3% 40%" padding="70px" padding__sm="50px"] [gap height="15px" height__sm="15px"] [row style="small" col_bg="rgb(255, 255, 255)" col_bg_radius="20" padding="10% 10% 10% 10%"] [col span="4" span__sm="12" span__md="7" align="left"] [gap height="10px" height__sm="5px"] [ux_text font_size="1.2" font_size__sm="1.25" text_align="left" text_align__sm="center"] <h2>Start your new chapter</h2> [/ux_text] [ux_text text_align="left" text_align__sm="center"] <p>Lorem ipsum dolor sit laoreet dolore magna aliquam erat volutpat.</p> [/ux_text] [ux_stack distribute__sm="center"] [button text="Join the program" padding="10px 30px 10px 30px" expand="0"] [/ux_stack] [/col] [/row] [/section]
[section label="CTA: Offer" padding="20px" padding__md="0px"] [row col_bg="rgb(224, 219, 217)" col_bg_radius="20" padding="4% 4% 4% 4%" padding__sm="6% 6% 6% 6%" padding__md="7% 7% 7% 7%"] [col span__sm="12"] [row_inner style="collapse" v_align="middle" h_align="center"] [col_inner span="6" span__sm="12" span__md="12" padding__md="0px 0px 0px 0px"] [row_inner_1 style="collapse" col_bg="rgb(255, 255, 255)" col_bg_radius="20" v_align="equal" h_align="center" padding="5% 5% 5% 5%" padding__sm="6% 6% 6% 6%"] [col_inner_1 span__sm="12"] [ux_banner height="250px" height__sm="150px" bg="https://www.flatsomedesigns.com/wp-content/uploads/sandra-seitamaa-SjkIXUGPNRI-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="25% 77%" class="round-corners"] [/ux_banner] [row_inner_2 style="collapse" h_align="center"] [col_inner_2 span="9" span__sm="11" span__md="9" padding="35px 0px 0px 0px" padding__sm="25px 0px 0px 0px" align="center"] [button text="Special offer" color="success" size="xsmall"] [gap height="10px"] [ux_text font_size="1" font_size__sm="0.8" line_height="0.75" line_height__sm="1.05" class="collapse"] <h3><span style="font-size: 300%;"><span style="text-decoration: line-through; color: #E0DBD9;"> $490</span> $279</span></h3> [/ux_text] [gap height="15px" height__sm="5px"] <p>Lifetime access • For all devices • All products including discounts • Refundable</p> [button text="Join the Program" padding="10px 0px 10px 0px" expand="true"] [/col_inner_2] [/row_inner_2] [/col_inner_1] [/row_inner_1] [/col_inner] [col_inner span="6" span__sm="11" span__md="12" padding="0px 20px 0px 15%" padding__sm="30px 0px 20px 0px" padding__md="40px 0px 0px 0px"] [ux_text font_size="2.15" font_size__sm="1.6" font_size__md="2" line_height="1.3" class="headline collapse"] <h2>Once in a lifetime</h2> [/ux_text] <p>Lorem ipsum dolor sit amet laoreet dolore consect setuer elit, sed diam nonummy nibh ipsum dolor sit amet euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> [gap height="15px" height__sm="10px"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/checkmark-green.png" img_width="20" pos="left"] [ux_text class="collapse"] <p>Lorem ipsum dolor sit amet dolores erat</p> [/ux_text] [/featured_box] [gap height="15px" height__sm="10px"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/checkmark-green.png" img_width="20" pos="left"] [ux_text class="collapse"] <p>Dolores liamop consect laoreet elit liom adepios</p> [/ux_text] [/featured_box] [gap height="15px" height__sm="10px"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/checkmark-green.png" img_width="20" pos="left"] [ux_text class="collapse"] <p>Nonummy nibh ipsum dolor sit amet euismod </p> [/ux_text] [/featured_box] [gap height="15px" height__sm="10px"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/checkmark-green.png" img_width="20" pos="left"] [ux_text class="collapse"] <p>Lorem ipsum dolor sit amet dolores erat</p> [/ux_text] [/featured_box] [gap height="15px" height__sm="10px"] [featured_box img="1726" img_width="20" pos="left"] [ux_text class="collapse"] <p>Dolores liamop consect laoreet elit liom adepios</p> [/ux_text] [/featured_box] [/col_inner] [/row_inner] [/col] [/row] [/section]
[section label="CTA 07" bg="https://www.flatsomedesigns.com/wp-content/uploads/nataliya-smirnova-3T6LAs2JhMw-unsplash.jpg" bg_size="original" bg_overlay="rgba(170, 112, 255, 0.262)" bg_pos="45% 47%" height="400px" height__sm="350px"] [row h_align="center"] [col span="4" span__sm="11" span__md="6" align="center"] [gap height="40px"] [ux_text font_size="1.75"] <h2>Special Offer</h2> [/ux_text] <p>Lorem ipsum dolor sit amet tincidunt ut laoreet dolore magna erat volutpat.</p> [button text="Shop now" padding="10px 30px 10px 30px"] [/col] [/row] [/section] [row label="Icon Box" style="collapse" h_align="right"] [col span="2" span__sm="5" span__md="3" padding="0px 20% 0px 20%" padding__sm="0px 15% 0px 15%" padding__md="0px 15% 0px 15%" margin="-90px 0px 0px 0px" margin__sm="-50px 0px 0px 0px"] [ux_image id="https://www.flatsomedesigns.com/wp-content/uploads/exclusive-icon.png"] [/col] [col span="1" span__sm="12" visibility="hide-for-medium"] [gap] [/col] [/row]
[section label="CTA 08"] [row col_bg="rgb(224, 219, 217)" col_bg_radius="32" padding="60px 60px 60px 60px" padding__sm="30px 30px 30px 30px" padding__md="60px 60px 60px 60px"] [col span__sm="12"] [row_inner style="collapse" v_align="middle" h_align="center"] [col_inner span="5" span__sm="12" span__md="12"] [ux_banner height="275px" height__sm="150px" height__md="250px" bg="https://www.flatsomedesigns.com/wp-content/uploads/getty-images-fcjlukxF9kY-unsplash.jpg" bg_color="rgba(255, 255, 255, 0)" bg_pos="28% 51%" class="round-corners"] [/ux_banner] [/col_inner] [col_inner span="7" span__sm="12" span__md="12" padding="0px 0px 0px 10%" padding__sm="20px 0px 0px 0px" padding__md="40px 0px 0px 0px"] [ux_text font_size="1.5" font_size__sm="1.25"] <h2>Affordable for Everyone</h2> [/ux_text] <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> [gap height="10px"] [row_inner_1 style="collapse"] [col_inner_1 span="6" span__sm="12" margin="0px 0px 0px 0px" margin__sm="0px 0px 20px 0px"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/leaves-icon.png" img_width="55" pos="left"] [gap height="5px"] [ux_text font_size="1.1" line_height="1"] <h4>Vegan and Organic</h4> [/ux_text] <p>Zero chemicals</p> [/featured_box] [/col_inner_1] [col_inner_1 span="6" span__sm="12" margin="0px 0px 0px 0px" margin__sm="0px 0px 20px 0px"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/world-icon.png" img_width="55" pos="left"] [gap height="5px"] [ux_text font_size="1.1" line_height="1"] <h4>Worldwide Delivery</h4> [/ux_text] <p>We will come to you</p> [/featured_box] [/col_inner_1] [/row_inner_1] [/col_inner] [/row_inner] [gap height="35px" height__sm="85px"] [/col] [/row] [row style="collapse" h_align="center"] [col span="11" span__sm="9" span__md="10" padding="20px 30px 20px 30px" margin="-70px 0px 0px 0px" margin__sm="-110px 0px 0px 0px" bg_color="#171717" bg_radius="20" color="light"] [ux_stack direction__sm="col" distribute="between" distribute__sm="center" align__sm="stretch" gap__sm="0.75"] [ux_text font_size="1" font_size__sm="1.25" font_size__md="1" line_height__sm="1.5" text_align="left" text_align__sm="center"] <h3>Don't wait and receive amazing discounts</h3> [/ux_text] [button text="Subscribe Now" color="success"] [/ux_stack] [/col] [/row] [/section]
[section label="CTA 09" padding="50px" padding__md="20px"] [row col_bg="rgb(224, 219, 217)" col_bg_radius="20" padding="5% 5% 3% 5%" padding__md="7% 7% 5% 7%"] [col span__sm="12" padding__sm="30px 30px 10px 30px" padding__md="60px 60px 40px 60px"] [row_inner style="collapse" v_align="middle" h_align="right"] [col_inner span="6" span__sm="12" span__md="12" padding="0px 35% 0px 0px" padding__sm="0px 0px 0px 0" padding__md="0px 0px 0px 0px"] [gap height__md="5px"] [ux_text font_size="1.25"] <h2>Get to know about us</h2> [/ux_text] <p>Lorem ipsum dolor sit amet adipiscing elit sed diam nonummy nibh euismod ut laoreet dolore magna aliquam erat volutpat dolores cannon. Lorem ipsum dolor sit amet adipiscing elit nibh euismod.</p> [gap height="10px"] <ul> <li class="bullet-cross bullet-star"><i class="ri-checkbox-circle-fill" data-text-color="secondary"></i> Chat with our sales team</li> <li class="bullet-cross bullet-star">Join our community</li> <li class="bullet-cross bullet-star">Contact support 24/7</li> </ul> [gap height="20px"] [button text="Get in touch" color="white" padding="10px 30px 10px 30px"] [gap height="10px" height__md="30px"] [/col_inner] [col_inner span="6" span__sm="12" span__md="10" align="right"] [ux_banner height="541px" height__sm="300px" bg="https://www.flatsomedesigns.com/wp-content/uploads/samsung-uk-ylU-b7pcgpY-unsplash.jpg" bg_color="rgba(255, 255, 255, 0.14)" bg_pos="28% 40%" class="round-corners"] [/ux_banner] [/col_inner] [/row_inner] [row_inner h_align="center"] [col_inner span="3" span__sm="11" span__md="5" padding="30px 30px 20px 30px" padding__sm="20px 20px 20px 20px" margin="-365px 0px 0px 5px" margin__sm="-110px 0px 0px 0px" margin__md="-380px 0px 0px -210px" bg_color="rgb(255, 255, 255)" bg_radius="15"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/diamond-icon-1.png" inline_svg="0" img_width="35"] [ux_text font_size="1" font_size__sm="1.25"] <h3>Exclusive Acces</p> [/ux_text] [gap height="5px"] [/featured_box] [ux_text font_size="0.95"] <p>Lorem ipsum dolor sit amet adipiscing elit diam nonummy nibh euismod tincidunt laoreet dolore magna aliquam.</p> [/ux_text] [/col_inner] [/row_inner] [/col] [/row] [/section]
[section label="CTA 10" padding="90px" padding__md="20px"] [gap] [row col_bg="#171717" col_bg_radius="20"] [col span__sm="12"] [row_inner style="collapse" v_align="bottom" h_align="center" padding="6% 7% 0px 7%" padding__sm="10% 7% 0px 7%" padding__md="8% 7% 0px 7%"] [col_inner span="7" span__sm="12" span__md="12" align="center" color="light"] [ux_text font_size="1.1" font_size__sm="1.2" font_size__md="1"] <h2>Connect now with our team to get started</h2> [/ux_text] [gap height="5px"] [button text="Get in touch" color="success" padding="10px 30px 10px 30px"] [gap height="25px"] [/col_inner] [col_inner span="5" span__sm="12" span__md="9" padding="0px 0px 0px 0px" margin="-150px 0px 0px 0px" margin__md="-60px 0px 0px 0px"] [ux_banner bg="https://www.flatsomedesigns.com/wp-content/uploads/young-caucasian-blonde-woman-expressing-emotions-isolated-1.png" bg_size="original" bg_color="rgba(255, 255, 255, 0)"] [/ux_banner] [/col_inner] [/row_inner] [/col] [/row] [/section]
[section label="CTA 11" bg_color="rgb(224, 219, 217)" padding="50px" padding__sm="20px" padding__md="40px"] [gap] [row h_align="center"] [col span="7" span__sm="12" span__md="11" align="center"] [ux_text text_color="#aa70ff"] <h6>Join the program</p> [/ux_text] [gap height="10px"] [ux_text font_size="2.75" font_size__sm="1.75" font_size__md="2.5" line_height="1.25"] <h3>Kick off the next brand new collabration</h3> [/ux_text] <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> [gap height="20px" height__sm="10px"] [row_inner style="small" col_bg="rgb(255, 255, 255)" col_bg_radius="20" v_align="equal" padding="7% 10% 10% 10%" padding__sm="8% 8% 8% 8%"] [col_inner span="6" span__sm="12"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/square-icon.png" img_width="40"] <h3>Unlimited Liftime Acces</h3> <p>Lorem diam nonummy nibh euismod tincidunt magna aliquam erat.</p> [/featured_box] [/col_inner] [col_inner span="6" span__sm="12"] [featured_box img="https://www.flatsomedesigns.com/wp-content/uploads/crown-icon.png" img_width="40"] <h3>Exclusive Deals Only</h3> <p>Lorem diam nonummy nibh euismod tincidunt magna aliquam erat.</p> [/featured_box] [/col_inner] [/row_inner] [gap height="20px"] [button text="Join the Program" padding="10px 30px 10px 30px"] [/col] [/row] [/section]
[section label="CTA 12" bg_color="rgb(233, 229, 228)" padding="0px"] [row style="collapse" width="full-width" v_align="middle" h_align="center"] [col span="7" span__sm="12" span__md="12"] [ux_banner height="420px" height__sm="250px" height__md="450px" bg="https://www.flatsomedesigns.com/wp-content/uploads/sumaid-pal-singh-bakshi-OucTVVkwD_A-unsplash.jpg" bg_size="original" bg_color="rgba(255, 255, 255, 0)" bg_overlay="rgba(0, 0, 0, 0.05)" bg_pos="44% 65%"] [/ux_banner] [/col] [col span="5" span__sm="11" span__md="11" padding="8% 8% 6% 8%" margin="0px 0px 0px -80px" margin__sm="-35px 0px 20px 0px" margin__md="-75px 0px 40px 0px" align="center" bg_color="rgb(255, 255, 255)" bg_radius="20"] [ux_text font_size="1.25"] <h2>Shop the new collection</h2> [/ux_text] <p>Lorem ipsum dolor sit amet sed diam nonummy nibh tincidunt ut laoreet dolore aliquam volutpat.</p> [button text="Shop Collection" padding="10px 30px 10px 30px"] [/col] [/row] [/section]