Layers Pro Setup Guide

Product Guides  Since: 1.0 Last Updated: Layers ver. 1.6 Time to Read: 10 minutes

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.

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.

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.

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

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

Site Settings

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

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.

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.

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:

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.

Header

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

  1. 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.
  2. Header Background: Choose a background color for the Header or upload a custom graphic
  3. 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.

  1. 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.
  2. Enabling Parallax will keep the image in place within the title banner whle the page is scrolled
  3. Enabling Stretch wil ensure your image remains responsive and scales to the title banner’s dimensions across different screen sizes.
  4. Choose your Title text color
  5. Choose the color of excerpts that may appear in your title banner, if enabled.
  6. Use the Title Height slider to add or remove padding from the title banner to increase or decrease its height
  7. 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)

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

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!

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.

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

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.

Footer

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.

Edit Layout

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