Inline Editing
Last updated
Last updated
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.
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.
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.
Align elements by clicking the alignment () icons. You can align left, center or right.
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.
You can copy any widget or container and paste it anywhere else on your site.
Note
This only works on your site, you cannot paste widgets or containers to other sites.
To rearrange columns and rows, right-click the column or row, and then click the navigation arrows at the top of the context menu.
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.
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.
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.
Note
Alignment is supported by the views of the three different devices (desktop, tablet, mobile).
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.
