Insert an element

Add new content to your variations or landing pages using the visual editor.

The Insert elements option lets you add new elements — like text, buttons, or images — to your page in variations. It’s a quick way to build out new ideas, test different layouts, or try something completely new, all without touching code.

Elements you can insert

• Rich text — add a new text block
• Image — add a new image
• Custom HTML — add your own hand-coded HTML element(s)
• Columns — add a span of 1–5 columns, which can include images, text, hyperlinks, and CTAs

How it works

Optimize uses an existing element on the page as an anchor — the anchor element — to define where the inserted element should be placed. The inserted element is then positioned relative to the anchor element in the page’s underlying HTML structure — for example, placing it above, below, or nested within it.

How to insert an element

In the visual editor:

1. Hover over the element you want as the anchor element
2. Click the Insert icon
3. Click the element type you want to insert

Once the inserted element is added, you can edit it and style it like any other page element.

How to adjust the position

You can assign a new anchor element and adjust the inserted element's relative position.

In the visual editor:

1. Click the inserted element
2. Go to Inserted Element Placement in the Changes panel
3. To assign a new anchor element, click the Anchor tool icon, then click a different page element
4. Click the Relative position dropdown menu, then choose a new relative position:
   • After — outside and after the anchor element's content box
   • Inside at end — inside and at the bottom of the anchor element's content box
   • Before — outside and before the anchor element's content box
   • Inside at beginning — inside and at the top of the anchor element's content box 

Explore each element type

You modify rich text and images from inserted elements and columns just like the original page elements:

• Learn how to edit and style rich text
• Learn how to replace images and adjust an image's dimensions

Custom HTML

This options inserts an HTML block, where you can write your own HTML and CSS. For example, you could insert a simple table without creating a fully hand-code variation.

Columns

Insert a span of 1–5 columns with various pre-built layout options. Select from these options when inserting:

• Number of columns — choose 1 to 5
• Image shape — crop to rectangles, squares, or circles
• Columns layout — select from image, headline, body text, CTA, or hyperlink to include
• Responsive breakpoint — set the minimum screen width (px) before columns stack vertically

How to change the layout:

1. Click the Changes tab at the top of the Changes panel
2. Click Inserted Columns to reopen layout options and make changes
3. Click another element to apply the changes and exit the layout options