Spring Sale: Our new update is live! Save 30% on Pro and Pro Unlimited for a limited time.

Builders 101

In this article, we're going to look at the different builders available in X and Pro and what you need to know about them.

  1. What Are the Builders Used For?
  2. Builder Types
  3. How to Access Global Settings
  4. Colors
  5. Fonts
  6. Templates
  7. Global Blocks
  8. Video Tutorial
  9. Summary

What Are the Builders Used For?

One of the main features of X and Pro is the ability to create different parts of the website using the builders without the need to have any coding knowledge. The builders are the tools to create the pages of the website using a drag and drop editor which consists of different elements.

Builder Types

There are four kinds of builders are available which vary depending on which theme you use:

  • Page Builder: This builder is used to create the main content of pages throughout your site. X has the Cornerstone Page Builder (separate plugin) and Pro has the Content Builder (built into the theme). Go to WordPress Dashboard X Cornerstone or WordPress Dashboard Pro Content to access the Content Builder.
  • Layout Builder: (Pro only) This builder is used to create the layouts of the website (overall templates assigned to various contexts like blog posts, single page, archives, et cetera). Go to WordPress Dashboard Pro Layouts to access the layout builder.
  • Header Builder: (Pro only) This builder is used to create the header of the website. Go to WordPress Dashboard Pro Headers to access the header builder.
  • Footer Builder: (Pro only) This builder is used to create the footer of the website. Go to WordPress Dashboard Pro Footers to access the footer builder.

How to Access Global Settings

To access the settings of the builders in both X and Pro go to WordPress X / Pro Settings. The settings available are as follows:

  • Custom Path: Use this option to set the URL path parent portion when accessing the builder interface. The default path is x in the Cornerstone in the X theme and the default path for the Content Builder of the Pro theme is pro.
  • Hide Access Path: If enabled, the logged out visitors will encounter the 404 not found page instead of being redirected to the login screen.
  • Show Legacy Shortcode Generator: The legacy shortcode generator is the old way of adding the shortcodes using the standard WordPress editor by adding a new button to the editor. This method is deprecated and the new set of the elements are not using the shortcodes and this method will not work for them.
  • Permissions: The permissions section is a dedicated set of controls which allows you to hide or show the Cornerstone or Content Builder for different user roles and post types. Click here for more detailed information about this feature.
  • System - Clear Style Cache: For quicker page load time, Elements of the builders will remember the CSS generated when they were last saved. This is automatically cleared when Cornerstone or Content Builder is updated. It may be useful to clear manually if any Elements are missing styling.

Colors

You can use the Color Manager in X and Pro to set unlimited colors which you will be able to use throughout the builders on the website. To access the Color Manager:

  1. Go to X / Pro in the WordPress admin and launch the app interface by selecting any Builder (Content, Headers, Footers, et cetera). Alternately, launch a Builder using the WordPress admin bar on the frontend of your site.
  2. Click the navigation icon () in the toolbar.
  3. Select Colors in the main Navigation dropdown.

There you can add new colors or edit the existing colors and save them to use later throughout the website builders. Click here for more information about the Color Manager.

Fonts

You can use the Font Manager in X and Pro to set unlimited fonts which you will be able to use throughout the builders on the website. To access the Font Manager:

  1. Go to X / Pro in the WordPress admin and launch the app interface by selecting any Builder (Content, Headers, Footers, et cetera). Alternately, launch a Builder using the WordPress admin bar on the frontend of your site.
  2. Click the navigation icon () in the toolbar.
  3. Select Fonts in the main Navigation dropdown.

There you can add new fonts and save them for later use throughout the website builders or the Theme Options. Click here for more information about the Font Manager which will allow you to use System Fonts, Google Fonts, Adobe Fonts, and Custom Fonts.

Templates

The Templates are the ultimate solution to reuse already created content using the builders. You can access the Template Manager by going to WordPress Dashboard X / Pro Templates. There you will have a list of already created content, header and footer template.

Click here for more information about the templates and how you can create one.

Global Blocks

The Global Blocks are used to have a one place control over the content that you create. You can add a Global Block which will use the same graphical user interface of the builder, and then you can use that Global Blocks throughout the website using the Global Block Element or the generated shortcode. Whenever it comes the time to edit or change the block, you can do the change from one place and the change will be broadcast to all the instances that you use on the website.

Go to WordPress Dashboard X / Pro Global Blocks to access the Global Blocks controls. Click here for more in-depth break down of the Global Blocks feature.

Video Tutorial

Take a guided tour of the complete builder interface on our YouTube channel.

Summary

We've discussed the global settings available in X and Pro which have a sitewide effect. We have also learned about the Settings, Color Manager, Font Manager, Template Manager, and Global Blocks.

See something inaccurate? Let us know