Working with Elements on the Page

Once the Visual Editor is loaded you can move your mouse around the page to highlight an element as shown below.

The element will highlight in blue, the title will display and a toolbar will appear in the upper right.  The toolbar varies based upon the type of element that you are working with.  The possible tools that appear on this menu are:

IconDescriptionShortcut Key

Delete

Delete the element from the page.

DEL

Duplicate

Duplicate the element on the page.f

Settings

Access the settings for this elements

Hierarchy

View this element in the hierarchy viewh

Add

Add an element below+

Scoped CSS

Access the scoped CSS for this elementc

Comment

Put a comment on the element (only visible in the editor mode)m

Left

Move the element leftl

Right

Move the element rightr

Up

Move the element upu


Down
Move the element downd

Grid Size

Change the size of the column on the gridg

Edit

Edit the text for this element (headline, text, textblock)e

Experiment

Change the experiment variation that is visible

Often times elements will be nested on the page so access their toolbars directly is not possible.  When you hover over a toolbar icon, a flyout menu of all the parent elements will appear as shown below.  This allows quick access to any element on the page simply by hovering over that part of the page that contains it.