Canvas Actions and Options

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.

Example context menu:

Anchor links let you send visitors to a specific sections of the page, making it easier for them to get from place to place on a longer page or to a specific section that you would like to reference. Anchor links are very useful for letting users skip past content that may not apply to them, keeping them focused on what is important to them.

Add Anchors

To add an anchor on your page:

1. Right-click an element to open the context menu.

2. Click Set As Anchor.

3. Type an Anchor Name. To add the anchor to the site's navigation, select Add to Site Navigation (by default, this option will be checked; un-check it to prevent it from being added to the site navigation). The option, Add to Site Navigation, won't be available for dynamic pages.

4. Click Add.

Note

If an anchor is added to site navigation, it will appear in the list in the Pages area located in the side panel. For information on managing it in the Pages area, see Pages.

Link to an Anchor

To add a link to an existing anchor:

1. When creating a text or button link, select the Anchor option (located in the link picker that opens when adding a link)

2. Select the page the anchor is on, and select the anchor from the drop-down.

Delete or Edit an Anchor

To delete or edit an existing anchor:

1. Right-click widget or row with the anchor to open the context menu.

2. Click the gear icon, then select Edit Anchor.

3. Click Delete anchor or edit the anchor as necessary.

4. If you edited the anchor, click Update to apply the changes.

Warning

If an anchor in the site navigation (located in the Pages area of the side panel) has sub-pages, deleting the anchor will also delete the sub-pages.

Elements in Flex sections and Editor 2.0 have floating menu bars that offer different options depending on the widget or element. The floating menu can also be used when trying to select a prior level layer (for example, if you click on a column, you can only select the section layer. The top layer is a section, followed by a column, then an element, and so on).

Example floating menu:

To select a prior layer, click on an element to bring up the floating bar, then hover on the element's name (it should expand to show its prior layers), and click on the desired layer.

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

In Editor 2.0, click Select Layer to select the Column or Section.

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.

Some elements, such as rows, sections, and columns, right-click the element, 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.

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.

Move element

Resize element