As well as designing templates with Layouts, you can also use its drag-and-drop editor on individual posts and pages. Layouts have rows and rows have cells. With Layouts, you can design nested grids that achieve any design you want.

Watch the video

You can use the standard WordPress Visual Editor for simple designs such as blocks of text and inline images, but Layouts allows you to place your content where you want it to create more complex designs. 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 existing content 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 on the page about Creating templates for displaying post types.

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. The header, sidebar, and footer are part of the theme. Layouts designs the “interior” part of the page.

Example of a content layout rendered inside the TwentySeventeen theme