Creating Layouts

In this article, we're going to discuss the layouts of Cornerstone and Pro Content Builder. We're going to discuss how to add sections, rows, and columns in Cornerstone and Pro Content Builder and then we're going to brush through its settings.

  1. How the Layout Works in Cornerstone and Pro Content Builder
  2. Sections
  3. Rows
  4. Grid
  5. Summary

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.
Creating Layouts Options Panels

Layout Tab

There are three controls that you can use to create layouts in the layout tab of the Cornerstone and Pro Content Builder:

Creating Layouts Options Layout Tab
  • 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.

Sections

To add a section, click the Layout tab in Options Panel and click the Add a section to get started item.

Creating Layouts Add Section 1

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:

Creating Layouts Inspector

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:

Creating Layouts Section Rows List

Section Setup

Use this control group to set up the section initially.

Creating Layouts Setup
  • 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 em unit 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.

Background Layers

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.

Creating Layouts Solid Background

Image Background

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-size CSS property. Click here for further reading.
  • Position: You can set the position of the background image. This option will set the background-position CSS property. Click here for further reading.
Creating Layouts Image Background

Video Background

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.
Creating Layouts Video Background

Background Parallax

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.
Creating Layouts Background Parallax

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.

Creating Layouts Background Border Radius

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
Creating Layouts Section Separator

The separator feature works if you have a solid color background and it is not suitable for image or video background types.

Margin

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.

Creating Layouts Section Margin

Padding

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.

Creating Layouts Section Padding

Border

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.

Creating Layouts Section Border

Box Shadow

  • 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.
Creating Layouts Section Box Shadow

Rows

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.

Creating Layouts Row

Click here for more information about the Rows and how to set the number of columns in a row.

Grid

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.

Creating Layouts Add Row or Grid

Click here for more information about Grid and how you can use it to create awesome layouts.

Summary

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