Prerequisite Topics

• Page Builder Glossary

What is Page Builder?

Want to design beautiful web pages but don't have any experience with coding? Page Builder is a plugin that allows you to do just that.

With Page Builder, you can easily add and arrange content on your webpage. You can select a pre-built template and modify it, or you can start with a blank slate and create your own layout. What you see in the editor is what you get when you publish.

If you do not have the Page Builder plugin, request it here. If you already have Page Builder, follow these steps.

1. Get Started

There are two ways to open Page Builder. The first is to navigate to the page you wish to edit on your website. Click Page Builder in the Admin toolbar.

The second way is to find your page on the back end of your site. Edit the page, click the Page Builder tab and click Launch Page Builder.

After you launch Page Builder, the header will appear.

Rows, columns, and modules are located under the plus button. Click this button to open the content panel.

2. Build Layouts

The layout of a Page Builder page is broken down into rows and columns. Rows are a great way to break your page into sections, while columns are a great way to organize the content within those sections.

If you start out with a blank slate instead of a template, begin building your layout by pressing the plus button. Select the Rows tab from the content panel and drag a row layout onto the page. You need at least one or more rows to create a layout.

Every row layout comes with a certain number of columns, but this number is flexible. You can always add more columns to a row or delete columns you no longer wish to use. For example, you may start off with a 1 column row but decide later that you want three columns. All you would have to do is drag and drop a 3 column row into your 1 column row.

You have the ability to nest columns—that is, you can place columns within other columns.

You can stack columns on top of each other within the same row, or you can put each line of columns in separate rows. Stacking multiple columns can seem similar to creating multiple rows. So what's the difference? How do you know if or when to start a new row? There are no hard and fast rules, but breaking down content into actual rows can be useful in a few ways:

• You can easily move rows around your page, columns and modules included, making it easy to move large groups of content at once. You can move columns too, but it will only move the modules in within that column.
• You can save rows to reuse in other instances on your site. You cannot save columns.

Remember: rows are like sections, and columns organize the content within each section.

Building layouts is fairly flexible. You can build your layout all at once before adding content, or you can edit and add to your layout as you go.

For more information on building layouts, see Page Builder's articles: Row Layouts Overview and Column Layouts Overview

3. Add Content

Once you have added rows and columns, it's time to add content. To add a module to your page, click and drag it from the content panel to where you want it on your page. When you drop a module, a window will pop up. This is where you add content to your module, and where you can style it.

After your row, column, or module is on the page, you can edit it, move it, copy it, and delete it. You can also adjust the widths of your columns.

You can also add custom EWU templates to your page by clicking the Templates tab in the content panel.

You can either replace everything already on the page, or you can append the template to the bottom of your content. You can then modify the template as you would any other module, column, or row.

4. Save Changes

When you are done editing your page, press Done in the header. You can:

• Discard changes and exit. All changes will be discarded, and your page will revert back to its previous save.
• Save Draft and exit. Your changes will be saved, but they will not be visible to the public. This is useful when you are building or editing a page, but have not completed it yet. Even though they will not be visible to the public, they will be visible to you the next time you or another admin launches Page Builder.
• Publish your changes and exit. When published, changes are immediately applied to the page and will be visible to anyone who views it on your site.
• Cancel to continue in Page Builder