---
title: Edit elements with the new Visual Editor
slug: personalization/docs/edit-elements-with-the-new-visual-editor
docTags: 
createdAt: 2026-08-05T20:59:34.672Z
---

- Optimizely Web Experimentation
- Optimizely Edge Delivery
- Optimizely Personalization

Once a variation is open in the Visual Editor, you can make content and style changes without writing code. This article covers how to edit a variation, select elements, and add, replace, or design page components.

## How variation edits work

- Edits apply only to the selected variation.
- Edits do not update your live site.
- Every edit is logged and displayed in the Visual Editor change list.
- Undo, modify, or delete any change before publishing.
- Use [conditional activation](docId\:gFxZVznmxKYYiZK6_cUHd) to ensure your experiment activates correctly to reach statistical significance.

## Edit a variation

:::hint{type="info"}
When you edit your site's pages in the Visual Editor, your changes do not overwrite your existing site. Your variations are visible only for the duration of your experiment.
:::

To add a change to the page, click **Edit**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/nbh-IvC__EynbPkqG2uaS-20260720-150042.png)

This opens the following options to edit your variation:

- [Insert HTML](archbee-doc-vepYrxRzrM5rJrK-DtEHo.mdx)
- [Insert image](archbee-doc-vepYrxRzrM5rJrK-DtEHo.mdx)
- [Redirect the page to a different URL](docId\:ywL8ufKnGF_9lUfJ_9cU_)
- [Experiment code](docId\:XstKL5ydKcdjC8cWNex_i)

## Edit an existing element on your page

The Visual Editor lets you make changes to existing page elements in your experiment, such as text, buttons, backgrounds, or images.

Select an existing element on the page to display the following options:

- **Edit element**
- **Ask Mark**
- **Drag to rearrange element**
- **Duplicate element**

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/X4_megMFbqXSlX_T8Nn4r-20260720-150042.png)

### Edit element

Click **Edit element** to open the **Element Change** window. You can drag the window to your desired location.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/Z8mu5O8wuYd0SqWBIV9xg-20260720-150042.png)

When you select a text block or image, the element's name automatically fills the **Selector** field. If you want to change your selection, click the **Search** icon (magnifying glass), hover over an element to see your selection highlighted, and then click it to change the selector.

If an element is difficult to select directly on the page, click **More (≡)** next to the selector field to go up or down the [DOM (Document Object Model)](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) tree and target the exact element you want to edit.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/-5O7qq6NZu8tyrh3SMvz--20260720-150042.png)

:::hint{type="info"}
You can escape any characters reserved as CSS special characters in your selector by including a single backslash ( \\\ ) before each character.
:::

Optionally, enter a name for the element change for better tracking.

You can change the HTML directly in the **HTML** textbox.

### Element properties

You can edit any of the following element properties from the **Element Change** window:

- **Layout** – Change the visibility to show, hide, or remove elements. Use the **Position** drop-down list to select alternative rules for positioning elements on your page.
- **Typography** – Adjust font size, weight, family, and color. Font family includes all fonts that your site uses.
- **Background** – Change color and image.
- **Border** – Modify width, style, and color.
- **Styles** – [Add any inline CSS](docId\:AcghmqDeOjhPNUYl7vbyn) to override prior changes or CSS styles for the selected element, including Optimizely Experimentation's custom CSS (except for [inherited styles](docId\:VNbjwaS9zuIxntK1jCxNE)). The autocomplete feature is included for easier and faster styling. You can also modify, add, or remove classes of the selected element.
- **Timing** – Choose between synchronous and [asynchronous timing](docId:7tM_zXfrTc6bB19wLURDw) for a change, and check whether a change should wait for a previous change to apply.
  - **Synchronous** – The change loads simultaneously with the Optimizely Experimentation snippet, before the page is visible. It is ideal for lighter changes that need to run immediately without flashing, like a headline swap.
  - **Asynchronous** – The change loads after the snippet, applying the change as the page loads. This is suitable for heavier changes where a delay is not noticeable, such as a window or section below the fold.
- **(Coming soon) Track clicks** – Attach a [click event](../../../experimentation-strategy/get-started/track-events/events-track-clicks-page-views-and-other-visitor-actions.mdx) to a new element you added using the Visual Editor to track clicks in that campaign.

### Inline text edit

Inline edit lets you click and edit text elements directly on the page, just like editing text in a document. You do not need to use a HTML textbox within the Element Change window.

1. Click the text element you want to edit.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/ClwKqe3HJaJE2KHvum0TR_inline-text-edit.png)

2. Edit the text as required.
3. Click **Save**.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/oxg7YBXq6qJef7kkvX4d__inline-text-edit-save.png)

### Ask Mark

Click **Ask Mark** to open [Mark chat](docId:6gjTnr7RZXwvAzqSCkkZe). Mark opens with a prompt asking, *Do you have a specific change in mind for this component, or would you like me to suggest some ideas for improvement?*

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/h5K9D3xmXzV9SAeGg6ZSw-20260720-150042.png)

See [Prompt engineering for Mark chat](archbee-doc-vepYrxRzrM5rJrK-DtEHo.mdx) to learn how to interact with Mark effectively.

### Drag to rearrange element

1. Click **Drag to rearrange element** to open the drag-and-drop editor.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/_bxmQeSSwZLYX8RSD-Fh1-20260720-150042.png)
2. Move your cursor above or below another element.
3. A placement indicator shows where the selected element will be inserted.
   - Hover above an element to place it before.
   - Hover below an element to place it after.
   - Click to insert the element at the indicated position or drag and drop it into place.

     ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/6RFoKvAD8Dj0QdyhLBgX4-20260720-150042.png)
4. Click **Save**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/40OHiQnhxCrcjTRM7O3T_-20260720-150043.png)

### Duplicate element

1. Click **Duplicate Selected Element**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/2-BialN2l8eUY7K2Bj9pi-20260720-150043.png)
2. Make changes to the duplicated element.
3. Click **Save**.

   ![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/iw9KYH-tkP3JF69N6a-U9-20260720-150042.png)

## Edit interactive or dynamic elements

**Interactive Mode** in Optimizely Experimentation lets you interact with your website from within the Visual Editor. For example, you can use **Interactive Mode** to edit an item on a drop-down list, close a modal dialog, or open a navigation bar.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/3IVf7xJOjiHVc0MUyi6k0-20260720-150042.png)

By default, selecting an element in the editor displays the contextual menu, which prevents interaction with dynamic elements.

Press and hold **Option** (Mac) or **Alt** (Windows) to enter Interactive Mode. You can also click **Interactive Mode**.

Release the key to return to editing mode.

![](https://api.archbee.com/api/optimize/BrbvVORKJ5iIeSMZye5kI/x6Tcl-IjqahMVxffQYLZF-20260720-150042.png)

The key benefit is that releasing the key lets you immediately edit elements that were previously unreachable, such as items in drop-down lists, content behind modals, or expanded navigation bars.

:::hint{type="danger"}
If you navigate away from the originally loaded URL while in Interactive Mode, the Visual Editor does not apply changes you made to the original URL.

To visit and edit a different page on your website, see the [Change the page that loads in the visual editor ](../../personalization/build-campaigns/new-visual-editor/new-visual-editor.mdx)section.
:::

## Advanced editing

See the following articles for more advanced editing options:

- [Advanced targeting with attributes](docId\:hlm4JyqkmECbRZQ0oudsq)
- [Add templates](docId\:W_FlZ6RqKvUoACUmAYbnb)