skip to Main Content

Page Builder

Page Builder

When to use the page builder

If you are adding a new page that will contain just text, it’s simplest to use the Classic Page Editor.

But if you want a more complex layout for your page, for example with columns, or you want to add elements like image galleries, buttons, accordian toggles, etc., then it’s best to use the page builder.

Is this your first time adding a new page?
Read the Adding and Deleting Pages tutorial first.

Switching to the page builder

If you are in the Classic Editor and want to switch to the Page Builder, click the blue Backend Editor button below the page title.

Example 1: Image and text in 2 columns

Example of 2 columns with image on left and text on right
Result of this tutorial
  1. To add any element to a page (text, button, image, etc.) you have to start by adding a row: Click the blue Add Element button on the page.
    Click the blue Add Element button to add your first element. Click for larger image.
  2. Click the Row element (it should be the first one in the grid of elements).
    Add Element dialog with Row element highlighted
    Select the Row element. Click for larger image.
  3. To create two columns, hover over the column selector in the top left corner and select the 2-column layout. (If you don’t want columns, leave it as it is.)
    Column selector highlighted
    Hover over the 3 horizontal lines in the upper left corner of the row. Click for larger image.
  4. To add the image, click the plus icon in the left column.
    Plus icon in left column highlighted
  5. Scroll down the grid of elements and click on the Image box.
    Add Element dialog with Image element highlighted
    Click for larger image
  6. The Image Settings will open. Click the plus box to add an image. You can either choose an image from your current media library (Media Library tab), or you can upload a new image from your computer (Upload Files tab).
  7. Explore the other image settings in the Style, Size, and Link tabs to set your image the way you want it.
  8. Click Save Changes.
  9. To add the text to the right column, click the plus icon in the right column.
    Plus icon in right column highlighted
  10. Click on the Text Block box.
    Add Element dialog with Text Block element highlighted
    Click for larger image
  11. Enter your text in the editor. The Text Block editor works the same way as the Classic Editor.
    Text Block editor
    Click for larger image
  12. Click Save Changes.
  13. To see how your page looks, click the Preview button on the right side of the page editor.

(Don’t forget to add a Page header image to your page.)

Example 2: Text followed by a button

COMING SOON

 

Back To Top