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.
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|
Creating content layouts
To create a content layout for any page or a post, edit it and click the Content Layout Editor button.
All existing content will automatically be added to the newly created Content layout and placed inside a Visual Editor cell.
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.
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.