This article was last updated on the April 25, 2018.
Upon activating Cornerstone for the first time, you’ll want to make sure you do some basic setup to integrate with your theme. There are two main locations that you’ll want to do this in. First, you’ll need to specify your global plugin settings in the WordPress admin panel. Secondly, you’ll want to specify your various design options afforded by the plugin in the Customizer.
Admin Settings Panel
The first stop we’ll make along the way is the Cornerstone settings page, located in the WordPress menu under Cornerstone > Settings. Once you’re there, you’ll want to specify a few different global settings for your plugin and how you want it to work in your installation:
1) Allowed Post Types – for this particular setting, you’ll want to specify which post types to enable Cornerstone on. For example, you may want to utilize it on your pages to build them out as you desire, but you might not plan on utilizing it in your blog posts. In this instance, you can simply select Page and leave Post unchecked, which will remove the Edit with Cornerstone button from your editing page in WordPress. If you have any additional post types available in your installation, you should see them here as well (for instance Product if you’re running WooCommerce). Keep in mind that the content area output for different post types might only be a small section on a page. For example, with WooCommerce, there is a lot of additional generated content on a product page along with the content from the WordPress editor (thumbnails, tabs for product information, generated featured products, et cetera). Cornerstone does not allow these types of features to be altered as these will be handled by the plugin/theme you’re utilizing, or may even need to tap into them using a child theme for greater control. Cornerstone itself is a page builder specific to the content area of the WordPress editor.
2) Content Roles – you may wish to keep Cornerstone available to users with certain permissions. If that is the case, you can do that here by selecting that particular user role. This is great especially if you run a large website with many different content creators. Building off of our previous example, you may wish to have Cornerstone only active on pages and for Administrators, but leave it hidden not only from posts but also from Authors, so none of your contributors can utilize it if desired.
3) Show WordPress Toolbar – while working in the application, you may opt to display the WordPress toolbar if you enable this option.
4) Fun Mode – turns on creative save messages if enabled.
5) Help Text – shows helpful inline messaging throughout the tool to describe various features if enabled.
6) Show Legacy Shortcode Generator – the old shortcode generator button which was available in the standard editor of the WordPress is hidden in now as it will not work with the new V2 element. Enable this option if you insist on using the shortcode generator (Not recommended).
7) Content Builder Elements – you can use this option to decide whether to show only Classic Elements or only the V2 Elements or both in the Cornerstone.
8) Custom Path – use this option to change the path used to load the main interface.
9) Hide Access Path – logged out users trying to access the interface will see a 404 instead of a login prompt if this option is enabled.
10) Clear Style Cache – for quicker page loads V2 Elements will remember the CSS generated when they were last saved. This is automatically cleared when Cornerstone is updated. It may be useful to clear manually if any V2 Elements are missing styling.
11) Product Validation – product validation registers your product with us in the member center and allows us to keep things current with automatic updates and various other features. It isn’t required but is strongly recommended to unlock these various features and for other benefits.
Customizer Design Options
Next, you’ll want to go to the Customizer in the WordPress admin panel (Appearance > Customize) and specify your design options for the plugin. These options will be organized differently depending on how you’re utilizing Cornerstone.
Design Options in X
If you are utilizing X, the options mentioned above are specified in other areas of the Theme Options (X > Theme Options) as they are more thoroughly integrated into the theme (the one exception being Base Margin, as this is set automatically for each Stack in X). Container Width and Container Max Width can be found in Layout and Design, link colors can be found under Typography, and button settings can be found under Buttons. If you were using Cornerstone previously but have switched to X (or vice versa), you will want to make sure that your settings are implemented appropriately as these are two separate sets of options, so they will need to be matched manually in the event of a change.
Design Options in Other Themes
If you are not utilizing X, you will find three sections added to the Customizer that give you options to specify various overarching styles for your shortcodes:
Layout – the “Cornerstone – Layout” section has a few options to specify dimensions for various elements on your site. Base Margin is used to determine how much spacing should be between elements. You’ll want to make sure this is matched to your site, and a good way to typically do this is to figure out how much spacing is applied to the bottom of your paragraphs on your website, and then use that unit of measurement here. The Container Width and Container Max Width settings are used for any of the containers used in your sections on the page when activated. This is used to keep your columns contained from the edges of your site.
Typography – here you will want to match these colors to the same colors used for your links on your website. These will then be used throughout our shortcodes for various elements to create a cohesive look that fits in with your website’s color palette when needed.
Buttons – here you can specify your global default button styles used for our shortcodes. You can tap into the various styling options and colors to find the perfect fit that matches your theme.