The Layouts Editor introduced in Step 3 for designing templates can also be used to design individual pages and posts.

That means you add content using cells to a 12-column Bootstrap grid organised in rows, with different kinds of cells for different kinds of content.

Unlike the standard WordPress editor, this gives you complete control of what appears where, and the responsive grid means the content will adapt as needed to different screen sizes.

Creating a Content Layout

Edit any page or post and click the Content Layout Editor button to edit it with Layouts.

Any existing content will automatically be added to the newly created Content Layout and placed inside a Visual Editor cell in the first row.

Design the page by adding cells to rows, and Preview your changes at any time.

Update will save the changes to your Content Layout and return you to the page or post edit screen.

Deleting a Content Layout

If you want to stop using Layouts to edit a page or post and revert to the WordPress editor, click the Stop using Content Layout Editor button on the post edit screen.

A dialog box presents two options.

  • Revert to a snapshot of the post before you started editing it with Layouts
  • Keep the design created with Layouts, which will add required markup to the editor so that the page renders the same

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

Watch the video for a demonstration of using the Content Layout Editor to design a single page.

Learn by doing

We’ll use the Layouts Editor to add a simple contact page to our training site with different locations displayed in 3 columns (which neatly stack on smaller screens).

Here’s what we will make.

Screenshot of training site contact page

And here’s the Content Layout that generates it.

Screenshot of Content Layout for the contact page

Design the Contact page with Layouts

  1. Edit the currently empty page Contact Us
  2. Use the Content Layout Editor button to open the Layouts Editor.
  3. You’ll see the familiar Layouts Editor screen with an empty row waiting to have cells added.

  4. Add a 3-column-wide Visual Editor cell starting in column 3 with the text “You’re global” inside H2 tags with a class “text-center”.
  5. Add a 2 column wide Image cell next to this and select the globe logo from the Media Library as the source. Choose Center alignment and a size of Thumbnail.
  6. Add another Visual Editor cell like the first but with the text “We’re global”.
  7. Click the + button to insert a new row.
  8. Add three 4-column Visual Editor cells to the row, each with text for an office address, somewhat like this:
  9. Screenshot of Visual Editor cell with London office contact details

  10. Preview the page design before you Save it.

If you check the Toolset > Layouts CSS & JS page you will note we added a couple of CSS style rules to improve the appearance of this page.

The content of this page was static text and images. Next we’ll looking at adding dynamic content to a page with Views lists.

Need help?

Go to the Getting Started support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.

If you find this guide useful or have suggestions on how to improve it please add a comment to the support page

What’s next?

Step 6 Create and display custom lists of content