Layers Pro User Guide

Layers Pro is a premium plugin that unlocks advanced functionality and widgets in the Layers theme framework, giving you even more control over your site design while remaining user friendly and easy to learn. For an overview of features, visit the Layers Pro website.

Support

To report issues with Layers Pro options specifically, or to get help with using the Layers Pro widgets, go to Layers Dashboard and enable Layers Messenger.

For help with general Layers questions, including page building or customization, please visit our Layers forums.

Downloads & Updates

CodeCanyon Customers

Layers Pro has been moved to our website where all future updates will be made available. Please ensure you areinstalling the latest version (not a copy from CodeCanyon), and that you are able to receive notifications via email or Layers Messenger so you know when updates are released. See How to Redeem CodeCanyon Purchase Code for Layers Pro for help with activating and sign-up.

Child Theme Bundles

Layers Pro copies that are bundled with child themes are supported by the theme author. Please check with the theme author for where you can acquire updated downloads.

Install

  1. You must have the current version of Layers installed and activated to use Layers Pro. Layers Pro can also be used with Layers Child themes active as long as they are compatible with the current version of  Layers.
  2. From the WordPress admin, go to PLUGINSADD NEW
  3. Click on UPLOAD PLUGIN 
  4. Click on CHOOSE FILE in the center white box and navigate to the to the Layers Pro install file (ie layers-pro-extension.zip), select it and click  OPEN
  5. Click INSTALL NOW
    • If an update is needed, you will see a notice at the top of the screen with a link to click on before activating
  6. When complete, click Activate Plugin

Access Layers Pro options from LAYERS  → CUSTOMIZE

Layers adds several new options to your Customizer, found under the standard panels:

Logo & Title

Logo Size

Use the Logo Custom Size slider to adjust the size of your logo or enter a max-height value in pixels. This aids in scaling hi-res logos for a better header bar fit, or allows you to use auto-adjustment menu to select a size that scales naturally depending on your menu font and other header settings. When you upload your logo it is important to skip cropping.

logo-resize

Buttons

The buttons panel adds Primary and Secondary Button colors, and allows you to customize border , rounded corners text and effects for buttons in your site. These settings affect elements such as read more buttons, buy now buttons and comment buttons. Buttons in widgets may have their own color controls that override these.

Layers has two automatic design features – auto-invert and auto-hovers. These features apply hover effects to your buttons automatically, and make text and buttons light on most dark backgrounds or dark on most light backgrounds.

Secondary Button colors are for when your button appears on a contrasting background -for example if buttons on your site are black on a white background, but you want your sidebar to be black, set the secondary button colors to be opposite of the main button colors – a white button with black text etc.

Social Networks

Set your social profile URLs here for use with the Social Links widget. Each link contains some helper text to show you the expected format for the URL. If you are not sure, please consult your social network’s help documentation for how to find your URL. In most cases, you can just copy/paste the URL from the address bar while viewing your profile in a new browser tab, then paste it here.

You may also setup social icons in any WordPress menu, explained next:

Menus

Social Icons in Menus

social-menu

When you edit a menu and Add Items and choose Custom Link, you may now choose from several Social Network icons to display in place of a text link. Use this feature to add a Facebook link to the end of your main menu, build a Social menu in one of the Top Menu locations, or add them to your site footer by choosing the Footer Menu location.

If you have the Menu Social Icons plugin enabled, you must disable it, if you use this feature, to avoid FontAwesome conflicts.

See How to Add Social Media Icons to Header or Footer for a step-by-step tutorial.

Styling

Along with logo resizing you can also adjust the height of your header and the spacing between menu links by returning to the main Customizer window and expanding the Header panel.

Search

Check to enable a search icon in your Header Menu. When clicked, this expands into a search field that will search your standard post and page content. This uses the default search functionality in WordPress. To customize search, see our Tutorials section.

