Your ASMP Chapter Website comes equipped with a powerful "Page Builder".

This page builder gives you a tremendous amount of control over the style and layout of your Chapter Site's webpages. 

To get started, click Edit on an existing page or click Add New to create a new page:

After clicking edit or adding a new page you will see buttons that allow you to toggle between "classic mode", "Backend Editor", and "front-end editor" mode.

In this article we'll focus on the Backend Editor.

Let's click on Backend Editor toggle:

This enables the Page builder.

From here, you can add your first element, quickly add a text block, or add a template (we will not be covering templates).

Let's add an element by clicking on the Add Element button

.

This opens a pop-up menu with lots of options for adding text boxes, headings, social sharing, images and galleries, toggles or tabs, accordions, recent posts, buttons, sidebar widgets, and more.

Let's click on the first element available, which is the Row element:

Rows make it possible to add columns in one click. 

Just hover on the tab at the top left corner of your row and select a layout. The row automatically breaks into columns according to the layout you choose.

(hover tab)

(select column layout)

(selection applied)

At this point you can add an element to any of you columns by clicking on the + sign.

Let's add a text block to the first column by clicking the + sign and selecting Text Block from the pop-up menu.

This will add the Text Block to the column and open up the options box for the Text Block. The options box allows you adjust the text that will be displayed in the column along with things like the font size, color, weight, etc. Each element will have it's own options and settings.

Once you're finished adjusting your element, click the Save changes button.

At any point in the design process you can drag & drop any row or page element to rearrange them. 

You can also duplicate any row or element, which makes adding repetitive content quick and easy (great for similar columns, FAQs, toggles, etc.).

You can duplicate rows by clicking on theicon in the upper right corner of the row. You can duplicate elements by hovering over the element and clicking on the same icon within the green bar that appears.

You can drag-and-drop rows by clicking on theicon in the upper left corner of the row. You can drag-and-drop elements by hovering over the element and clicking on the same icon within the green bar that appears.

Below is the same page with duplicated elements, a duplicated row, and elements rearranged using drag-and-drop

By now you should have a basic idea of how to use the Page Builder, we will continue to add more advanced articles over time -- so check back often.

Oh, and once you have designed and built your new page using the Page Builder don't forget to save your page... you don't want to lose your work.