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 installation—think 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, well…content. 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.
To begin working with the Page Builder, click on the main menu and select the Content menu item:
Once selected, you will see the following submenu if you have not already created a Page for your site:
To begin, click on the + icon in the upper-right corner of the submenu, which will reveal the following form:
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:
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:
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:
If a “No Container” option is selected, you will notice that the content now spans the entire width of your live preview:
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:
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:
For example, if you selected “Caffeine Collage,” after a brief installation process you would see the following fully designed asset on your page:
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.
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.
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