Page Layout Builder & Background Styles

The base of a great page is the layout.  On this page you will learn how to use the page layout builder and how to apply styles and background images to boxes and sections.

On every page, while in edit mode, you will find the Page Manager.  To the right are two buttons (seen circled above).  The first button launches the layout builder.  The second button launches the background styles builder. 

Layout Builder

Body Class

By default, when this is empty, a page will have five boxes with 10 sections per box.  

Layout Builder Tool

After selecting the page layout button in the page manager, it will launch the layout builder.  

1. Starting on the right panel, we see the layout preview.  This shows what our current layout is.  If your body class is empty, then you will see the current layout of five boxes and 10 sections per box.
2. The center panel is what you are currently building.
3. The left panel is where you select a box number, then use the layout blocks below to create your layout.

1. Begin by selecting a box (or multiple boxes if you want the same layout for multiple boxes) in the page layout settings.  Then select any of the layout components.
2. In the current layout build, you will see what you selected as you work on it.  The arrows on each layout block added can be used to reorder them.  You can also click on the trashcan icon to remove one.  Once you have the box layout the way you want, click the Generate Body CSS for Selected Section button.
   1. You can also select boxes in the page layout settings and select the Hide Sections button for any boxes you may not need to use. 
3. This will then update the layout preview.  Repeat these steps for any/all boxes you want to create a layout for.  
4. When you are done with your layout, copy the Body CSS and close the layout builder.

Place the body CSS you just copied into the Body Class section on your page to use your layout.  All layout CSS classes are reusable.  If you have a layout you like on one page, you can copy that same code to another.

There are additional features found in the layout builder.  Watch the video tutorial for more.

Background Styles

The background styles panel is the place where you can add CSS styles for background stock photos