Layout Builder Overview

In this article, we're going to introduce the Pro theme Layout Builder to you and how it can be used to open up incredible design possibilities on your site.

  1. Getting Started
  2. Designing Your First Layout
  3. Assigning Your First Layout
  4. Videos
  5. Summary

Pro's Layout Builder is a powerful tool that opens up a wide range of possibilities for developers and designers. You can think of the Layout Builder as an interstitial layer between base level Theme Options and the building of individual pages or posts in the Content Builder.

Take your site's blog for example: say that 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). The Layout Builder allows you to create this repeatable page template for various aspects of your WordPress environmentthink blog posts, individual pages, WooCommerce products, taxonomy archives, and more.

Getting Started

To begin working with the Layout Builder, click on the main menu and select the Layouts 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

Designing Your First Layout

Once you have entered the layout you wish to work on, if it is completely empty (i.e. does not have any Sections) you will see the following Choose a Layout selection in the live preview:

Layout Builder

Much like our Row or Grid Elements, this preset selection is meant to give you a handful of quick start options to get you going with a new layout and help connect some of the dots in the layout building process. Let's say we start with the first Boxed (Overlap) option all the way to the right in the image above. Doing so would output something like the following in your install:

Layout Builder

I say something like the following because this template is populated with Dynamic Content tags, which will pull through the content available in your installation to the appropriate sections. For example, where the screenshot above shows Example Page Title, that will be replaced with the title of any post in your installation that you are currently previewing as it is pre-populated with the {{dc:post:title}} Dynamic Content tag. The lorem ipsum text above will be replaced with your own content as it uses our The Content Element to pull through the_content() from WordPress.

What is important to keep in mind here is that what you see in the above screenshot is composed with Elements you already know from the Content and Header / Footer Builders. If you wanted to change the look of that layout you could simply alter the styling of the Sections and their child Elements, or delete them altogether and start from scratch. The crucial part of the whole process it that you make sure to plug in the appropriate Dynamic Content tags where applicable so that when you switch to the Content Builder you will have an outlet for that markup.

At this point, hopefully you're starting to connect some of the dots for the huge role that the Layout Builder serves in the site building process. Having full control over the base layout and design for a specific singular or archival template opens up many functional and design possibilities.

Assigning Your First Layout

Now that we've created our layout, all that we have left to do is assign the layout to the appropriate context on your site. To do this, click on the Settings tab in the workspace and find the Assignments Conditions control:

Layout Builder

Clicking on that control will reveal the following popup:

Layout Builder

To get started, click Add Condition Group to specify a context in which you would like your layout to be used. For example, if you wanted your layout to show up for all posts on your site, you would select Post Type in the first dropdown, set the middle toggle to is, then select Post on the final dropdown:

Layout Builder

If you designed your template to show up on either posts or pages, you could include an or statement like so:

Layout Builder

The Assignment Control is incredibly powerful and there are many ways you can leverage it to accomplish unique outcomes on your site. To learn more about this control, check out our Assignment Control article.

Videos

We've put together step-by-step tutorials on using Archive Templates and Single Templates 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 our family of website builders!

See something inaccurate? Let us know