Page Building & Layers Widgets

Layers User Guide  Since: 1.0 Last Updated: Layers ver. 1.5 Time to Read: 5 minutes

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.

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

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.

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!

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!

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

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.

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.

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

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

 

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

 

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 Widgets

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