Page Builder Overview

In this article, we're going to discuss Cornerstone's Page Builder and how it can be used to craft beautiful content for your site.

  1. Getting Started
  2. Designing Your First Page
  3. Videos
  4. Summary

The Page Builder (sometimes referred to as the Content Builder) is a powerful tool that opens up a wide range of possibilities for developers and designers. It can be used to craft the primary output for any singular endpoint in your WordPress installationthink pages, posts, products, portfolio items, et cetera.

What you create with the Page Builder will be output to the_content, a WordPress specific hook for outputting, wellcontent. Depending on the layout template used for the single Page or Post you are working on, the_content might be output in a different spot than you expect. For example, with WooCommerce it is often output in the Description tab found in many default templates. Keep this in mind when working on post types other than your typical Posts or Pages.

While the Page Builder can be used to create singular assets for all post types, this article will focus on the workflow of Pages specifically.

Getting Started

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

Page Builder

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

Page Builder

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

Page Builder

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

Page Builder

Designing Your First Page

Once you have entered the page you wish to work on, if it is completely empty (i.e. does not have any Sections) you will see the following How would you like to start? area in the live preview:

Page Builder

You will notice from the screenshot above that we are using the Default Template set by our Theme Options, which can sometimes be a page with a widgetized sidebar. If you wish to adjust the overall template used for the page you are working on, you can click over to the Settings pane and adjust it there. Most often, users tend to prefer using the No Container options so that their content can span the fullwidth of any device viewing it:

Page Builder

If a No Container option is selected, you will notice that the content now spans the entire width of your live preview:

Page Builder

To begin working on your page, you can either select Add Section over in the Wordspace, or From Scratch in the live preview. Either of these options will simply add a new Section to your Page for you to begin working with. For a bit of a headstart, select Use Template, which will reveal the following modal:

Page Builder

By default, the modal will begin on the Starter Templates tab, which is a collection of simple, minmally designed assets that showcase common patterns in web design. If you're looking for something a bit more opinionated, moving to the Design Cloud tab will allow you to choose from more fully realized design ideas that serve as excellent jumping off points for your own designs:

Page Builder

For example, if you selected Caffeine Collage, after a brief installation process you would see the following fully designed asset on your page:

Page Builder

The great thing about these ready-made assets is that much of the heavy lifting has already been done for you. Colors, images, layouts, and more have all been set by one of our designers, and all you need to do is plug in your own images and copy and you're off and running!

Finally, you can choose the My Templates tab, which would be your own personal collection of templates that you have saved over time as you work on your sites. Beyond that, you can select the Clone Existing option back on the page, which essentially allows you to clone over any other pages you've already created to use as a starting point for a new page.

Videos

We have numerous videos that we've made about different facets of the page building experience in Cornerstone that you can view on our YouTube channel. If you have some time, we highly encourage all users to look through that library to learn more about building with Cornerstone.

Summary

We've covered an introduction to the Page Builder, how to design pages, 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