The homepages of Sherman, Hale 2015 and Prudence 2018 are configured primarily in the Page Builder. On the homepage, click ‘Edit Page’. If you see the ‘Visual’, ‘Text’, and ‘Page Builder’ tabs on the top right of your page editing area, click ‘Page Builder’. If you only see ‘Switch to Editor’ this means you’re already in Page Builder mode.
View of editing screen in Page Builder mode – click to enlarge
There are a few different template options to choose from for the homepage that cooperate with Page Builder. Users can select Blank, Page Builder, or Page Builder – Cards. Each of these give the homepage a slightly different look, so it is best to try them all out and see which one fits best.
Home and Default Template do NOT work with the Page Builder layout. They were used for the old style homepages that were customized under Appearance > Widgets.
The page builder allows users to add different widgets in different areas of the page. To begin, click ‘Add Row’ at the top of the page editing area. Users can add as many rows as they would like. Before the row is added, the user can choose how many columns will be in that row and what percentage of the row each column will take up. There are many pre-made column ratios to choose from as well. Once the columns are set up, click ‘insert’ to officially insert the row into your homepage.
If you roll your mouse over the wrench button above the top right corner of the row, you will see options to edit, duplicate, or delete it. You can move a row up or down by clicking and dragging the arrow button next to the wrench button.
If you click to edit a row, you will see a screen similar to when you first added the row. However, in addition to editing the column number/sizes, you may also edit some row styles found on the right side of the screen.
This section allows you to add a Row ID to your row or Row/Cell classes. In addition, you can add your own custom CSS to be applied to that specific row.
Here you can choose whether you want your row to have a bottom margin or padding. You can also choose a ‘gutter’ amount, which is the space between each column in the row. You can decide how much you want to stretch the row under ‘Row Layout’ and in which order you want each column to collapse for smaller screens under ‘Collapse Order’.
Design allows you to choose a background color/image and a border color for your row.
Each column on the Page Builder layout can hold 0, 1, or multiple widgets. To insert a widget, simply click ‘Add Widget’ and choose the widget you would like to add. Once a widget has been added, you can drag and drop it to the column you wish to place it in. If you roll your mouse over a widget you will see options to edit, duplicate, or delete it.
If you click to edit a widget, you will get a screen split into two sections. On the left side, you can edit the content of your widget. On the right side, you can edit the styles of your widget.
This section allows you to add widget classes and custom css.
Here you can add padding around the widget.
Design allows you to colors for different aspects of your widget including background, border, font, and links. In addition, you may also choose to add a background image to the widget here.
(See all Aurora WordPress Training)