> For the complete documentation index, see [llms.txt](https://docs.elevateab.com/elevate-helpcenter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.elevateab.com/elevate-helpcenter/content-testing/using-the-content-editor.md).

# Using the Content Editor

Reference for the Elevate A/B Testing content editor: selecting elements, editing style and content, adding new elements and code, and switching pages and viewports.

***

The content editor loads your storefront and lets you change any element on it by clicking. This page covers what every control does.

Your original page is saved automatically as the control variant, so nothing you do here can lose it.

### The toolbar

| Control            | What it does                                                                          |
| ------------------ | ------------------------------------------------------------------------------------- |
| Variation selector | Switches which variation you are editing. Each holds its own changes.                 |
| Page search        | Moves the editor to another page. Search by name or paste a URL. Shortcut: Command K. |
| Preview mode       | Toggles click to select on the preview                                                |
| Desktop and mobile | Switches the preview width. Check both before you finish.                             |
| Undo and redo      | Steps back and forward through your changes                                           |

### The Layers panel

The left panel shows the page structure as a tree, from `body` down through each element.

Use it when an element is hard to click, when you need the container rather than the text inside it, or when you want to confirm exactly which element you have selected. Selecting in the tree selects it on the page, and vice versa.

### Editing an element

Select an element to open **Element Properties**, which has two tabs.

#### Style

| Section        | Controls                                                                                                                                                                                                    |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Visibility** | Opacity, and **Hide Element** to remove it from the page entirely                                                                                                                                           |
| **Content**    | The text itself, with a rich text editor: size, bold, italic, underline, strikethrough, color, highlight, alignment, ordered and unordered lists, indent, and links. Select **Apply** to commit the change. |
| **Typography** | Font, weight, size, color, alignment, style, decoration, line height                                                                                                                                        |
| **Size**       | Width and height                                                                                                                                                                                            |
| **Layout**     | Auto layout or columns                                                                                                                                                                                      |
| **Spacing**    | Margin and padding, edge by edge                                                                                                                                                                            |
| **Background** | Background color, or an image                                                                                                                                                                               |
| **Border**     | Side, style, color, width, and corner radius                                                                                                                                                                |

Content changes need **Apply**. Style changes take effect as you make them.

#### Settings

**Attributes** lets you add or remove HTML attributes on the selected element, with **Add Attribute**. Use this when a change depends on an attribute rather than a style, such as a link target or a data attribute another script reads.

### Adding new elements

With nothing selected, the right panel offers **Content Elements**.

| Group         | Elements                              |
| ------------- | ------------------------------------- |
| Text Elements | Text, Heading 1, Heading 2, Heading 3 |
| Core Elements | Image, Container                      |

New elements are inserted into the page and styled with the same properties panel as anything else. Use **Container** when you want to group new elements and lay them out together.

### Adding code

The right panel also offers **Custom Code**, with two types:

| Type                  | Use it for                                                                                 |
| --------------------- | ------------------------------------------------------------------------------------------ |
| **Custom JavaScript** | Interactivity, tracking scripts, or behavior the editor cannot express                     |
| **Custom CSS**        | Styling that is easier to write than to click, or that has to target many elements at once |

Code added here applies to the variation you are editing, not to the whole experiment. Keep it light. A variation carrying heavy code against a control carrying none is not a clean comparison.

### Working practices

**Check mobile as you go**, not at the end. Switching viewport after twenty changes means finding which one broke the layout.

**Use the Layers panel for containers.** Clicking on a page usually selects the text. If you want to change the box around it, select the parent in the tree.

**Prefer hiding to deleting** when you want to test whether a section earns its place. **Hide Element** is reversible and unambiguous.

**Watch what your selection actually is.** The editor labels the selected element with its tag and class. If that label is not what you expected, you are about to style something other than what you meant.

### Next steps

* Preview and QA a Content Experiment
* Troubleshooting Content Experiments