This page demonstrates all the layout elements.

To edit the page, login, then click the Live Editor button up the top of the page.

The layout appears on the left. Areas of the page can be edited by clicking on them, or by clicking on them in the layout panel on the left.

Widgets, Rows, and Layouts can be added from the buttons at the top of the layout panel.

New prebuilt layouts can be added from the layouts button, or rows and widgets can be added to create new layouts and content from their buttons, or by right-clicking on a layout. The Layouts screen also lets you the layout of existing pages.

The spanner lets you edit the rows themselves. Content can be dragged around in the layout panel. The rows can be dragged by their arrow buttons.

When you are done editing, click the Done button. This takes you back to the normal WordPress page editor screen. You then need to click the Update button before the changes are saved.

There's a few other things that can be edited from other areas:

  • The images at the top of the page can be selected on each page. If not selected, defaults are used.
  • The default page header images are set in the Page Header section of the WordPress Customise screen.

Note that reverting to the normal WordPress editor deletes all the PageBuilder content for that page, though if it was previously saved, you should be able to go back to it from either the WordPress revisions, or the PageBuilder edit history.

See the documentation for full instructions.


 

Masonry Grid

This is a masonry grid.

Rerum vel optio repellat perspiciatis soluta, deleniti dolorem sunt ut earum dolores alias itaque reiciendis, ipsum, illo voluptas dolore quaerat eligendi praesentium aliquid natus eveniet excepturi illum modi laborum! Ipsam!

Suscipit vitae similique reprehenderit ipsum nostrum accusantium eos impedit minus nisi quae laboriosam doloremque sit assumenda dolor consectetur, quos repellat, veritatis possimus saepe ad, unde dolorem odit! Aspernatur, laboriosam, nobis.

Rerum vel optio

Rerum vel optio repellat perspiciatis soluta, deleniti dolorem sunt ut earum dolores alias itaque reiciendis, ipsum, illo voluptas dolore quaerat eligendi praesentium aliquid natus eveniet excepturi illum modi laborum! Ipsam!

Suscipit vitae similique reprehenderit ipsum nostrum accusantium eos impedit minus nisi quae laboriosam doloremque sit assumenda dolor consectetur, quos repellat, veritatis possimus saepe ad, unde dolorem odit! Aspernatur, laboriosam, nobis.

Title

Add further blocks by using add widget or right clicking.


This is a two-column layout, with the left column being larger.

Rerum vel optio repellat perspiciatis soluta, deleniti dolorem sunt ut earum dolores alias itaque reiciendis, ipsum, illo voluptas dolore quaerat eligendi praesentium aliquid natus eveniet excepturi illum modi laborum! Ipsam!

Suscipit vitae similique reprehenderit ipsum nostrum accusantium eos impedit minus nisi quae laboriosam doloremque sit assumenda dolor consectetur, quos repellat, veritatis possimus saepe ad, unde dolorem odit! Aspernatur, laboriosam, nobis.

This editor can be replaced by images, videos, etc. Use the add widget button to add widgets, or right click on the layout.


This editor can be replaced by images, videos, etc. Use the add widget button to add widgets.

Rerum vel optio repellat perspiciatis soluta, deleniti dolorem sunt ut earum dolores alias itaque reiciendis, ipsum, illo voluptas dolore quaerat eligendi praesentium aliquid natus eveniet excepturi illum modi laborum! Ipsam!

Suscipit vitae similique reprehenderit ipsum nostrum accusantium eos impedit minus nisi quae laboriosam doloremque sit assumenda dolor consectetur, quos repellat, veritatis possimus saepe ad, unde dolorem odit! Aspernatur, laboriosam, nobis.

Change the background image from edit row

Green

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus labore, aspernatur illum. Ea quaerat consequatur ut explicabo, quam esse ad illum rem, quasi cupiditate excepturi incidunt obcaecati delectus distinctio odit!

Red

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus labore, aspernatur illum. Ea quaerat consequatur ut explicabo, quam esse ad illum rem, quasi cupiditate excepturi incidunt obcaecati delectus distinctio odit!

Yellow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus labore, aspernatur illum. Ea quaerat consequatur ut explicabo, quam esse ad illum rem, quasi cupiditate excepturi incidunt obcaecati delectus distinctio odit!

Purple

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus labore, aspernatur illum. Ea quaerat consequatur ut explicabo, quam esse ad illum rem, quasi cupiditate excepturi incidunt obcaecati delectus distinctio odit!

Two evenly spaced columns with a light blue background.

The colour can be changed from the Design section when editing the row (Use the little spanner button over in the layout panel on the left).

Rerum vel optio repellat perspiciatis soluta, deleniti dolorem sunt ut earum dolores alias itaque reiciendis, ipsum, illo voluptas dolore quaerat eligendi praesentium aliquid natus eveniet excepturi illum modi laborum! Ipsam!

Suscipit vitae similique reprehenderit ipsum nostrum accusantium eos impedit minus nisi quae laboriosam doloremque sit assumenda dolor consectetur, quos repellat, veritatis possimus saepe ad, unde dolorem odit! Aspernatur, laboriosam, nobis.

Rerum vel optio repellat perspiciatis soluta, deleniti dolorem sunt ut earum dolores alias itaque reiciendis, ipsum, illo voluptas dolore quaerat eligendi praesentium aliquid natus eveniet excepturi illum modi laborum! Ipsam!

Suscipit vitae similique reprehenderit ipsum nostrum accusantium eos impedit minus nisi quae laboriosam doloremque sit assumenda dolor consectetur, quos repellat, veritatis possimus saepe ad, unde dolorem odit! Aspernatur, laboriosam, nobis.

A blue box!

Many things may be written here.