Header Styling

  1. Choose a background color for the Header
  2. Use the slide toggle to increase the Header height. The number corresponds to the amount of top and bottom padding added, in pixels. For example, a setting of 50 will add 50 pixels of padding to both the top and bottom.

Page Title Styling

Page titles appear on list pages and pages using the “Blank Page” template and also include breadcrumb navigation.

  1. Choose a Title background color if you want it to be different from the Header Background.
  2. Choose your Title text color
  3. Choose the color of excerpts that may appear in your title banner, if enabled.
  4. Use the slider to add or remove padding from the title banner to increase or decrease its height
  5. Use the Title Below Spacing slider to add or remove padding specifically to the title text to aid in positioning it within the title banner. (default is 20)

Menu Styling

These controls help you customize the Header Menu links as they appear in your Header.

  1. Text Color – color of your nav links
  2. Text Shadow – choose whether to add a top or bottom shadow effect to the text
  3. Text Transform – choose whether your links are normal (how you type them in the admin), Capitalize, UPPERCASE or lowercase
  4. Link Spacing – Use the slider to add or remove space between the links (default is 10 pixels)
  5. Enable Hover Styling – select if you want to choose these options for the hover effect also

Sub Menu Styling

This will affect menu drop-downs

  1. Text Color – color of links in the drop-down menu
  2. Text Shadow – choose whether to add a top or bottom shadow effect to the text
  3. Text Transform – choose whether your links are normal (how you type them in the admin), Capitalize, UPPERCASE or lowercase
  4. Background color – the drop-down menu background
  5. Border Width – how fat the border around the drop-down menu background is – set 0 for no border.
  6. Border Color – color of the border around the drop-down menu if Border Width is 1 or more
  7. Separator Color – color of the lines above and below the links

This new panel added in Layers Pro allows you to customize the post meta and other display elements of your blog page, post archives, singles posts and pages. These do not affect the Post widget!

Styling

Customize the various colors of your blog. Make sure you browse to the Blog or post category page in the preview so you can see your changes live!

  1. Titles – Post Title Colors
  2. Story Link – Link colors in posts
  3. Sidebar Background – choose a background for the sidebar – default is light gray
  4. Post Meta – choose a color for the author, date, category, tags links on posts
  5. Comments – choose a color for the comments box background. Text will adjust automatically.

Archive

Layout & Post Meta

These settings allow you to choose what meta to display on the blog page or post archives (list view)

  1. Featured Image = Check to show or uncheck to hide
  2. Post Date = Check to show or uncheck to hide
  3. Post Categories = Check to show or uncheck to hide
  4. Post Tags = Check to show or uncheck to hide
  5. Post Author = Check to show or uncheck to hide
  6. Excerpt = Choose whether to show or hide excerpts on post lists.
    • Excerpt Length = Enter a word count for the length of your excerpts. The default is 55 in WordPress.
  7. Read More Button = check to show or uncheck to hide
    • Read More Button Text = If the Read More button is enabled, you may customize the text here. Default is “Read More”.

Posts & Pages

Post Meta

These settings allow you to choose what meta to display on a single post or page.

  1. Featured Image = check to show or uncheck to hide
  2. Post Date = check to show or uncheck to hide
  3. Post Author = check to show or uncheck to hide
  4. Post Categories = check to show or uncheck to hide
  5. Post Tags = check to show or uncheck to hide

Comments

These settings allow you to control comment display on all posts and pages.

Check to enable comment display or hide it. This is a global control that will hide comments for all posts or all pages depending on your choice.

You may also disable comments on specific posts only from the admin by Quick Editing the post or page and unchecking the Allow Comments box.

Styling

The footer Styling panel now contains advanced color customization.

  1. Footer Background – Choose a color for the footer – light gray by default
  2. Footer Padding – Use the slider to adjust the padding above or below the footer to affect its height. Default padding is 40 pixels.

Widgets

Layers Pro unlocks new options in the core Layers Widgets, outlined below.

Slider Widget

  • Parallax Background
  • Video Background
  • Heading Tag select
  • Button Styling Per Slide

View the Layers Slider Widget guide for details

Content Widget

  • Parallax Background
  • Image Scaling
  • Heading Tag select
  • Button Styling Per Slide

View the Layers Content Widget guide for details

Post Widget

  • Parallax Background
  • Heading Tag select

View the Layers Post Widget guide for details

Contact & Maps Widget

  • Parallax Background
  • Heading Tag select

View the Layers Contact Details & Maps Widget guide for details

Browse to a Layers page in your Preview window, then return to the main Customizer menu and expand Edit Layout to access the widget setup. Here you can find the new widgets added with Layers Pro, each explained in detail in the following guides:

More on Layers Pro

 

accordions

The Layers Accordion found in Layers Pro is incredibly versatile and can be used as a custom menu, FAQ, feature list, or services outline, just to name a few! This article outlines the widget’s options. For steps on configuring this widget for any of the other uses listed above, visit the Tutorials section.

accordion-widget

 Design Bar

When you add a new Accordion 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’s overall size

  • Boxed will limit the width of the slider to align with your content. This option is best set in combination with the Boxed Layout in your Site and Header settings.
  • Full Width will allow the slider to span the entire browser window and is the default.

2 – Background

The background option affects the widget background and will span full width of the page.

Background Color

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.

Backround Image

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:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

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

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.

Stretch

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 – Buttons

The buttons control relates to the clickable part of each accordion.

Size

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.

Background Style

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

Text Color

Choose a color for the title of each accordion toggle.

Text Shadow

Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.

Text Transform

Choose from:

  • –Choose– (Uses theme default styling)
  • Uppercase (ALL BIG LETTERS),
  • Capitalize (Each Word Begins With a Capital Letter)
  • Lowercase (all small letters)

Border Width

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.

Border 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.

Button Shadow

Choose from None, Small, Medium or Large. Adds dimension with a drop-shadow that automatically blends to your background color.

Widget Content

4 – Widget Title & Description

Sets a heading for the widget, appearing above your accordions, and may be left blank.

Click the text-icon button to choose your alignment, size and color:

Heading Type

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.

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

Text Size

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.

Text Color

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.

Description

The Description field will display just below the widget title above the widget content. 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 cannot put scripts into this field such as javascript snippets
  • 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.

See below for more help with using the Content Editor tools.

5 – |Accordion Title

Set the text for the Accordion toggle

6 – Accordion Excerpt

The excerpt appears when the Accordion is expanded.

This field works like a lite version of the post editor and can take a small amount of text or basic HTML. The most common use is to enter a short excerpt of 1-3 sentences. This field may optionally be left blank.

  • You cannot put scripts into this field
  • You should not paste text/html from Word or other text editors into this field as it can carry over unwanted formatting
  • You can put shortcodes into this field
  • You can put basic HTML or embed codes into the code view

Customizing Widget Text Content

Images may be added without shortcodes by using the code </> panel and a basic HTML image tag. Example:

The file’s url may be copied from the image information screen in the Media Library (access the media library from the Background option if you need to upload an image directly or grab the url for an existing image).

7 – Advanced Styling

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

8 – Adding and Deleting Accordions

To add more sections, simply click the +ADD NEW Accordion bar. This will duplicate your previous section to help speed up customization.

To delete a section, click the pencil icon in the right corner of the accordion and click the red trash can icon.

Save your layout any time by clicking SAVE & PUBLISH

cta

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

call-to-action-widget

Design Bar

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.

Background Color

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.

Backround Image

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:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

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

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.

Stretch

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.

Widget Content

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 text-icon button to choose your alignment, size and color:

Heading Type

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.

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

Text Size

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.

Text Color

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.

Description

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 cannot put scripts into this field such as javascript snippets
  • 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.

Size

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.

Background Style

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

Text Color

