The Inline Editor


The new inline editing module is now available for all users in the platform. There are a number of improvements that you can see highlighted below.

New Drop Down

Now when you hover over elements, they will only highlight around the border, instead of displaying a drop-down box of what the element is. You must click to get editing options.


Hovering over element

Drop down menu after clicking on element


Column Editing

We now provide the option to edit columns in addition to rows and elements. This means you have more customization options while designing and more control over the padding/spacing around the element and also can set a specific background image/color on a column. Columns should have all the same design options as Rows The best way to select a column is to use the new ‘Select Container’ option:

Example of selecting the column container

Example showing different column background images

Example showing different column background images

Column Swapping

Columns inside of rows can now be swapped/switched in order easily.

Example showing column order swap

Detailed Spacing Details

The platform now tells you exactly sizing and spacing details when you move elements or resize them. There are a few short variables you should know what they mean:

Value Definition
W Width of element
H Height of element
T Distance from top of column or default position
L Distance from left side of column or default position
PT Padding at the top of the row
PB Padding at the bottom of the row

Example showing width and height values while resizing an image

Example showing height, padding top, and padding bottom while resizing a row

Example showing top and left values while positioning an element inside of a column/row

Moving Rows

Reordering or moving rows now is done by an up and down arrow, instead of dragging and dropping the rows. This provides a much smoother and more consistent experience.

Example showing row reordering

Drag and drop changes

The drag and drop performance is now as smooth as it can be. Your browser should rarely slow down while dragging elements around the page now. This change is particularly noticeable on firefox. We’ve also changed the indicator of dropping elements, attempting to give a better indicator of where and how big the element will be in the new location.

Example of dropping an image into a column

Snap to Align

While resizing elements within the same column, the software will attempt to ‘Snap to Align’ them to be the exact same size. You’ll notice that as you resize, your edits will jump ahead or behind to snap to location. This should make it easier to make elements the exact same size.

Example of snapping to be the same size as the element above.

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 with more than one other element, depends on the specific use-case. Note that alignment is supported in the views of the three different devices (desktop, tablet, mobile).

Toggle column/row padding on/off in the context menu

By default, sites have padding in each new column or row. This new feature allows you to disable/enable the default padding from the column's and row's context menu. In addition, the selection options in mobile view have been added to

include column selection. This way, the padding can be moved per device.