Building a Page

4 min read Updated

A Page Builder layout is made of rows, columns and widgets. For the toolbar and row actions, see Getting Started.

Add a Row

  1. Click Add Row. The New Row dialog opens.
  2. Set the Column Count. Type a number from 1 to 12, or use the + and − buttons. A new row starts with two columns.
  3. To use a preset width, click one of the Column Presets. Presets show for rows with two to five columns.
  4. To reverse the presets, click the Direction arrow. For example, 25% and 75% becomes 75% and 25%.
  5. Click Insert.

The New Row dialog with Column Count, Column Presets and Direction

Page Builder adds the new row below the row of the selected column. If no column is selected, the row goes at the bottom of the layout.

The row dialog also has the Row Styles sidebar. Click a column in the dialog preview to show its styles, such as Column 1 Styles. See Styling Rows, Columns and Widgets.

Set Column Widths

Each column in the row dialog preview has a width field, in percent. You can change the widths in these ways:

  • Type a width. Type a value in the field, then press Enter. The other columns keep their proportions and fill the remaining width.
  • Use the + and − buttons. Each click changes the width by 1%. The Up and Down arrow keys do the same in the field.
  • Drag the handle between two columns. Double-click the handle to make those two columns the same width.
  • Click a preset in Column Presets.

Column width fields with plus and minus buttons

You can also resize columns in the builder. Drag the divider between two columns. The builder doesn’t show the width values.

When you change the Column Count, all columns get the same width. If you remove columns, their widgets move to the last remaining column.

Add a Widget

  1. Click a column to select it.
  2. Click Add Widget. The Add New Widget dialog opens.
  3. Choose a group on the left, or type a widget name in Search Widgets.
  4. Click a widget. Page Builder adds it to the bottom of the selected column.

The Add Widget dialog with widget groups and search

If no column is selected, the widget goes in the first column of the last row. If the page has no rows, Page Builder creates a one-column row for the widget.

The dialog groups widgets by their source:

  • All Widgets
  • SiteOrigin Widgets Bundle
  • Page Builder Widgets
  • WordPress Widgets

Other groups show when they apply, such as Recommended Widgets, or a group for WooCommerce, Jetpack or bbPress widgets.

When a search leaves only one widget, press Enter to add it. To enable more Widgets Bundle widgets, go to PluginsSiteOrigin Widgets.

To show the same widget on many pages, SiteOrigin Premium adds Mirror Widgets. Edit the widget once, and every page that shows it updates.

Edit a Widget

A new widget opens its form at once. To turn this off, go to SettingsPage BuilderWidgets and disable Instant Open Widgets.

To edit a widget later, click its name in the builder. You can also hover over the widget and click Edit.

A widget edit dialog with the Widget Styles sidebar

The widget dialog has these controls:

  • Done closes the dialog and keeps your changes.
  • Delete removes the widget.
  • Duplicate adds a copy of the widget below it.
  • The arrows in the title bar open the previous or next widget.
  • Click the dialog title to rename the widget. The new name shows in the builder. Row dialogs work the same way.

The Widget Styles sidebar sets the widget’s design. See Styling Rows, Columns and Widgets.

Save Modes

Widget dialogs and row edit dialogs have two save modes. Click the button next to Done to choose one:

  • Save With Page Save is the default. Done closes the dialog. Your changes are saved when you update the page.
  • Save Now replaces Done with Save. Save saves your layout changes at once and keeps the dialog open. On a published page, visitors see the change right away.

The Save Now and Save With Page Save options

Your choice applies to widget and row edit dialogs until you reload the editor.

Move and Remove Widgets

To move a widget, drag it to a new position. You can drop it in the same column, another column or another row.

A widget being dragged to another column

Hover over a widget to show Edit, Duplicate and Delete. Delete removes the widget with no confirmation. To undo a change, use History.

Right-Click Menu

Right-click a widget, column or row to open a menu of actions. From this menu, you can add widgets, and copy and paste widgets and rows. See Copy and Paste.

Next Steps