Layers User Guide

Before You Begin

Install WordPress

Layers is a theme framework built for the self-hosted, WordPress.org publishing platform. For help installing WordPress, see How to Install and Setup WordPress on Your Own Web Host

Existing Sites

If you have an existing WordPress install with content, back it up!

Configure WordPress

Layers depends on a few settings for optimal content presentation and functionality:

  1. Go to SettingsPermalinks and ensure anything but the default is selected. Post Name is recommended
  2. Go to SettingsMedia and ensure your settings are as follows:
    • Thumbnails: This is up to you, but we recommend 300×300
    • Medium: 600 wide and 9999 tall. This creates a 600px wide scaled version of uploaded images that are larger than 600px and is used by Layers in your widgets in some configurations.
    • Large: You can leave this be or change the height to 9999 to ensure portrait oriented images are never cropped.
  3. If you have images in WordPress already, you will need to Regenerate your Images

Download Layers

Layers can be downloaded from http://layerswp.com

Safari users take care to ensure Safe Downloads is not enabled in your Preferences. When the download is complete, you should have a zip file on your desktop if you plan to install via WordPress.

Make sure you have a fresh download before you begin.

How do you want to install it?

Installing via WordPress

Note: If you are not running the latest version of WordPress, please update under DashboardUpdates
  1. Login to your WordPress admin panel, go to Appearance and click Add New at the top
  2. Click the Upload Theme button at the top
  3. Click the Browse button inside the center white box (Choose File on some browsers)and navigate to the location of your Layers theme zip file.
    • browse-themefile
  4. Select the file and click Open.
  5. Click Install Now to begin the installation.
  6. Wait for the success message, then click the Activate link.
  7. You will be directed to the Layers Getting Started screen.
  8. Take a minute to go through the wizard  and continue with the next article Page Building & Homepages.

Installing via FTP

  1. Unzip the Layers theme zip file to your Desktop (or any easy-to-find location) to find the theme folder, ie “layerswp”
    • If you are on a Mac and you are seeing extra words or an extension on the folder, open that folder to find the actual layerswp theme folder folder!
  2. Connect to your web space using an FTP client and browse to wp-content/themes
  3. Drag the theme folder from your computer into the themes directory window.

    Install Layers Via FTP

    • Mac Users: Make sure that the path is wp-content/themes/layerswp/ and not wp-content/themes/layers_package/layerswp or similar as this will cause some functions to break.
  4. Login to your WordPress admin panel and go to Appearance Themes
  5. Hover over the Layers theme thumbnail and click the Activate button
  6. You will be directed to the Layers Getting Started page. Take a moment to go through the dialog and continue with the next article Page Building & Homepages. after selecting a starting layout.

Child Themes

If you have a Layers Child Theme, you may repeat these steps to install and activate, or view specific steps here: How to Install Layers Child Themes

 

Layers pages use a special template with a widget area or “builder zone” where your layout sections,  called widgets in WordPress, will appear between the Header and Footer. These pages use a top-down or horizontal layout that has been proven in web design to grab visitor attention more easily and are easier to navigate and scan on mobile devices. We offer several tutorials and design resources on this site to help you along if you are new to layouts.

The following will walk you through creating  Layers pages and how to use the Layout Editor.

Creating Layers Pages

Layers gives you two ways to get started building a home page – Choose a Preset or Start from Scratch.

Preset Layouts

When you first activate the theme, the Setup dialog will end with selecting a preset layout.

You may also reach this page any time from  Layers → Add New Page

add-new-page-presets

The Preset Layouts such as Application, Contact Page and Landing Page will each create a new Layers page for you and load it with a set of widgets, widget settings and placeholder content to get you started. Layers Child Themes will add additional preset pages here which are used instead of traditional “demo content” files.

From the Getting Started wizard:

Click a thumbnail and choose Start Building

From Add New Page:

Click Select under the screenshot of the preset you wish to use.

Starting from Scratch

The Blank Page preset creates a new Layers page but does not load any content or widgets.

You can also create new blank builder pages directly.

  1. Go to Pages → Add New
  2. Give your page a Title
  3. Select the Layers Template page template from the Page Attributes box on the right side of the editor:

4. Click Publish, then Edit Layout

Always save or Publish new pages before proceeding into the Edit Layout screen when creating them this way!

Customize Your Pages

After a short load, you will be brought to the WordPress Visual Customizer with a preview of your new page on the right side. On the left is the Customizer menu.

layers-customizer-menu-1-5

Layers adds several sections to your WordPress Customizer which control “global” visual aspects of your theme such as the Header and Footer layouts, Fonts and Logos.  The addition of the Layers Pro extension will unlock even more sections in these panels, and other extensions or child themes may add additional panels. We will cover these in more detail later in this guide.

The first panel will always be Edit Layout which allows you to access the widget areas of the previewed page. This is where the page building magic happens!

Edit Layout

The Edit Layout panel is where you can access all of the widget areas on a given page to customize the layout.

Click  Edit Layout to open the panel:

edit-layout

Don’t see the Edit Layout panel? Make sure you are editing a Layers page, then see Troubleshooting Customizer Issues in WordPress if problems persist.

