Building a Page

I’m assuming you’ve already read the getting started guide. This guide will help you with the more advanced concepts of building a page using Page Builder.

Adding a Row

Rows form the overall structure of your page layout. These are the first things you will add to your page. To add a row, click on “Add Row.”

PB113

An “Add New Row” dialog will appear.

PB114

Set Row Layout

You can set the row layout by selecting the number of cells in the row, the cell ratio, and the direction to apply that ratio — left or right. Page Builder will update the layout as you change these values, or you can click “set” to set the layout.

The example below is a 3-cell layout with an even ratio from left to right.

PB115

This next example is a 3-cell layout using a golden ratio from right to left. Right to left means the cells with the largest width are on the right side, and subsequent cells are, according to the ratio, narrower.

PB116

Once you’re happy with the layout of your new row, click on “Insert” to add the row to your page.

PB117

Deleting a Row

To delete a row, hover over the spanner icon in the top right corner above that row. A drop down menu will appear with options to Edit, Duplicate or Delete. Click on “Delete Row,” and then confirm this action by clicking on “Are you sure?”

PB118
PB119

Editing a Row

To edit an existing row, click on the spanner icon in the top right corner above that row.

PB120

This opens the “Edit Row” dialog.

PB121

Manually Editing Cell Widths

The cell widths can be manually adjusted in two ways.

It can be done by dragging the dividing bar between two cells. Drag the bar left or right to increase and decrease the cell’s width. Click “Save” to apply your changes.

PB122

You can also adjust the cell widths outside the edit dialog, in the main builder view. However, Page Builder won’t display numerical values indicating cell widths.

PB124

Page Builder also lets you directly enter cell widths in the row edit dialog. Click on the percentage indicator in the first cell (moving left to right). Enter a width as a percent. Push enter or tab to move to the next cell. When you reach the last cell, pushing enter will tell Page Builder to set the widths.

PB125

In the example above, I adjusted 19.1 to 25 and pushed enter, 30.9 to 35 and pushed enter, and, lastly, 50 to 40 and pushed enter to set the new widths.

PB126

Clicking “set” in the “Set Row Layout” block will restore your layout to a ratio-based layout. Once you’re done editing your row, click “Save.”

Adding a Widget

To add a widget, first activate the row cell to which you wish to add a widget. Once you have selected a row cell, click on “+ Add Widget.”

PB127

If you begin creating your post or page by adding a widget without having first created a row, this will automatically add a single cell row to your page containing the chosen widget.

PB128

Clicking the “+ Add Widget” button will open an “Add New Widget” dialog with a table of all available widgets. You can filter the widgets according to their “origin, creator,” in this instance, Widgets Bundle Widgets, Page Builder Widgets, WordPress Widgets, and Recommended Widgets. Filter by clicking on each of the links respectively.

PB129

To select a widget, simply click on it. The widget will now appear in the selected row cell.

PB130

To move the widget, click, hold and drag it to a new cell. Letting go will position the widget in the chosen cell.

PB131

Hovering over the widget will display the widget options, namely Edit, Duplicate or Delete.

PB132

Using the Layout Widget

The Layout Widget gives you the full functionality of Page Builder in a simple widget. This allows you to create complex layouts, nested layouts and bring the power of Page Builder to your sidebars, footers and other widgetized areas.

The example we give below illustrates the complex layout possibilities. We added a Layout Widget to the first column of a two-column row and filled it with placeholder text. To clarify what’s going on, we gave it a blue background (#289BFF).

PB133

In the Layout Widget, edit dialog shown below, the background color of the Layout Widget and the text color were adjusted to pink (#FF665F) under the Widget Styles > Design Tab.

We added 2 rows – one three-column row and a second two-column row. We filled this layout with placeholder visual editors.

PB134

The background colors of the three-column row and two-column row were set to white and light blue (#79B9F1), respectively. The resulting layout is displayed below:

PB135

Source: https://siteorigin.com/page-builder/documentation/building-a-page/

Call 03-5656-5889
Made with  in Viet Nam • Powered by Hoangsoft.com