Latest Docs

Layers Pro User Guide

Setup & Customizer Options

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 and support.

Install

To update an existing Layers Pro install, deactivate and delete it first. Your settings are preserved in your database.

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 and Layers Pro.

From the WordPress admin, go to PLUGINS → ADD NEW

Click on UPLOAD PLUGIN

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

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

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:

Site Settings

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.

General

General

Enable Smooth Scroll will allow a smooth scrolling transition when using back to top buttons or anchor links. Disable this option if your child theme already implements this.

Enable Site Wide Animations will allow elegant fading movement of widget content when the page is scrolled. Disable this option if you do not want animations or your child theme implements similar features.

Styling

Body Background sets the overall body background. Note that the background is only visible on interior pages and your mobile sidebar and will be covered by the widget container color in most cases.

Site Accent Color sets a global color for buttons and links. You will be able to further customize individual element colors in other sections.

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

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.

Header

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

Your Header is the bar containing your logo and menu.

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.

Search Label

Enter your desired label for the overlay Search field.

Styling

Header Padding: Use the slide toggle to increase the Header height, if desired. 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.

Header Background: Choose a background color for the Header or upload a custom graphic

Sticky Breakpoint defaults to 270px and can be used to adjust the delay before the sticky menu is shown (if enabled)

Page Title Styling

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

Choose a Title background color if you want it to be different from the Header Background, or upload an image. Images should be at least 2000px wide or a tileable texture with no embedded text. For mobile compatibility, and important subject matter in title banner images should be within the center 1000px.

Enabling Parallax will keep the image in place within the title banner whle the page is scrolled

Enabling Stretch wil ensure your image remains responsive and scales to the title banner’s dimensions across different screen sizes.

Choose your Title text color

Choose the color of excerpts that may appear in your title banner, if enabled.

Use the Title Height slider to add or remove padding from the title banner to increase or decrease its height

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.

Text Color – color of your nav links

Text Shadow – choose whether to add a top or bottom shadow effect to the text

Text Transform – choose whether your links are normal (how you type them in the admin), Capitalize, UPPERCASE or lowercase

Link Spacing – Use the slider to add or remove space between the links (default is 10 pixels)

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

Text Color – color of links in the drop-down menu

Text Shadow – choose whether to add a top or bottom shadow effect to the text

Text Transform – choose whether your links are normal (how you type them in the admin), Capitalize, UPPERCASE or lowercase

Background color – the drop-down menu background

Border Width – how fat the border around the drop-down menu background is – set 0 for no border.

Border Color – color of the border around the drop-down menu if Border Width is 1 or more

Separator Color – color of the lines above and below the links

Blog

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!

Blog 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!

Contact & Maps Widget

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

Accordion Widget

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.

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

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

Customizing Widget Text Content

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.

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

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

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 Widget

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

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.

Gutter

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.

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

10 – Advanced Options

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.

Saving And Reverting

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 Widget

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.

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 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 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:

CSS

1

<img src="http://yoursite.com/wp-content/uploads/imagename.jpg"/>

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.

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

Social Icons Widget

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.

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.

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

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

Select the icon corresponding to the social network you want this button to link to

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:

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.

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.