Inline editing

Overview

The new 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 or column or row with the click of a button.

Context menu

Everything in the editor has the option to open up a context menu. You can open this by right-clicking any widget or space in the editor.

Select container

If you're having trouble selecting a container in the editor, click a widget and use the "select container" option to select the container.

Align

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

Clearing padding

Clear padding easily by clicking the "clear padding" option. This lets you remove extra spacing around columns or rows in your site and is useful if you're 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. Note that it only works on your site, you cannot paste widgets or containers to other sites.

Rearranging columns or rows

Columns inside of rows can now be re-arranged in order by first bringing up the context menu, then clicking the arrow icons.

Rearranging widgets

Widgets can be re-arranged by clicking then dragging them to another column or row on 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 will attempt to ‘Snap to Align’ them to be the exact same size. You’ll 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 are presented 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, depends on the specific use-case. Note that alignment is supported by the views of the three different devices (desktop, tablet, mobile).

Resizing 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 n the lower right, resizes the element.

Considerations

Another way to edit the spacing is through the Design Editor. Right-click and click Edit Design. Then click the Spacing tab. You will be able to change the margins (outer spacing) and padding (inner spacing) using this method. For more information about Spacing, read this article.