This theme’s Page Builder is its most unique and powerful feature. It allows users without web development knowledge to build more complex layouts and mobile-friendly webpages.
The Page Builder is the framework that allows you to pull in different Content Types and reusable Widgets, and display them in a grid of rows and columns. When you add a new row, you’ll have the option of using the whole row for your content or dividing it into halves or thirds. On a mobile device, the halves and thirds will stack in single file (from left to right) to make them more easily readable.
To begin building your new page, you’ll need to add your first row by clicking Add Row in the Content Builder on your new page.
You’ll then see a list of options for this row with help text.
New Row Select Layout – This is where you’ll choose how many columns (blocks) will be in your current row.
New Row Highlight – Enabling this feature will add a gray background to this whole row for emphasis.
Equalize Box Heights – Choosing “Equalize Heights” will make multiple Box Highlights (explained below) on the same row all the same height regardless of the height of the content within the box. This is an aesthetic option for a cleaner design.
Content Type – This is where you’ll choose to add Content or a Widget, and it will change the options in the next block. You’ll see that it says “Block 1.” The numbered blocks allow you to keep up with which block you’re editing if you’ve chosen “Two Even Blocks,” “Three Even Blocks,” etc., from the Row Select Layout option.
Content Select/Widget – This dropdown will list the available Content Types in the theme or will populate the Widgets you have built if you chose “Widgets” in the option above. (Default is “Blank,” which allows you to leave a block in a row blank if you choose, but leaving a whole row blank will create an error on the page.)
Box Highlight – Enabling this option will allow you to add a gray box around just this block for emphasis.
Here is the Content Builder layout for this page for reference:
You can continue to add as many rows as you need for more complex layouts, but keep in mind that each row’s content cannot fill the blank space of the row above or below it. Also, if you have a long block and short block, you can’t (yet) add an additional block below the short block to fill space (but we do have a Sidebar Template). Each row’s content must end before the next row’s content begins (think of an excel spreadsheet).
Organizing your rows
You can add new rows between rows and delete individual rows by hovering over the Page Builder. This will reveal Plus signs between rows and Minus signs in the center of rows that you can click.
Another helpful feature is that you can close rows for easy scanning by clicking on the blue left arrow that shows on hover; clicking again opens them back up.
You can also reorder rows by clicking, holding and dragging the left side near the numbers. Closing the rows first is very helpful in this process.
Once your content editing is complete, you’ll need to click Publish or Save Draft in the right WordPress menu. If you are making a change to already published content, then click Update in the right WordPress menu and your changes will appear live on the page.
Full Width Text
You will notice that if you choose to format your row as a “Single” and add a “Body Text” Content Type, the text will not fill the full width of the content area. This is because text blocks that are over a 1,000px wide cause fatigue when reading, so we have limited text blocks to a 2/3 width. Blocks are centered by default. If you prefer that they align to the left side, then you can choose a “Left Two-Thirds Right One-Third” layout and add a “Blank” or “Box-Width Image” Content Type to the Right One-Third.