Relocate an element to a new position with the Rearrange option in the visual editor.
You can relocate (i.e., move) elements from one place on the page to another using the Rearrange option in the Changes panel.
How it works
The element you want to move is called the target element. Optimize uses a different element on the page as an anchor — the anchor element — to define where the target element should go. The target element can then be repositioned relative to the anchor element in the page’s underlying HTML structure — for example, placing it above, below, or nested within it.
How to rearrange elements
Since the target element becomes nested under different HTML, its styling may be affected. If that happens, you can use the Changes panel to restyle it (e.g., to adjust text styles).
In the visual editor:
- Click the target element
- Go to Rearrange in the Changes panel
- Click the Anchor tool icon
- Click an element on the page to set it as the anchor element
- Click the Relative position menu and choose a placement for the target element relative to the anchor element:
- After — outside and after the anchor's content box
- Inside at end — inside and at the bottom of the anchor's content box
- Before — outside and before the anchor's content box
- Inside at beginning — inside and at the top of the anchor's content box
Note
You can also enter a selector value manually to define the anchor element, but it must not match multiple elements.