How to Create a Call to Action Banner With Layers Widgets

How To  Tutorials  Since: 1.1.5 Last Updated: Time to Read: 3 minutes

cta

Call-to-action banners are useful for promoting specific pages on your site such as a Sale or Features page or a specific post or product. The Layers Content widget allows you to easily create a variety of promo section styles that combine text, images and buttons. This tutorial walks you through how to configure the widget for a Tagline & Button style banner that can be placed at the bottom of a Layers builder page, or in a 1 column Site Footer to show across all pages on the site.

The Layers Pro extension adds a Call To Action widget to the Customizer for quickly setting up a simple text and button combo. See Layers Call to Action Widget Guide.

  1.  LayersPages and click Edit Layout on the page you wish to add the banner to OR
  2. If you plan to use the widget in the Site Footer, go to LayersCustomize and ensure the Footer Layout is set to 1 column.
    • There are ways to combine one full width widget with multiple footer columns, but for simplicity we will focus on one column in this tutorial.
  3. Add a Layers Content Widget, then expand the third default column and click the red trash-can icon to delete it.
  4. Remove the text from the Widget Title and Excerpt
  5. Expand the first column and enter your desired title and text.
    • Select the Image Align: Right option in the toolbar
    • Select the Text Align: Left option in the toolbar
    • Select Columns: 8 of 12 option in the toolbar
  6. Expand the second column and remove the default title and text.
    • Select the Image Align: Top option in the toolbar
    • Select the Text Align: Center option in the toolbar
    • Select Columns: 4 of 12 option in the toolbar
  7. Enter your desired Button Text and Button Link

Choose your desired text size or color in each column, and customize further to add a background image or color in the widget design bar if desired.

Footer Position Tweaks

If your child theme overrides the footer background colors, you can force a background on your widget by clicking the Advanced button in the design bar, and entering cta  in the Custom Class field. Save your Changes, then back out to expand the CSS panel in the customizer and add:

To remove the padding on the top of the footer panel:

The slider widget may also be used but requires custom styles to position the button.

  1. Click +ADD WIDGET and choose the Layers Slider widget
  2. Expand the second and third slides and click the red trash-can icon to delete them.
  3. Click LAYOUT in the widget Design Bar and choose Full Width
  4. Click SLIDER in the widget Design Bar. Set the following:
    • Auto-Height Sides: checked
    • Show Slider Arrows: unchecked
    • Show Slider Dots: unchecked
    • Animation Type: Slide
    • Auto-play Slides: unchecked
  5. Click on the Background Image button in the slide’s toolbar and select a background color.
    • When using background images, choose a color that closely matches your background image dominant color so the text color invert triggers correctly.
  6. Click the Text button and choose the Left Align option and Large Text size.
  7. Add a Title. For best results, keep this brief. Example: “Get 20% off selected items in our shop”
  8. Optional: Add some excerpt text. Example: “Enter WINTERSALE at checkout”
  9. Add your desired button text and link. Example: “Shop Now”
    • For best results, Call-to-action links should always go to a page on your own site – never send people away to another domain or they may never return!
  10. Click the Advanced button in the Design Bar and add a Custom Class cta
  11. Add the following styles to the Custom CSS box:

 

If you want to use the cta  style on other pages with the Slider widget, add the Custom CSS code above to the main CSS panel in your Customizer menu instead, then simply add cta  to the Custom Class field in the Advanced option of any Slider widget on your site. Learn more about using the Advanced widget option.