Choose a color for the title of each accordion toggle.

Text Shadow

Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.

Text Transform

Choose from:

  • –Choose– (Uses theme default styling)
  • Uppercase (ALL BIG LETTERS),
  • Capitalize (Each Word Begins With a Capital Letter)
  • Lowercase (all small letters)

Border Width

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.

Border 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.

Button Shadow

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.

insertlink

  1. Select Custom or Existing Content from the LINK drop-down
  2. Enter the full URL (if Custom) or search for the page or post title you want to link to and select it

Buttons

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

post-carousel

The Layers Post Carousel widget found in Layers Pro provides a quick and simplified way to add a post slider to your Layers pages.

  • To setup custom slides for featuring any kind of content, use the Slider Widget

post-carousel-widget

Design Bar

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 – Columns

Columns

Choose the number of columns for your layout, to a maximum of 6.

  • The number of columns you choose combined with the Layout will determine how large featured images in your posts need to be to fill the column space.
  • For best results, use images at least 960px wide.

Background Color

Click Select Color to bring up the color wheel to choose a color for the post columns, if desired. You may optionally enter a color manually using its HEX code.

  • Background colors will automatically convert the post content text color. Dark background colors will have white text, and light colors will have black text.

Gutter

This option controls spacing between posts in the grid.

Uncheck the gutter option to remove the spacing.

3 – Carousel

This section controls the visibility and style of the slider elements.

Show Slider Arrows

Check this option if you want the left and right slider arrows to show when the mouse hovers over the slide. If your widget only has one slide, this option is ignored.

Arrows are best if you want your visitors to be able to click back and fourth on their own. We do not recommend enabling arrows if you have Auto-Play enabled.

Show Slider Dots

Check this option to show navigation dots at the bottom of the slider. These can be used alone or in combination with the arrows, but are best used when you have the slider set to auto-slide (when the arrows should be disabled)

Slider Controls Color

Choose a color for your arrows or dots (white by default)

Auto-play Slides

Check this option if you would like your slider to advance automatically. This option should not be used if you have Featured Video in any of your slides.

4 – Display

 

This section controls the visibility of all the things that your posts include by default.

Title & Excerpt Position

  • Regular places the post title and excerpt below the image
  • Overlay places the post title and excerpt on top of the image when the mouse hovers over it. This option is best used with all other meta turned off.

Show Pagination

Off by default. Check this option to display pagination below the posts.

Show Featured Images

On by default. Uncheck this option to hide the featured images or video attached to your posts. This media will still display on the post itself.

Show Post Titles

On by default. Uncheck this option to hide the post title.

Show Post Excerpts

On by default. Uncheck this option to hide the excerpt.

Excerpt Length

If Show Post Excerpts is checked, enter your desired character count here (200 by default).

Show Post Dates

On by default. Uncheck this option to hide the published date.

Show Post Author

On by default. Uncheck this option to hide the author.

Show Tags

On by default. Uncheck this option to hide the tags.

Show Categories

On by default. Uncheck this option to hide the category link(s)

Show “Read More” Buttons

On by default. Uncheck this option to hide the Read More button.

“Read More” Text

If Show “Read More” Buttons is checked, you may customize the button text here

5 – Buttons

The buttons control relates to the clickable part of each accordion.

Size

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.

Background Style

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

Text Color

Choose a color for the title of each accordion toggle.

Text Shadow

Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.

Text Transform

Choose from:

  • –Choose– (Uses theme default styling)
  • Uppercase (ALL BIG LETTERS),
  • Capitalize (Each Word Begins With a Capital Letter)
  • Lowercase (all small letters)

Border Width

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.

Border 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.

Button Shadow

Choose from None, Small, Medium or Large. Adds dimension with a drop-shadow that automatically blends to your background color.

6 – Image Ratio

