How the Layout Works in Cornerstone and Pro Content Builder
Cornerstone and Pro Content Builder have two main parts in the view.
- Options Panel: Options panel sit at the left-hand side of the screen and contains the necessary controls to fine-tune the page. The options panel contains three tabs:
- Layout: Layout tab contains all the necessary controls to create the layout of the page which we will discuss further in this article.
- Elements: Elements tab contains all the elements list that you can add into the page.
- Inspector: Inspector tab shows the options of selected layout control or element to fine-tune the layout or element.
- Preview Panel: Preview panel is used to show the front end of the website inside the builder and reflects the changes that you make in the options panel.
There are three controls that you can use to create layouts in the layout tab of the Cornerstone and Pro Content Builder:
- Sections: Sections are the main building blocks of the layout, and they can contain one or more rows. Sections give you options to add background and other properties as the container of rows. You can drag and drop the sections in the layout tab to change the order of sections on the page.
- Rows: Rows are the second layout part of the page that sits inside the sections. You can use the row settings to select how many columns the row has and add common settings such as margins and paddings.
To add a section, click the Layout tab in Options Panel and click the Add a section to get started item.
If you already have a section in the Layout tab, you can click the Add section link below or above the current section. To be able to change the settings of a section, click the magnifying glass icon of the section and you will be redirected to the Inspector tab, and the section options will show:
Clicking the magnifying glass icon of the section will show you the section details where you can see and reorder the rows within the section:
Use this control group to set up the section initially.
- Font Size: Font Size in the context of background is used to have a basis sizing that other aspects of the background can rely upon. For example, if we set
14px, this will be the basis of the other aspects such as the background border radius if you use
emunit on that option.
- Z-Index: This option value determines the z-index of the background. It is used in a case that you have more than one layers of the background, and you want to have control over which layer comes over the other.
- Text Align: Use this option to set the alignment of the whole section content. Available options are: Left Center Right Justify
- Background: This option is a color picker to set a solid color for the background.
The section allows two layers of backgrounds. You have a separate control group for each layer to be able to add a proper background, and you can decide each layer to have a solid color, image, or video background.
To set the type of background use the Type Chooser control.
Solid Color Background
To have a solid background click the eye dropper icon. The solid color background has the Color control to set the proper color.
To have an image background click the image icon. The image background has the control group containing the options below:
- Image: Click the plus icon to show the standard WordPress Media Dialog to choose an image as the background.
- Repeat: You can choose how you want the background image repeated on the background. Available options are:
- None: The background image will not be repeated.
- X Axis: The background image will be repeated horizontally.
- Y Axis: The background image will be repeated vertically.
- Both: The background image will be repeated both horizontally and vertically.
- Size: You can set the size of the background image. This option will set the
background-sizeCSS property. Click here for further reading.
- Position: You can set the position of the background image. This option will set the
background-positionCSS property. Click here for further reading.
To have a video background click the video icon. The video background has the control group containing the options below:
- Video Source: Use this option to add the URL of the background video. If the video is in an external source, paste the external URL. If you want to self host the video file you need to go to WordPress Dashboard > Media > Add New and upload the video. Then, click the video to see the properties of the video at the right-hand side where the URL of the video shows that you can copy and paste it to this option.
- Poster Image: Use this option to select an image as the poster image of the video background. This option is used to load an alternative image on mobile devices as the video background feature is not available for mobile devices.
The Parallax effect is where the background image scrolls with a different speed than the browser scroll speed, and it makes an aesthetic effect. To enable the Parallax feature, go to the Background Parallax control group and check the enable checkbox for the background layer that you want to have the feature. The Parallax feature has the options below:
- Lower/Upper Layer Size: The layer size determines the size of the background in percentage. The larger percentage value is the parallax effect will be more prominent.
- Lower/Upper Layer Direction: Use this option to set the parallax effect to show vertically, horizontally or in reverse order. If you enable the reverse order, scrolling down will cause the scroll up Parallax effect.
Background Border Radius
Use this option to set a border radius for the section. You can set the curve on all sides or set them individually.
Section Top/Bottom Separator
It is possible to separate the sections of a page with angled or curved effect. You have the option to set a separator for the top or bottom of the section. Available options are:
- Enable: Use this option to enable or disable the separator
- Type: Use this option to select the type of separator. Available options are:
- Angle In: This option shows an angled line separator between the sections.
- Angle Out: This option is like the Angle In option but in reverse.
- Curved In: This option shows a curved line separator between the sections.
- Curved Out: This option is like the Curved In option but in reverse.
- Angle Point: This option is to set the steepness of the angle. It will show only if you select one of the angle separator types.
- Height & Inset: Use this option to set the height and inset value of the separator.
- Color: Use this option to set the color of the separator
The separator feature works if you have a solid color background and it is not suitable for image or video background types.
Use this option to set the margin of the section. You can change the settings for all the sides of the section or modify them individually.
Use this option to set the padding of the section. You can change the settings for all the sides of the section or modify them individually.
Use this option to set the border of the section. You can set the style, width and color of the border on all sides or each side individually.
- X-Offset - Use this option to set the X offset of the shadow in the section.
- Y-Offset - Use this option to set the Y offset of the shadow in the section.
- Blur - Use this option to set the intensity of the blur effect in the section.
- Spread & Position - Use this option to set the spread amount of the section shadow and decide if you want the shadow to sit inside or outside of the section.
- Color - Use this option to set the color of the section shadow.
To add a row into a section, go to the Layout tab and click the plus (+) icon of the section that you want to add a row. There you can add one or more rows, and by dragging the row, you can set the order of it.
Click here for more information about the Rows and how to set the number of columns in a row.
Alternatively, you can choose to add a Grid instead of a row in a section. The Gird element uses the CSS Grid spec to give you a powerful tool to create awesome layouts.
To add a Grid to a section hold the Control (Windows) or Command (Mac) key and click the plus (+) icon of a section to be able to choose if you want to add a Grid or Row.
Click here for more information about Grid and how you can use it to create awesome layouts.
We discussed how the layout works in Cornerstone and Pro Content Builder. We talked about Sections, Rows, and Grids and delved into options of each layout option.
See something inaccurate? Let us know