Single Templates

In this article, we're going to introduce you to Cornerstone's Single Layout Builder and walk you through its various functions.

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

The Single Layout Builder provides users with a similar building interface to that of the Page Builder, allowing designers to take advantage of a drag and drop interface for crafting custom assets.

One primary difference here is that you are designing a repeating page template that will take advantage of database-driven Elements.

On top of that, you can assign your Single Layouts that you have created to different pages or posts on your website, as you can with the Archive Layouts and the Archive Layout Builder, allowing you to create complex site layouts that respond to the contextual needs of a particular area of your site.

Getting Started

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

Single Templates

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

Single Templates

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

Single Templates

This form is where you will create all new assets for your site. Upon clicking Create Layout, you will be taken back to the main Layout Builder submenu, which will now feature an index of all assets you have created. To begin editing your asset, click the Edit button:

Single Templates

Designing Your First Single Template

Once you have entered the asset you wish to work on, if it is completely empty (i.e. does not have any Sections) you will see the following group of selection to start from in the live preview:

Single Templates

Clicking on From Scratch will simply add your first Section to the design, just like clicking anywhere in the Outline pane of an empty design. Clone Exiting will allow you to copy over an existing asset if you did not already start from a saved template in the submenu above. Finally, selecing Use Template will bring up the following modal:

Single Templates

This is meant to give you a handful of quick start options to get you going with a new asset and help connect some of the dots in the building process. Let's say we start with the first Boxed Landmark 1 option at the top of the image above. Doing so would output something like the following in your install:

Single Templates

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 Page Builder. 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 Page 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 Single Template

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

Single Templates

Clicking on that control will reveal the following popup:

Single Templates

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:

Single Templates

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

Single Templates

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 Single Layout Builder, how to design and assign assets, in addition to video tutorials you can explore for more concepts. We hope you enjoy these powerful additions to Cornerstone!

See something inaccurate? Let us know