Advanced Website: Using inline editing

Inline editing provides quick access to edit a widget, column, or row to speed up your workflow. Use the features below to manage your site layout directly within the editor.

Access inline editing

The ability to edit an element inline is accessible in two ways:

• via the 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.

• via a 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.

Inline editing options

The following inline editing options are available:

• Alignment

  Click the alignment () icons to align elements to the left, center or right.

• Clear padding

  To remove extra space around columns or rows in your site, click Clear padding.

• Copy and paste

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

  Note:

  You can't paste widgets or containers to other sites.

• Rearrange columns or rows

  Right-click a column or row, and click the navigation arrows at the top of the context menu to rearrange the order of the elements.

• Add lists
  • Numbered list:

  • Bulleted list:  

    For additional bullet styles, click the dropdown arrow

  • To create nested bullets and lists, press the Tab button on your keyboard. The bullet or number is shown indented to the right. You can have multiple nested bullet and number lists.

Rearrange and resize elements

Manage the size and placement of elements to customize your site layout.

• Rearrange a widget 

  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.

• 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.

Align elements

Alignment is supported across desktop, tablet, and mobile device views to ensure a consistent look.

• Snap to align

  The editor automatically attempts to "Snap to Align" elements to the exact same size when you resize them within the same column. The widget jumps to the snap location to help you match element sizes precisely.

• Snap to grid

  Align elements horizontally and vertically within columns and rows using the "Snap to Grid" system. Rulers appear while moving or resizing an element, and aligned elements are marked with a colored border.