Gust builder

Time to get familiar with the Gust page builder!

Starting Gust

There are a couple of ways that you can get started with Gust. Either from the "All Pages" / "All Posts" page or from the "Edit Page" / "Edit Post" page itself.

From the "All Pages" / "All Posts" page, hover over an item and select "Gust Page Builder":

Post list hover state

From within the edit page, scroll down the options on the right hand side and select "Use Gust":

Gust tab on post edit page

Components Drawer

Once you're into the Gust page builder the Components Drawer is one of the key sections you'll be interacting with while building pages. From here you can find HTML elements and pre-made components. Click on each category header to expand / close it, or use the search to filter elements.

When you expand a category you can click and drag the element onto the page or down into the DOM tree. You can drop a component anywhere, but you'll notice that when you hover over an element you will see a bunch of arrows show up. Hovering over one of those arrows will add the dragged element before or after the hovered element.

Gust components drawer

Action bar

The action bar lets you move an element around the page, delete elements, and move around the DOM tree.

When clicking on a typical element you'll see something like this:

Gust action bar

The far left icon is the drag handle. You can click and drag this to move the element around.

The up and down arrows let you select the parent or child element.

The "save" icon lets you save the element as a component or update the global details of a component. Read more about editing components.

The trash can lets you delete an element. We all have trigger fingers at times so you'll need to confirm the action before a node is actually deleted.

Gust action bar when confirming delete

Some components support repeatable items. These are components like sliders, tabs, accordions etc, where you need to repeat the same layouts. When a component supports repeatable items you'll see an extra action bar. It has the title of the component followed by "items", for example "Slider items". This one has a few extra options:

Gust repeatable component action bar

The left and right arrows move you through the repeated items. For example, if you have a slider with three slides, clicking right will move you through each one of those slides, allowing you to edit each one individually.

The plus icon will add a new item.

The trash can will delete the currently selected item. It has the same confirmation requirement before an item is deleted. For example, if you have a slider with three slides and you want to delete the last slide, click the right arrow until you see the slide you want to delete. Then click the trash can, click it again to confirm, and that slide will now be gone. You cannot delete the last remaining item.

Content & Attributes

When you click on an element or a component, you'll be able to update the class names, add content, add attributes, add context, and select options.

Gust content and attributes panel

Scrolling down through this panel will let you add HTML attributes to any element. For general users you probably won't need to play with this section often, but it's helpful to know it's there:

Gust attributes

DOM Tree

For general users you won't need to use this panel much, but for those needing some finer grain control you can use this panel to select the exact element you need. You can also drag nodes around from here and you can drag elements and components into here.

Some options are also only available by using the DOM tree. For example, with repeatable elements, clicking the tab on the page will select the item and enable you to modify that item, but clicking the associated element in the DOM tree will let you customise the actual repeated element.

Gust DOM Tree

Screen sizes

You can preview what your page is going to look like on different screen sizes by clicking either the desktop, tablet, or mobile icons. The current size is highlighted in blue.

Gust screen size selections

Save & Exit

Don't forget to save all your hard work! Clicking the save icon will save your content and you'll see a loading spinner while it does so. Once you're done you can click the "x" to take you back to the WordPress edit screen.

Gust save and exit buttons