Image Ratio options control how your featured images are scaled or cropped.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 960px wide.

  • Portrait: Uses the 340px wide scale of portrait oriented images, or crops your image to 340px from center. The original height is maintained.
  • Landscape: Uses the 480px wide scale of landscape oriented images, or crops your portrait images from center.
  • Square: crops your image to 480×480 from center
  • Original: Uses the original image, scaled proportionately to fit the layout. For left and right aligned images, this is a max of 630px wide. For center-aligned images, this is a max of 1000px wide.
  • Circle: Sets a radius on your image.  To get a perfect circle, your original image should be square. Portrait and Landscape originals may produce ovals.

7 – Background

The background option affects the widget background and will span full width of the page.

Background Color

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.

Backround Image

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:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

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

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.

Stretch

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.

8 – Widget Title & Description

Title

Sets the heading on the widget, appearing above your widget content and may be left blank.

Click the text-icon button to choose your alignment, size and color:

Heading Type

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.

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

Text Size

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.

Text Color

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.

Description

The Description field, containing “Our services run deep and are backed by over ten years of experience.” by default, will display just below the widget title above the widget content. 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 cannot put scripts into this field such as javascript snippets
  • 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.

Content Editor Toolbar

9 – Widget Options

These menus allow you to filter the posts the widget displays.

Category to Display

Choose a specific category to filter by, or select All

Number of Items to Show

Choose how many posts to pull in. For best results, choose a multiple of the number of columns you chose in the design bar. For example, if you chose 3 columns, you should set this to 3,6,9, or 12 etc.

If you have sticky posts, increase this by the number of stickies shown.

Sort By

Choose how to sort your posts, if desired. By default they are listed in chronological order with the newest post first/left to right.

Custom Order is only possible if you have installed a plugin like Admin Management Xtended which allows post ordering. See How to Manually Order Posts for details on using this option.

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a page revision (up to 5) you can restore if you made a mistake or want to revert to a previous version.

tabs

The Layers Tabs Widget, found in Layers Pro, is incredibly versatile and can be used as a custom menu, FAQ, feature list, or services outline, just to name a few! This article outlines the widget’s options. For steps on configuring this widget for any of the other uses listed above, visit the Tutorials section.

tabs-widget

Design Bar

When you add a new Accordion 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’s overall size

  • Boxed will limit the width of the slider to align with your content. This option is best set in combination with the Boxed Layout in your Site and Header settings.
  • Full Width will allow the slider to span the entire browser window and is the default.

2 – Background

The background option affects the widget background and will span full width of the page.

Background Color

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.

Backround Image

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:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

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

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.

Stretch

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 – Tab Panel

These options determine the size of the tabs.

Choose a size for the tabs and set a background color. To allow the bar/header to appear transparent, choose the same color as the page or widget background.

Tab Content

4 – Widget Title & Description

Sets a heading for the widget, appearing above your accordions, and may be left blank.

Click the text-icon button to choose your alignment, size and color:

Heading Type

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.

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

Text Size

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.

Text Color

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.

Description

The Description field will display just below the widget title above the widget content. 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 cannot put scripts into this field such as javascript snippets
  • 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.

See below for more help with using the Content Editor tools.

5 – |Tab Title

Set the text for the Accordion toggle

6 – Tab Excerpt

The “Excerpt” pertains to the tab content that appears when you click a tab.

This field works like a lite version of the post editor and can take a small amount of text or basic HTML. The most common use is to enter a short excerpt of 1-3 sentences. This field may optionally be left blank.

  • You cannot put scripts into this field
  • You should not paste text/html from Word or other text editors into this field as it can carry over unwanted formatting
  • You can put shortcodes into this field
  • You can put basic HTML or embed codes into the code view. such as maps  or video. Choose the “iframe embed code” from the share options where available.

Customizing Widget Text Content

Images may be added without shortcodes by using the code </> panel and a basic HTML image tag. Example:

The file’s url may be copied from the image information screen in the Media Library (access the media library from the Background option if you need to upload an image directly or grab the url for an existing image).

