How to use the Page Builder

You can begin editing any page in the Page Builder by selecting "Use Page Builder" from the top admin bar.

Once active, you will see the editor window on the left, and your page preview on the right.  If your page had standard editor content it will be automatically pulled into the Page Builder preview, otherwise the preview will start blank.

Adding rows

If you are working with existing Page Builder content or are starting from scratch your page should have at least one row.  You can add a new row by either:

1. Clicking either one of the buttons at the bottom of the editor window (each button corresponds to how many columns the new row will contain).  This will create a new row at the very bottom of your layout.

2. Hovering over an an existing row, placing your mouse over the blue "Row" tool, and clicking on the "+" button.  This will create a new row directly below whichever row that contained the "+" you just clicked.

Deleting rows

You can delete a row by hovering over the row you wish to delete, mousing over the "Row" tool, and clicking on the garbage can button.

Adding columns

Columns can only be added inside a row.  To add a column, hover over the row you wish to add a column to, mouse over the green "Column" tool and click the "+" button.

Deleting columns

To delete a column, hover over the column you wish to remove, mouse over the green "Column" tool and click the garbage can button.

Adding elements

Elements are the main building blocks of your Page Builder page.  Elements may only be added inside columns.  To add an element, hover over the column you wish to add an element to and click the red "+" button.  This will bring up the add modal allowing you to select what type of content to add to your column.  Select one of the elements to insert it into your column.  The editor window will present you with the fields to customize your element.

Editing an element

To edit an element simply hover over the element and click on it.  The editor window will present you with the fields necessary to customize this element.  

Tailoring your page for mobile/tablet

GiddyBuilder will do its best to make all content mobile/tablet friendly, but sometimes content will simply not work at that smaller size.  For example if you have text that is too large to fit in a mobile screen, or a column has too much spacing.  You can customize many aspects of your elements by choosing one of the device preview buttons found at the top of the editor window.

Saving the page

When you've completed editing your page, click "Done" at the top of the editor window.  From there you can either:

  • Publish changes - your updates will be saved and displayed to the public.
  • Save changes and exit - your updates will be saved but these updates will not be displayed to the public.
  • Discard changes and exit - your updates will not be saved and will revert to the last published version should you edit this page with the Page Builder again.

Still need help? Contact Us Contact Us