The contextual toolbar is a dynamic UI found in the middle of your top menubar. It's designed to speed up your workflow by providing you with some readily available, commonly-used editing tools.

The contextual toolbar will adapt and display different editing options, depending on the type of element that you currently have selected on the page.

Below are some of the editing options that may appear, depending on the type of selected element.

Dimensions

Set the width, max-width, and height of the element. This can also be done using the Dimensions Panel.

Grid Settings

The slider lets you the gutter width for a grid element, and the two icons allow you to specify whether a grid should appear as split or stacked. Learn more about grid elements in this article.

Element Alignment

Use this toggle to set an element to left-, right-, or center-aligned. This can also be done with the Alignment Panel in the right toolbar. 

Note that this applies to the element overall, not the text within it. To modify the alignment of text, you should use the text-alignment tool in the Text Formatting Panel.

Setting an element to left- or right-aligned will float it to that side. You can float multiple elements in a container to one side to stack them horizontally.

Box Fill

Set the element to expand to the full height of the browser, the full width of the browser, or the full width of the site. This can also be done using the Dimensions Panel in the right toolbar.

Background Fill

Set the element's background to fill the site width, or the full browser width.

By default, an element's background will extend to the full width of the browser:

By toggling the box fill mode, you can limit an element's background so that it only extends to the full width of the website:


Did this answer your question?