Layout Builder Overview

In this article, we're going to discuss Cornerstone's Layout Builder and how it can be used to open up incredible design possibilities on your site.

  1. Getting Started
  2. Going Further
  3. Videos
  4. Summary

The Layout Builder is a powerful tool that opens up a wide range of possibilities for developers and designers. Layouts in Cornerstone's page-building parlance refers to any asset that requires an assignment to be output globally or to a specific context for it to be viewable on the frontend of your site. This includes:

These layouts are designed once, and then repeated across the context in which they are assigned.

Take your site's blog for examplesay you're viewing the blog index and you click on a post to view its content. Clicking on that index entry takes you to your theme's single post template, which is an overall design repeated for all posts that specifies the physical locations where certain dynamic, database driven information should be output (e.g. title, publication date, main content, et cetera).

Getting Started

To begin working with the Layout Builder, click on the main menu and select the Layout Builder menu item:

Layout Builder

Once selected, you will see the following submenu if you have not already created a layout for your site:

Layout Builder

To begin, click on the + icon in the upper-right corner of the submenu, which will reveal the following form:

Layout Builder

This form is where you will create all new layouts for your site. You will need to choose between a Single or Archive page layout here. Single should be selected when designing the layout for a singular item, such as a page, post, or product. Archive should be selected when designing the layout for an index of singular items, such as a blog or shop:

Layout Builder

Upon clicking Create Layout, you will be taken back to the main Layout Builder submenu, which will now feature an index of all layouts you have created. To begin editing a layout, click the Edit button:

Layout Builder

Going Further

To learn more about the process for getting up and running in each part of the Layout Builder, check out these resources:

Videos

We've put together step-by-step tutorials on using Archive Templates, Single Templates, Headers, and Footers within the Layout Builder, so we definitely recommend checking those out! We also routinely add new videos to our YouTube Channel so be sure to subscribe to get the latest.

Summary

We've covered an introduction to the Layout Builder, how to design and assign layouts, in addition to video tutorials so you can see it in person. We hope you enjoy this powerful addition to Cornerstone!

See something inaccurate? Let us know