Inline Editing

The editor allows for inline editing for your site which helps speed up your workflow. You can quickly edit and access the options for any widget, column, or row with the click of a button.

Context Menu

Everything in the editor has the option to open up a context menu. To open the context menu, right-click any widget or space in the editor.

Select Container

If you are having trouble selecting a container (column or row) in the editor, click a widget and click Select Container to select the Column or Row.

Alignment

Align elements by clicking the alignment () icons. You can align left, center or right.

Clear Padding

To remove extra space around columns or rows in your site, click Clear Padding. This is useful if you are trying to tighten up the space around your content.

Copy and Paste

You can copy any widget or container and paste it anywhere else on your site.

Rearrange Columns or Rows

To rearrange columns and rows, right-click the column or row, and then click the navigation arrows at the top of the context menu.

Rearrange Widgets

To rearrange widgets, click and drag them to another column or row in your site. Once you click to drag, a blue box will indicate where it will be placed after letting go of your mouse.

Snap to Align

While resizing elements within the same column, the editor attempts to Snap to Align them to be the exact same size. You will notice that as you resize, the widget will jump ahead or behind to snap to location. This should make it easier to make elements the exact same size.

Snap to Grid

The Snap to Grid system can help you lay elements in the pages of your site with professional precision. This system allows you to align elements horizontally and vertically within columns and rows. Rulers appear when moving an element in its row or column, or when resizing the element. The aligned elements are marked with a colored border. An element may be aligned to more than one other element, depending on the specific use-case.

Resize Widgets and Containers

You can resize most widgets and containers by hovering your mouse over them and interacting with the handles around the widget or container. The white handles add margins, either vertical or horizontal, to move an element. The blue handle, located in the lower right, resizes the element.