7 – Advanced Styling

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

8 – Adding and Deleting Tabs

To add more sections, simply click the +ADD NEW Tab bar. This will duplicate your previous section to help speed up customization.

To delete a section, click the pencil icon in the right corner of the accordion and click the red trash can icon.

Save your layout any time by clicking SAVE & PUBLISH

The Layers Social Icons Widget available in Layers Pro can be used in any widget area in your theme to display a custom set of social network buttons linking to your social media profiles around the web.

social-icons-widget

Design Bar

When you add a new Social Icons 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’s overall size

Boxed will limit the width of the widget to align with your content. This option is best set in combination with the Boxed Layout in your Site and Header settings.

Full Width will allow the slider to span the entire browser window and is the default.

socialicons

When using this widget in a normal sidebar widget area, Full Width should be selected.

social-links-sidebar

2 – Background

The background option affects the widget background and will span full width of the page.

Background Color

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.

Backround Image

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:

Background Repeat

Choose Repeat only if you want your image to tile. Best used with small patterns and textures.

Background Position

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

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.

Stretch

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.

 

Widget Content

3 – Widget Title & Description

Sets a heading for the widget, appearing above your accordions, and may be left blank.

Click the text-icon button to choose your alignment, size and color:

Heading Type

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.

Text Align

The Text align option will affect the alignment of the widget Title and Description. Choose from Left, Centered, Right or Justified

Text Size

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.

Text Color

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.

Description

The Description field will display just below the widget title above the widget content. 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 cannot put scripts into this field such as javascript snippets
  • 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 – Buttons

Each button has an individual Button Option panel and a list of icons to choose from.

  1. Select the icon corresponding to the social network you want this button to link to
  2. Click the Button Option to customize the background style, color,  and text color, if desired. This is helpful if you want to give the icons their branded colors for better recognition:

social-icons-buttons

The buttons control relates to the clickable part of each accordion.

Size

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.

Background Style

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

Text Color

Choose a color for the title of each accordion toggle.

Text Shadow

Choose from Bottom, Top or None. Adds a subtle shadow that blends to any background color.

Text Transform

Choose from:

  • –Choose– (Uses theme default styling)
  • Uppercase (ALL BIG LETTERS),
  • Capitalize (Each Word Begins With a Capital Letter)
  • Lowercase (all small letters)

Border Width

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.

Border 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.

Button Shadow

Choose from None, Small, Medium or Large. Adds dimension with a drop-shadow that automatically blends to your background color.

7 – Advanced Styling

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

8 – Adding and Deleting Accordions

To add more sections, simply click the +ADD NEW ACCORDION bar. This will duplicate your previous section to help speed up customization.

To delete a section, click the pencil icon in the right corner of the accordion and click the red trash can icon.

Save your layout any time by clicking SAVE & PUBLISH

6 – Adding and Deleting Buttons

To add more icons, simply click  +ADD NEW Button . This will duplicate your previous button to help speed up customization.

To delete a button, click the pencil icon in the right corner of the button panel and click the red trash-can icon.

Save your layout any time by clicking SAVE & PUBLISH

7 – Advanced

This section is intended for front-end designers or individuals who are comfortable working with CSS. It allows you to create a custom class and add some custom css that will load only when a widget with this class is loaded. This is useful in cases where you want to style widgets differently from one another and want the styling to be saved in the page’s export data. This has advantages over using the global CSS area when creating style kits, for example.

You may also increase or decrease widget padding and margins here.

If you are new to CSS or WordPress, you can disregard the Advanced button, although some of our Tutorials will provide you with instructions and some codes snippets to get you started with using this feature.

See How to Use the Advanced Design Bar Option to Add Custom Classes to Widgets

For customization tips, troubleshooting and general Layers Help, see the Layers User Guide

For customization tips, troubleshooting and the general Layers User Guide, visit the Layers Docs Homepage

Last Updated: