The Layouts plugin allows you to customize the content of any post or a page using a drag-and-drop editor. Such a customized layout is called a “content layout.” The Layouts plugin can be used similarly to any page builder when building a content layout.

The following two videos show a quick overview of designing contents of specific pages.

Theme integrated with Toolset Theme not integrated with Toolset
Watch the video Watch the video

You should design pages with Layouts when you want them to have a unique look, rather than a simple block of text, which you can write using the standard WordPress Visual Editor. Content layouts render with a flexible and responsive grid that appear appealing on any screen size.

“Contact” page as viewed on a desktop “Contact” page as viewed on a mobile device
 Example of a content layout for a "Contact" page  Example of a content layout for a "Contact" page - viewed on a mobile device

Creating content layouts

To create a content layout for any page or a post, edit it and click the Content Layout Editor button.

Button for creating a Content layout in a page editor
Button for creating a Content layout in a page editor

All content present on the page will automatically be added to the newly created Content layout and placed inside a Visual Editor cell.

Content layout editing page when you begin
Content layout editing page when you begin

Editing a content layout

The editing process for a Content layout is similar to that for all other types of layouts.

Note that changes you make to the layout are not saved until you click the Update button. Further, clicking this button closes the layout editor and returns you to the post-editing screen. To view changes before applying them, use the Preview button.

In general, a layout is built by adding any number of cells to it. You can use rows to arrange the cells. To arrange cells in more elaborate grids, you may use the cell called Grid of cells. Read more about basic layout editing in the Layouts getting started guide.

Deleting a content layout

You can always stop using a content layout for any post or a page.

To do this, click the Stop using Content Layout Editor button on the post-editing page. A dialog box will appear offering two options:

  • Revert to the post contents that were there before you added a content layout.
  • Replace the content layout you created with a usual post contents. Please note that this will wrap the content with Bootstrap-specific HTML tags, to make sure the rendering stays the same.

Dialog box to select what to do with the content when no longer using a content layout
Dialog box to select what to do with the content when no longer using a content layout

How content layouts render

Content layouts are used to design only “the content” (the main area) of a page. How the rest of the page (footer, header) appears, depends on whether your theme is integrated with Layouts or not.

Theme not integrated with Layouts
The header, sidebar, and footer are part of the theme. The page content is retrieved from Layouts.
Theme integrated with Layouts
The header, sidebar, and footer are adopted from the template layout, which is assigned to the specific content type. The page content is acquired from the content layout.
Example of a content layout rendered with a theme not integrated with Layouts Example of a content layout rendered with a theme integrated with Layouts