The first panel inside Edit Layout is the main layout’s Body panel where your layout is built. Preset layouts will fill this section with a selection of Layers widgets. Blank pages will prompt you to add your first widget.

  • Below this panel, you will see any additional widget areas available on the page, such as the Mobile Sidebar and Footer sections. These are global, meaning any widgets you place there are visible on all pages. To customize which widgets appear on which pages in global areas,see How to Show Different Widgets Per Page
  • Some extensions or child themes may also add other widget areas that are specific to a page template or post type. These are usually indicated by the page name, such as “Above Blog” or “Shop Page Body.”

Editing Widgets

Edit widgets by clicking one to expand the widget options.

10 second demo:

 

Try this now by expanding the Content Widget and change the Title and Description.

Adding Widgets

To add a widget, click  +Add a Widget

 

Select a Layers widget (indicated by the Layers icon) by left-clicking it.

You may technically add any widget to a Layers page, but Layers Widgets are the only widgets designed specifically for Layers Pages. 3rd Party widgets provided through a plugin, like free sliders, shortcodes, etc, may not be formatted to work in a full-width space and may require custom styling by you. “Sidebar” widgets such as the WordPress Related Posts, Tag Cloud, or WooCommerce Products, etc are designed for sidebars and will not work out well in a Layers page.

Deleting Widgets

Remove a widget by expanding the options and click the red Remove button, then confirm.

Customizing Widgets

Layers widgets and their options are covered in detail in the next articles. You may also view several page building and general customization tips in this site’s Tutorials section.

You can quickly hide the widget options to view your whole page preview by mousing over the little eye icon in the widget header. This is often faster or better for performance than collapsing the widget.

hover-hide

 

Using the Customizer Screen

Save your layout any time by clicking SAVE & PUBLISH. Always save before manually refreshing the page!

savebutton

Return to the main Customizer menu by clicking the back arrow in the top-left:

Close the Customizer X, View Your Page, Add a new Page +, or Return to the Layers Dashboard in your WordPress Admin by clicking the Layers icon

layers-customizer-button

 

 Accesing the Layout Editor

You can get to this panel several convenient ways:

1. By viewing the page in the browser and clicking the Edit Layout link in your admin toolbar (if enabled)

edit-layout-adminbar

2. From the WordPress Dashboard by clicking Edit Layout in the Page Index.

edit-layout-pages

Tip: To view Quick Edit links in any index of your WordPress admin, hover over the post/page titles.

3. From the Page editor screen by clicking the Edit Your Page button

edit-your-page

4. From the WordPress Customizer under Appearance Customize. The Edit Layout panel in the Customizer corresponds to the page being displayed in the preview pane.

Layers comes with four versatile widgets:

  • Layers Slider Widget
  • Layers Content Widget
  • Layers Posts Widget
  • Layers Contact & Maps

You can expand this with the Layers Pro extension, which adds a Layers Accordion Widget, Layers Post Carousel, Layers Tabs Widget,  Layers Call to Action Widget and more.

Now let’s take a look at the default widgets in detail starting with the Slider Widget

The Layers Slider Widget is incredibly versatile and can be used as a traditional content slider, a jumbo layout section, Call-To-Action bar, Testimonial, or slideshow, 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.

slider-widget

 

When you add a new Slider widget, or if you have created a page using one of the Preset layouts, the Slider will display with some default settings and content.

Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of the widget.

1 – Layout

This section sets the Slider’s overall size

  • Boxed will limit the width of the slider to 1040px by default and center it.
  • Full Width will allow the slider to span the entire browser window and is the default.
  • Full Screen will set the slides to fill the entire height and width of the user’s browser window.

2 – Slider

This section sets the slider’s overall style.

Auto-Height Slides

Check this box if you want slides to automatically adjust the slider’s height based on the content/image size of the first visible slide.

This setting is ignored if Full Screen Layout is chosen.

Slider Height

The slider is 550 pixels tall by default. If you would like to make it shorter or taller, enter your desired value here (minimum of 100)

To fit a default size Title, Description and Button, you must set it to at least 180.

Note: When using the Full Width Layout and setting a Slider Height of more than about 720 pixels, you will be forcing visitors with smaller screens to scroll to view the entire slider. Consider using the Full Screen slider layout instead.

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.

slider-widget

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

Slider Controls Color

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

Animation Type

This option controls the slide effect. Choose from a traditional Slide (right to left), Fade, or Parallax. The Parallax option will animate the slider content separately from the background when the slider is advanced or auto-played (not when scrolled!)

Note for Layers Pro users – Fade is not compatible with video hosts that serve up a Flash video when using hosted video backgrounds. Make sure HTML5 videos are enabled on your hosted video account.

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.

3 – Slide Options

slide-content-options

The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget where content areas are present. A content area is typically a slide, column, tab, accordion or other repeatable area.

background-iconBackground

The widget Background option sets a color or background image for the content area of the widget, such as individual slides or columns.

widget-background-option

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 text in this content area is black or white by default.
  • Setting a background  in Content Widget columns will add 20px of padding around the column.

Backround Image

Click Choose Image and upload or select an image to fill the content area behind your text 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.

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.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

PARALLAX (LAYERS PRO)

Layers Pro adds a Parallax option that 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.

Background Video (Layers Pro)

YouTube, Vimeo or Self-Hosted videos may be added to the slider background to create dynamic slides with full motion graphics, scenic backgrounds or ambiental styles. See How to Embed Audio & Video with Layers for detailed information.

For standard video content in your slides, see Images, next:

image-iconFeatured Media

widget-featuredmedia-option

This setting adds an image or oEmbed media to the content area of your  slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

Featured Image

Click CHOOSE IMAGE and upload or select an image from your Media Library.

  • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.

Video URL(oEmbed)

  • This field takes any oEmbed content URL
  • Most major media platforms support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Dailymotion.
  • The URL is copied from the "Share" link on the audio or video player.
  • oEmbed media will take the place of Featured Images

See How to Embed Audio & Video with Layers for detailed information on using oEmbed.

Image Ratio

The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px 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 480x480 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 must be square. Portrait and Landscape originals will produce ovals.

image-alignImage Align

The Image align option will affect the layout of your content area by placing the image above the text, to the left or to the right.

  • The slider widget has an additional option to place the image below the text. When using the image-below layout, tall images will appear to "peek" out from the bottom of the slide.
  • Images that are large enough will fill the entire image area and should not need additional alignment within the image container.

text-iconText

widget-text-option

The Text option controls the alignment and styling of the title and excerpt within the content area.

Text Align

The Text align option will affect the alignment of text inside the text column of the content area (versus the Image Align which determines the overall layout or placement of the text in relation to the image column). Choose from Left, Center, 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.

HEADING TYPE (LAYERS PRO)

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.

Buttons (Layers Pro)

The buttons control allows you to customize the link button style for this slide and is available with Layers Pro.

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.

columns-icon

 Advanced

widget-advanced-option

The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

Custom Classes

You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget, or in the global CSS or DevKit panels in the customizer. See How to Customize Your Site With CSS for details on CSS customization in Layers.

  • Add class names without a dot. Example: feature-column  and not .feature-column
  • Class names should be unique. Example: my-feature-column  has a better chance of being unique, column  is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.

 

4 – Slider Content

You may enter a title and short description here, if desired, or leave these sections blank.

Title

Sets the heading of text in the content area, affected by the Slide Options Text settings. Leave blank for no heading.

Excerpt

Enter the text you want to show in the content area, or leave blank for no content.

The Excerpt includes rich text editing and supports basic HTML input via the Code </> view, much like the WordPress editor.

  • For best results, limit your content to brief, list-style or pointed text, keeping mobile users in mind.
  • Large amounts of text may not fit in the slider on mobile screens.
Code view
  • 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 slide’s design limitations and may require Advanced CSS styling.

Content Editor Toolbar

5 –  Linking

The INSERT LINK option allows for static or dynamic linking of your column content to any URL or published post or page on your site. This option will link the slide’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.

 

6 – Adding and Deleting Slides

  • Delete, click the pencil icon in the right corner of the column’s title bar to expand it, then click the red trash-can icon.pencil-trashcan
  • Add, simply click the +ADD NEW Slide button. This will duplicate your last slide to help speed up customization.

 

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 slider with this class is loaded. This is useful in cases where you want to style sliders 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 add specific classes to specific slides by using the slide’s Advanced button.

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

Saving and Reverting

Save your layout any time by clicking SAVE & PUBLISH

Each Save will create a revision (up to 5) you can restore if you made a mistake or want to revert to a previous version. See How to Restore Layers Page Revisions for details.

For more amazing ways to use the Slider Widget, check out our Slider Widget tutorial series in 10 Ways to Use the Layers Slider Widget

Next up, the Content Widget

The Layers Content Widget is the primary building-block of your layout for displaying static content in up to 12 columns and multiple rows. It can be used to introduce services, link to pages or categories, display an image grid or create custom content layouts for interior pages such as Promo Cards. For steps on configuring this widget for specific uses, visit the Tutorials section.

content-widget

When you add a new Content widget, or if you have created a page using one of the Preset layouts, the widget will display some default settings and content, and have three column panels by default.

You can customize the overall look and layout of the widget using the Design Bar on the right side of 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 – List Style

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
  • Masonry allows each column block to fit together at various heights (such as Pinterest)

The gutter option controls the margins/spacing between blocks. Uncheck it to remove spacing.

3 – 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 (Layers Pro)

Layers Pro adds a Parallax option that 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.

4 – 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 (Layers Pro)

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.

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

 

5 – Widget Options

widget-options

The widget options bar is something you will see in most Layers widgets. These menus give you detailed control over the content of the widget, much like the WordPress post editor.

background-iconBackground

The widget Background option sets a color or background image for the content area of the widget, such as individual slides or columns.

widget-background-option

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 text in this content area is black or white by default.
  • Setting a background  in Content Widget columns will add 20px of padding around the column.

Backround Image

Click Choose Image and upload or select an image to fill the content area behind your text 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.

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.

Darken

Check this option to add a semi-transparent dark overlay to your image. This can help your text stand out better on bright images or images with high contrast.

image-iconFeatured Media

widget-featuredmedia-option

This setting adds an image or oEmbed media to the content area of your  slide, column, tab etc. Unlike the background option, images and oEmbed media added here are fully responsive.

Featured Image

Click CHOOSE IMAGE and upload or select an image from your Media Library.

  • Images should be at least 960px wide for best results, and will be cropped or scaled automatically depending on the side of the column and your Image Ratio choice.

Video URL(oEmbed)

  • This field takes any oEmbed content URL
  • Most major media platforms support oEmbed, including YouTube, Vimeo, SoundCloud, Twitter and Dailymotion.
  • The URL is copied from the "Share" link on the audio or video player.
  • oEmbed media will take the place of Featured Images

See How to Embed Audio & Video with Layers for detailed information on using oEmbed.

Image Ratio

The icon bar at the bottom of the Featured Media panel controls how your featured image is displayed.

The following specifications pertain to using the Boxed Layout. Full Width Layouts need your chosen images to be at least 600px 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 480x480 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 must be square. Portrait and Landscape originals will produce ovals.

Image Size (Layers Pro)

Slide the toggle to scale your image larger or smaller. This is useful if you have hi-resolution icons you want to scale smaller, or original photos that are not large enough to fill the column.

image-alignImage Align

The Image align option will affect the layout of your content area by placing the image above the text, to the left or to the right.

  • The slider widget has an additional option to place the image below the text. When using the image-below layout, tall images will appear to "peek" out from the bottom of the slide.
  • Images that are large enough will fill the entire image area and should not need additional alignment within the image container.

text-iconText

widget-text-option

The Text option controls the alignment and styling of the title and excerpt within the content area.

Text Align

The Text align option will affect the alignment of text inside the text column of the content area (versus the Image Align which determines the overall layout or placement of the text in relation to the image column). Choose from Left, Center, 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.

BUTTONS (LAYERS PRO)

The buttons control allows you to customize the link button style for this slide and is available with Layers Pro.

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.

columns-iconColumn Width

The column width option is available in the Content widget, or custom widgets using Columns, and sets the width of this specific column to a fraction of 12. This takes a little bit of basic math:

  • The grid in Layers has 12 possible columns per row.
  • For an individual column to span the full width of the page, you would choose 12 of 12 columns, which is equal to 100%.
  • For 3 columns to be equally balanced, you would choose 4 of 12 columns for each (4+4+4=12)
  • For 4 columns to be equally balanced, you would choose 3 of 12 columns for each (3+3+3+3=12)
  • To get an offset look with two column blocks, you could choose 9 of 12 columns for one and 3 of 12 for the other (9+3=12)

You can mix and match these, and create rows with varying width blocks. View the Layers Grids page for a visual guide to how grids work and how you might combine them for different layouts.

columns-icon

 Advanced

widget-advanced-option

The Advanced option in the Options bar is similar to the Design Bar's Advanced option, but applies only to this column/slide/tab etc.

Custom Classes

You can add a custom class name here to apply custom styles to this or other columns where the custom class is added. The custom CSS selecting this class can be added to the widget's Advanced option in the Design Bar to affect just this widget, or in the global CSS or DevKit panels in the customizer. See How to Customize Your Site With CSS for details on CSS customization in Layers.

  • Add class names without a dot. Example: feature-column  and not .feature-column
  • Class names should be unique. Example: my-feature-column  has a better chance of being unique, column  is not at all unique. This is important to ensure your custom class is not already in use or defined, which may lead to conflicts.

Padding

Adds the specified amount of padding in pixels to the inside of the content area. This is useful for designs where you want your text to be centered inside a larger colored block, etc

Margins

Adds the specified amount of margin to the outside of the content area. We only allow you to adjust the top and bottom as the left and right margins are pre-defined parts of the grid. If you need to remove the space between columns, uncheck the Gutter option in the Display option of the Design Bar.

 

6 – Widget Content

Title

Sets the heading of your column content, or may be left blank.

Excerpt

This field works like the Description field and can take a small amount of text or basic HTML. This field may optionally be left blank.

  • You cannot put scripts or javascript snippets into this field!
  • You can use shortcodes
  • You should not paste text/HTML from Word or other text editors into this field, but can paste code from the Text tab of a WordPress post into the Code view

Customizing Widget Text Content

 

7 – Linking

The INSERT LINK option allows for static or dynamic linking of your column content 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.

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

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

9 – Adding and Removing Columns

  • To delete a column block, click the pencil icon in the right corner of the column’s title bar to expand it, then click the red trash-can icon.pencil-trashcan
  • To add more column blocks, simply click the +ADD NEW Column button. This will duplicate your last column block to help speed up customization.

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.

For more amazing ways to use the Cointent Widget, check out our Tutorials

 

Next up, the Posts Widget

The Layers Post Widget allows you to display your posts feed in several different layouts. Visit our Tutorials section for some creative ways to configure this widget.

post-widget

When you add a new Posts widget, or if you have created a page using one of the Preset layouts, the widget will display with some default settings.

Click the widget to expand the options panel. You can customize the overall look and layout of the widget using the Design Bar on the right side of 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 – 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

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

4 – Buttons

The button option allows you to customize the color and size of the Read More button. Skip if you disabled buttons in the Display options.

Button Size

Choose from Small, Medium or Large – changes the text size and padding of the button

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.

  • The button text will change to light or dark automatically depending on your chosen button color.
  • The button will lighten automatically on mouse-over (hover).

5 – List Style

  • Grid will arrange your columns in a uniform grid with an equal height on all column blocks.
  • List will force a single column feed similar to a traditional blog layout. This layout will not place a background color on each post, whereas choosing One Column+Grid will produce a similar layout with a background on each post.
  • Masonry allows each post block to fit together at various heights (such as Pinterest) and is ideal if you want your images to use their original dimensions

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 (LAYERS PRO)

Layers Pro adds a Parallax option that 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 (LAYERS PRO)

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.

 

Looking for a way to setup posts in a slider that automatically updates itself? Check out the Layers Pro extension.

Next up, the Contact Details Widget.

This widget requires you to have a valid API key entered in Site Settings > Additional scripts. See How to Setup Your Google API Key.

The Layers Contact Details & Maps Widget creates a customizable section for displaying maps and contact forms. This widget can be used on any Layers page, including a custom “Contact Page” where it can be used alone or in combination with other widgets.

contact-widget

When you add a new Contact widget, it will be pre-configured to display some text and a map

The design bar on the right side of the widget controls the overall style and layout for the widget. Choose the following options to begin:

1 – Layout

This section sets the widgets’s overall size

  • Boxed will limit the width of the widget’s content (including the map) and is the default. As such, the map and form area become narrower
  • Full Width will allow the widget to span the entire browser window. If you choose not to show a contact form, this will let the map span full-width as well.

2 – Display

This section controls the visibility and design of elements in the widget.

Map Height

Enter a value (corresponding to pixels) to set your desired map height. Default is 400.

Show Google Map

On by default.  Uncheck to hide the map.

Show Address

Off by default. Check to display the content of the “Address Shown” field, which is placed above the contact form on the left side of the map.

Show Contact Form

On by default. This displays the content of the Contact Form field (typically a contact form shortcode or text). This section is not limited to contact form shortcodes and can contain other shortcodes, if desired

Uncheck to hide this section.

When both the Show Address and Show Contact form options are unchecked, the map will span full-width.

3 – 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 (LAYERS PRO)

Layers Pro adds a Parallax option that 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.

4 – 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 (LAYERS PRO)

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

5 – Address

This section controls the location of the map, and the content of the Address Shown field, if enabled.

Google Maps Location

Enter your street address using the same format as the field hint, ie Street, City, Zip or Country at a minimum

Example: 300 Prestwich Str, Cape Town, South Africa

Google Maps Longitude and Latitude

This is optional, but can increase the accuracy of the map pin and problems with your map resolving at all.

  • Go to http://maps.google.com and enter your address
  • Zoom in, center on your location until you’re satisfied, then click the map once to add a marker
  • Look at the URL in your browser address bar and you will see the latitude and longitude there
  • lat-long
  • Highlight and copy it, then paste into this field in the widget
  • Example:
    45.8203704, 15.9870767

Address Shown

This field includes rich text editing like the Description field, and supports basic HTML input via the Code view </> 

If the Contact Form section is enabled, you should limit this to your address, phone number and email, if desired (ie one per line)

If the Contact Form is not enabled, you can add pure-HTML widget codes such as a mailchimp signup form, etc, though we recommend using plugins that provide shortcodes instead as they offer the most customization options.

  • You cannot put scripts into this field
  • You cannot put shortcodes into this field
  • You should not paste text/html from Word or the WordPress editor into this field

6 – Contact Form

The Contact Form section of the widget is intended to hold a shortcode from your chosen Contact Form plugin and has the same content rules as the other text areas outlined above.

For best results, use a contact form shortcode with no additional content in this field. Example using Contact Form 7:

contact-form-example

Recommended Contact Form plugins include:

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

Your contact form plugin likely comes with its own styling, and may not inherit the styling of Layers or this widget, including form field label colors. If needed, the following code snippet can be added to the Custom CSS field under the Advanced button in the Design bar to attempt to color these label colors. Change #FFFFFF (white) to the color code selected under your Text option to match your heading. You will otherwise need to check with the plugin author for help with styling the form.

contact-form-labels

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

 

Next up, Customize the Site Settings!

Layers features three primary customization zones for the “global” areas of your theme, or the areas that you don’t customize with widgets. These are the Header, Site Settings and Footer sections. We also provide a quick way to add Custom CSS with the CSS panel, and to set your default landing page. This article focuses on the Site Settings panel, which contains the Logo, Colors, Global Sidebar and Font settings.

The Site Settings section holds your general site configuration, including the Logo & Title,  Navigation Menus, Global Colors, Sidebar Layouts and Fonts.

To reach the Layers Site Settings from the WordPress Dashboard, click on Layers → Customize

Logo & Title

Logo

You may upload a custom graphical logo in this section by clicking  Select Logo.

Layers will scale your logo automatically, but for best results, pre-format your image to be under 100px tall and no wider than 300px. This ensures your logo remains true to size on all device screens, no matter which header layout you choose.

Site Title

Sets the overall title for your site. This title is used in Search Engine listings and is visible in the main browser title bar. Your site title should be precise and reflect your name or the name of your blog, business or project.

Tagline

The Tagline is also known as your site description, and is also used in Search Engine listings. Keep this short and sweet, under 120 characters. Visit this post for some great ideas on how to format your tagline.

Display Site Title and Tagline

Checked by default. Uncheck to hide the Site Title and Tagline in your site’s header. Enabling this option is best if you do not have an image logo, or if your logo is just an icon.

Site Icon

The Site Icon is used as a browser and app icon for your site. Icons must be square, and at least 512px wide and tall. Click Select Image to upload or choose an image in your Media Library.

Logo Size (Layers Pro)

This section is explained in more detail in the Layers Pro User Guide. Want more control over your Logo Size & Header Layout? Get Layers Pro to unlock the full power of Layers!

Colors

Note: If you have installed Layers Pro, this section will be called General and the Header and Footer options moved to their own panels.

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.

Header Color

Use this option to set a custom background color.

Site Accent Color

Applies to inner-page title bar backgrounds, button backgrounds, sidebars, and text links in the body content.

Footer Color

Change the background color of the footer widget area.

Save your layout any time by clicking SAVE & PUBLISH then return < to the main Site Settings menu.

Click the back icon in the Customizer toolbar to return to the Site Settings menu.

Static Front Page

Here you can set which page you want to display when visitors go to your main site URL. Typically this is your “Home” page. Select the desired page from the drop-down, and leave the “posts” option blank. Layers has a Blog page template that takes care of that for you.

Click the back icon in the Customizer toolbar to return to the Site Settings menu.

Fonts

Layers bundles a simple font customization tool that lets you choose a Google webfont for Headings/Titles, body text and buttons. Simply choose your desired font from each drop-down. You may preview fonts in advance by visiting the Google Fonts page.

Font size is determined by the widget options and styling of Layers or your chosen Layers Child Theme, therefore we don’t offer detailed font tweaking in terms of size to help keep your layouts balanced and readable.

Pro Tip: Layers uses the rem font size value, which also sets line-height automatically.

Advanced font customization will be available in future versions of Layers Pro, or you can use a 3rd Party plugin such as Easy Google Fonts and a little custom CSS. See How to Customize Fonts for advanced techniques.

Click the back icon in the Customizer toolbar to return to the Site Settings menu.

Additional Scripts

This section allows you to add important script support for things like Google Analytics, Google Maps, site counters or other web widgets requiring script support.

Google Analytics ID

Add your Google Analytics ID to this field, which is found in your Analytics dashboard on the Google Analytics website. You can also add this under Layers → Dashboard.

Google Maps API Key

This is required for the map in the Layers Contact Widget and other Google libraries used in Layers. See How to Setup Your Google API Key:

Header & Footer Scripts

This panel allows you to add jQuery or Javascript snippets to the header or footer of your site. Examples include snippets for modifying the slider behavior, jQuery animations like smooth scrolling, or Google Analytics code.

Typically a snippet tutorial will indicate if it must be in the header of your site, otherwise scripts should go in the Footer when possible.

Scripts added to the Additional Scripts field should be wrapped in appropriate javascript functions and should not include <script> tags.

You cannot add calls to external libraries here. For example, our Smooth Scrolling jQuery snippet can work in the Header Scripts field, but <script src=”someurl/script.js”></script> will not. You must use a plugin or child theme to enqueue script files and libraries correctly.

headerscripts

For scripts such as Typekit, you must use the “advanced embed” and copy only the part between the <script> and </script> or use the Typekit field under Site Settings → Fonts

Buttons (Layers Pro)

Available in Layers Pro, the Buttons section allows advanced customization of button colors, sizes and borders for buttons in your content such as Read More, Buy Now and Comment buttons. This section is explained in more detail in the Layers Pro User Guide.

Return to the main Customizer menu by clicking the back arrow in the top-left:

 Continue with Customize Header & Footer

 

Layers will display a link to the Sample Page and any other Pages you have created by default in the Header Menu on new setups or, if you have existing content in WordPress, will display the menu assigned to the “Header Menu” location in the Menu customizer. You can manage menus two ways, from APPEARANCE  → CUSTOMIZE  or APPEARANCE  →Menus

Menu Customizer

The best way to customize your menus is in the customizer, as it allows you to see the menu in the chosen location, and the links as they are added so you can more easily determine the order or arrangement to best fit the space.

  1. Go to APPEARANCE  → CUSTOMIZE
  2. Expand the MENUS panel
  3. Select the menu to edit or +ADD A MENU
  4. Click +ADD ITEMS
  5. Most links you will need are under Pages, Categories or Product Categories sections.
    • Sub-menus are created by dragging the menu link under the main link and setting it to the right. You can also click Reorder at the bottom and use the arrows to move items up, down, indent or outdent.
    • social-menusub
  6. When you are finished, check the Menu location you wish to set.

Layers requires you to have a Header Menu set. or WordPress will fallback to a default menu. If you have a unique layout that does not use the Header Menu location, create a menu that is blank / has no links, and assign it to the Header Menu location. Note that the Top bar in Layers will also only appear if you have a menu set in one of the Top Menu locations.

Social Icons (Layers Pro)

Social links can be added to any menu location using the Layers Pro extension, which adds an array of icons to the Custom Link tab in the Menus admin page.  These are font-icons that will inherit the same colors as your nav links, or can be customized separately using custom classes in the menu link options as normal. You can see this  in action in the Footer menu on this site and our demos.

Appearance Menu Admin

When you need advanced control over your menus, such as enabling all the link tabs, adding custom CSS classes, etc, you can reach the main Menu admin under APPEARANCEMENUS.

  1. Select a menu to edit or click the create a new menu link at the top
    • newmenu
  2. Add or remove link from the left-hand sections
  3. To add a Home link, click the View All link in the Pages section and check the Home option at the top. WordPress creates this for you to ensure your home link always goes to your main page, regardless of which actual page is set as your Home Page.
  4. Under the Menu Settings section below your link setup, ensure “Automatically add new top-level pages…” is unchecked
    • topnav
  5. Repeat these steps to add more menus, if desired.
  6. Select your desired location for the menu under the Locations section
  7. Click Save 

To enable the Top bar in Layers, create another menu and assign it to one of the Top Navigation locations.

If you have an existing WordPress install, remove any links that are no longer relevant, such as pages that may have used your old theme’s page templates. For detailed help with using the Menu creator, refer to the WordPress Codex: WordPress Menu User Guide

Creating Sub-Menus

Drop-down menus are produced by tucking link items under a main link in your menu editor area. To do that, add a link to your menu, then left-click and drag it under the menu item you want to use as the main link. Pull it slightly to the right until it locks in place.

dragmenu_2

Enabling Hidden Tabs

The Menu admin will provide a tab for every object in WordPress you can link to, such as post formats, custom post types, custom taxonomies, etc but does not enable them by default.

  1. Click on Screen Options in the top-right of the Menu screen
  2. Check the boxes for the items you want to enable
Visit the WordPress Menus User Guide here for help with sub-menus, enabling link panels and adding custom classes.

If you add content later, you can always come back and add or delete items from your menu.

Header

Click the Header tab to expand the Header settings panel. Here you will see Styling which contains the layout, color and menu styling options.

Styling

Header Width

Choose either Boxed or Full Width.

  • The Boxed width will restrict the content of the header (the logo and menu links) to a maximum of 1040 pixels centered in the page.
  • Full Width will allow the header elements to expand to the width of the browser window (down to mobile screen sizes, where the header will convert into a mobile header)
Header Arrangement

Choose from one of five layouts by clicking the corresponding icon. Each icon provides a visual clue to what the layout does.

Logo Left

logo-left

Logo Right

logo-right

Logo Center Top

logo-center-top

Logo Top

logo-top

Logo Center

The Logo Center option will place the menu assigned to the Header Menu to the left of the logo, and the menu assigned to the Right Header Menu on the right.

logo-center

Your menus are set under the Menus panel in the main Customizer Menu.

Sticky Header

This section presents two options for controlling the behavior of your header bar. Check an option to enable it, or uncheck it to disable it.

Sticky will keep the logo and menu at the top of the browser window while scrolling. The following example shows a sticky header while the site is scrolled down:

sticky-header

Transparent Overlay will allow the header bar to overlap the slider widget or title container on pages, useful when you want a background texture or image to show through.

transparent-header

You may check both boxes for a combination.

When using the transparent overlay, it is important your Header background color choice and the background color of widgets at the top of your pages use a similar color scheme, as the links will automatically turn white or black based on the header background color on scroll. To customize link colors or header colors, see How to Customize the Header Menu Style

Header Styling

Available in Layers Pro, this section allows customization of the header background color and height and extra features such as a search bar in the header menu.

View Layers Pro Options

Page Title Styling

Page titles appear on list pages and pages using the “Blank Page” template they also include breadcrumb navigation. This section, available in Layers Pro, allows you to customize the title banner color, font color, height and spacing.

Click the back arrow in the Customizer nav bar to return to the main Header panel.

backarrow

Seeing “additional scripts” in your Header panel? Make sure you have updated Layers.

Menu Styling

Available in Layers Pro, this section offers complete color customization of the header menu links and sub-menus.

View Layers Pro Options

Save your layout any time by clicking Save & Publish. Always save before manually refreshing the page!

savebutton

Return to the main Customizer menu by clicking the back arrow at the top-left.

backarrow

Footer

Footer Width

Choose a Layout for your site footer.

The Full Width layout will distirbute your footer column(s) across the full width of the viewer’s browser window, and is best used in combination with widget content that can fill out these areas well such as one widget column and a Layers Content Widget(ie not the default WordPress widgets).

The Boxed layout (default) limits the footer to a max of 1040px wide and keeps your content in line and centered with the rest of the layout.

Widget Areas

Choose from None to 4 widget areas. Each widget area represents one column in the Footer

  • 1 column = 100% width with a 2% margin
  • 2 columns = 1/2 width or 50%
  • 3 columns = 1/3 width or 33%
  • 4 columns = 1/4 with or 25%

Choosing None will display just the copyright/footer menu bar.

Copyright Text

Add some custom text to replace our default copyright. You may also add basic HTML here to insert things like links or small images.

Styling

Available in Layers Pro, this section offers advanced control of Footer background color and overall height.

Click the back arrow in the Customizer nav bar to return to the main Footer panel.

backarrow

Return to the main Customizer menu by clicking the back arrow in the top-left.

Learn More about Customizing Your Site 

The mobile-friendly, responsive nature of Layers means your main navigation menus will convert into a mobile toggle by default when a screen size below 768px wide is detected.  This means your main menus disappear, so you need to ensure sufficient navigation is available in the mobile sidebar. The Custom Menu widget allows you to select a special mobile menu, or you can use your existing header menu.

Create a Mobile Menu

These steps are optional – you can use an existing menu in your mobile sidebar if desired

  1. Go to Appearance → Menus and click create new menu
  2. Give your menu a name and click Create Menu
  3. Add your desired links. Since this is a mobile nav, keep it as short as possible and link to main pages only and don’t create sub-menus.
  4. In the Menu Settings section below your link panels, make sure none of the boxes are checked.
  5. Click Save Menu

Setup the Sidebar

  1. Click on Layers Customize
  2. Click Edit Layout
  3. Expand the Mobile Sidebar
  4. Click Add Widget and choose the Custom Menu Widget
  5. Select your desired menu from the drop-down and click Save Changes at the top

mobile-sidebar

You may add other sidebar widgets to this panel if you wish. While the sidebar will scroll, we recommend limiting the widgets to a few small ones or whatever will fit comfortably in 480 pixels tall. Do not use Layers builder widgets in this panel.

To view the mobile version of your site, you can load your URL in an online tool such as responsinator.com.

See How to Test Mobile or Responsive Views of your Site

Show Toggle on All Screen Sizes

How to Enable Mobile Sidebar Toggle on All Screen Sizes

Layers comes with 6 Page templates to help with formatting static pages. Each are described in more detail below to give you an idea of how these might be used.

To set a Page template, create a new Page (PAGESADD NEW) or Edit an existing page (Click PAGES, then click the page title to edit)

Choose from the Template menu located in the editor’s right sidebar in the PAGE ATTRIBUTES box.

page-templates

Default Template

default

This is the standard page template in WordPress without sidebars, with a normal title. The blue box indicates where your content appears.

Blank Page

blank

This is also a basic page with no sidebars, but has the Layers page title bar and breadcrumbs. The blue box indicates where your content appears.

Blog

blog

The blog page template will automatically create a list of your most recent published posts from all categories , and use the sidebar you set in the LAYERS → CUSTOMIZE Site Settings tab. This template is used only once to create your main Blog or News page and uses the Layers page title and breadcrumbs.

Categories will have archives generated automatically by WordPress using this same layout and do not need pages created. To link to categories directly from one of your menus, add the link in the Menu manager.

Of course, you can also create a totally custom Blog or Category page by selecting the Page Builder template. From here, just Edit your Layout and use the Posts widget to display posts anyway you want. Note that builder templates do not use the standard sidebars.

Left & Right Sidebar

both-sidebars

Use this page template to create a 3 column page with both sidebars visible and your content in the middle. Widgets are set in these sidebars from APPEARANCE → WIDGETS, or LAYERS  →CUSTOMIZE  by browsing to the page and clicking Edit Layout. Make sure to link it from one of your menus first!

This template can be used as many times as you wish and uses the Layers page title and breadcrumbs.

For the pros: This template uses the span-3, span-6, span-3 column classes. Refer to the Layers Framework reference for more detail.

Left Sidebar

left-sidebar

Right Sidebar

right-sidebar

Use these templates to create a classic layout with one sidebar visible. Widgets are set in these sidebars from APPEARANCE → WIDGETS, orLAYERS  →CUSTOMIZE  by browsing to the page and clicking Edit Layout. Make sure to link this page from one of your menus first!

This template can be used as many times as you wish and uses the Layers page title and breadcrumbs.

For the pros: The Left Sidebar and Right Sidebar templates use the span-4 and span-8 column classes. Refer to the Layers Framework reference for more detail.

Layers Template

This is the main builder template for all your custom layouts. It does not support the left or right sidebars or the page title/bradcrumbs, but has one central widget area indicated by the blue box in the following screenshot. It displays the main header, followed by your widgets, and then the footer.

builder

The slider widget can easily be configured to look like the Layers page title banner. Developers may also add support for other widget areas through a child theme.

To learn more about the Layers Template, visit Build Your Page

This guide is for updating the main Layers theme.

To update plugins and extensions, see How to Update Layers Extensions.

If you have a Layers child theme, be sure to read How to Update Layers Child Themes!

When an important fix, new feature or improvement is released for Layers, you will be able to update right from the WordPress Dashboard as long as you have the Layers Updater Plugin activated. Staying on top of updates is important to maintain the stability of your theme.

Install the Updater

  1. Go to Layers → Dashboard
  2. Click the Download Layers Updater link in the right column
  3. Save the layers-updater.zip to your Desktop.
    • Note for Mac Users: Safari may attempt to unzip the file automatically! If your saved file is a folder and not a.zip. go to Safari Preferences and uncheck “Open ‘safe’ files after downloading” on the General tab, then download the file again.
  4. From the WordPress admin, go to PluginsAdd New
  5. Click on Upload Plugin 
  6. Click on Choose File in the center box and navigate to the to file, select it and click  Open
  7. Click Install Now
  8. When complete, click Activate Plugin

Check for Updates

WordPress will typically notify you of any updates available, but you can check yourself under Dashboard → Updates

update

If an update for Layers is available, it will appear under the “Themes” section.

You may view detailed notes about what changed in the update from the update link on the Layers Dashboard. For developers, view the commits over on GitHub.

Apply the Update (Single)

  1. Check the box to the left of the Layers thumbnail
  2. Click the Update Themes button

WordPress Multi-Site

To update Layers on a multi-site install, Network Admins can go to My Sites → Network AdminThemes

Apply the Update (Multi-site)

Click Update Now in the New Version notice in the Layers row

Manual Update

If you need to update manually, you may download the latest version from our Download link, then upload it via FTP

  1. Download the updated theme zip from http://layerswp.com
  2. Unzip it to your Desktop
  3. Connect to your site via FTP
  4. Upload the layerswp folder to wp-content/themes/ and confirm overwrite of all existing files

Make sure you upload the whole thing and do not partially update! This can lead to unexpected results and potentially break your site.

If you are using a Layers Child theme, you may also need to update it separately. The safest method is to update the child theme using the above manual FTP method. If you created the child theme yourself or downloaded it from a 3rd Party, you will need to check with the theme author for their update process. See How to Update Layers Child Themes for specific instructions.

If you have modified Layers, updating will overwrite any changes. The main theme should never be modified directly, but use a child theme instead. Visit our Theming section for help and advice on how to get started with child themes. If your changes were CSS only, transfer just your additions and changes to the CSS box under LayersCustomize

Last Updated: