Layers Call to Action Widget
The Layers Call to Action widget found in Layers Pro provides a quick and simplified way to add a promo banner to Layers pages or a one-column Footer widget panel. For advanced ways of creating custom call to action banners, see How to Create a Call to Action Banner With Layers Widgets
When you add a new widget, or if you have created a page using one of the Preset layouts that use this widget, it will display with some default settings and content.
The design bar, located on the right side of the widget, controls the overall style and layout for the widget.
1 – Layout
This section sets the widget content’s width. The widget itself will always be full width to the page.
- Boxed will limit the width of the widget content (the columns, title and description) to around 1040px and center it.
- Full Width will expand the widget content to the width of the page. This also makes each column wider.
2 – Background
The background option affects the widget background and will span full width of the page.
Click SELECT COLOR to bring up the color wheel to choose a color. You may optionally enter a color manually using its HEX code.
- Background colors should match any background image you set, as the darkness or lightness of the color will determine whether the widget title and description area is black or white by default.
Click CHOOSE IMAGE and upload or select an image to fill the widget container with something other than a solid color.
- Textures, photos and images without embedded text are best.
- Full-size images should be at least 1920px wide and as tall as the space it intends to fill to ensure highest quality at all screen sizes.
- Tiles or repeatable images can be any size you want.
When you set a background image, the following settings will appear:
Choose Repeat only if you want your image to tile. Best used with small patterns and textures.
This option aligns your image and can help you adjust the placement of the subject of your background if needed.
Top will display it from Top-down, Bottom from bottom-up, Left from top-left and right from top-right. Center is the absolute center and is usually best.
Parallax allows your background image to stay in place while the site is scrolled. For Parallax to work well, your background image must be on Repeat, or be at least 300px taller than the widget’s height to allow for scrolling.
Check this option if you want your image to always fill the slide at all screen sizes. This is helpful if your image is less than 1908px but should not be used on images below 1600px or you risk significant quality loss at higher resolutions.
3 – Widget Title & Description
Sets a heading for the widget, appearing above your accordions, and may be left blank, but in most cases this is the primary tagline or catchphrase of your Call to Action.
Click the button to choose your alignment, size and color:
This option allows you to choose the heading tag to wrap your title, H3 by default. The heading tag does not impact SEO ranking or change the heading size by default, though it can be used in child themes or custom styling to allow selecting special heading styles such as jumbo headings, fancy headings etc.
For best results we recommend keeping these H2 or H3 to ensure your site outline reads well for visitors on accessibility devices.
The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified
Choose from Small, Medium or Large.
Each size option is pre-configured with optimal balance, line height and font-size combinations and will vary depending on your font choice in Site Settings, or custom styling added through a Style Kit or Child Theme.
Depending on the background color of the content area, your text will be black or white by default, but can be customized here.
Click on SELECT COLOR to expand the color wheel and click to select a color from the palette or enter an HTML hex value.
The Description field will display just below the widget title above the widget content to add a brief amount of supporting text to your CTA Title. Clicking into the description will activate the rich text editor to aid you in formatting your content, and supports basic HTML input via the Code </>view, much like the WordPress post editor.
For best results, limit the description to 1-3 sentences to introduce the content in this section of your layout. This field may optionally be left blank.
- You should not paste text/html from Word or other text editors into this field or it may carry over unpredictable code that causes formatting issues.
- Shortcodes are OK, but the element pulled in may not jive well with the widget limitations and may be best in a column or require Advanced CSS styling.
Customizing Widget Text Content
4 – Button Options
The widget displays two Button toggles by default, each with a separate button menu for customizing the button look.
Select from Small, Medium, Large or Massive to set the overall height of each accordion toggle. You can also add padding with borders, explained in a bit.
Choose from Solid, Transparent, or Gradient.
- If Gradient is chosen, you will be prompted to choose the Gradient Starting color and Gradient End color, and the angle for the colors to fade.
- If Solid is chosen, you will be prompted to choose a Background Color
Choose a color for the title of each accordion toggle.
Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.
- –Choose– (Uses theme default styling)
- Uppercase (ALL BIG LETTERS),
- Capitalize (Each Word Begins With a Capital Letter)
- Lowercase (all small letters)
Slide the toggle to increase or decrease the border or enter a pixel value. Set to 0 for no border.
Tip: If you want to add padding to your selected button size, you can do so with the border option and a border color that matches your button background color.
If the border is enabled, choose a border color.
Rounded Corner Size
Slide the toggle to increase or decrease the rounded edges of the accordions.
- For square corners, set it to 0.
- For “pill” style accordions, set it to 100.
Choose from None, Small, Medium or Large. Adds dimension with a drop-shadow that automatically blends to your background color.
5 – Linking
The INSERT LINK option allows for static or dynamic linking of your button to any URL or published post or page on your site. This option will link the column’s Title and Featured Image, in addition to any button element you create.
- Select Custom or Existing Content from the LINK drop-down
- Enter the full URL (if Custom) or search for the page or post title you want to link to and select it
To create a button, enter the link text into the TEXT field. Leave blank to just link the title and image.
Open in New Tab
To open links in a new browser tab, click the new tab icon to the right of your URL or Page.
4 – Adding and Deleting Buttons
To add more buttons, simply click the +ADD NEW Button bar. This will duplicate your previous section to help speed up customization.
To delete a button, click the pencil icon in the right corner of the slide and click the red trash can icon.
Save your layout any time by clicking SAVE & PUBLISH