---
title: Using the Visual Editor
description: The Visual Editor allows you to review your website, determine what you want to change, make your changes, and save a collection of changes to a Variation Group. Keep in mind that when you edit a scre
---
[Skip to content](https://doc.sitespect.com/knowledge/using-the-visual-editor#main-content)
English
Show submenu for translations
- [A/B Testing](https://www.sitespect.com/testing-and-experimentation/)
- [Personalization](https://www.sitespect.com/personalization-targeting/)
- [Recommendations](https://www.sitespect.com/recommendations/)
Open main navigation
Close main navigation
- [A/B Testing](https://www.sitespect.com/testing-and-experimentation/)
- [Personalization](https://www.sitespect.com/personalization-targeting/)
- [Recommendations](https://www.sitespect.com/recommendations/)
- English
Show submenu for translations
How can we help you?
- There are no suggestions because the search field is empty.
1. [Knowledge Base](https://doc.sitespect.com/knowledge?hsLang=en)
2. [Build](https://doc.sitespect.com/knowledge/build?hsLang=en)
3. [Create a Client-Side Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#create-a-client-side-campaign)
# Using the Visual Editor
The Visual Editor allows you to review your website, determine what you want to change, make your changes, and save a collection of changes to a Variation Group. Keep in mind that when you edit a screen element with the Visual Editor, there are some limits to what you can and cannot do. See [Understanding the Visual Editor](https://doc.sitespect.com/knowledge/understanding-the-visual-editor?hsLang=en) for more information on its abilities and limits. See [Launching the Visual Editor](https://doc.sitespect.com/knowledge/launching-the-visual-editor?hsLang=en) to learn how to open the Visual Editor.
**Note:** The Visual Editor opens in the same browser window as the SiteSpect application. This is different from SiteSpect's other preview functions that open a new window. If you close the Visual Editor by closing the browser window, you will close SiteSpect as well. Use the **Exit** button to leave the Visual Editor.
#### Visual Editor Features
The controls for the Visual Editor are located along the top of the window.
- Campaign Name
- Variation Group Selection
- Change Log
- Go To Page Drop-down
- Unhide (only when a page element is hidden)
- Edit or Preview Mode
- Screen Size Controls
### Campaign Name
The name of the Campaign is displayed at the top of the page. If you have not already named the Campaign or if you want to edit the existing name, click on the words **New Campaign** (or the existing name). Clicking opens a text box that allows you to type. Name the Campaign or make your changes and click anywhere else on the page to complete the name.
**Note:** The Campaign, including its name, is not saved until you click **Save**.
### Variation Group Selection
At the top right side of the page, a drop-down menu allows you to select from among the Original or one of the Variation Groups that is displayed in the Visual Editor. In addition, it allows you to add additional Variation Groups, rename them, and delete them.
#### Change Log
By clicking **View Changes**, you can view a list of all of the Visual Editor changes that have been made to the current Variation Group. You can hover over a change to select the affected element in an orange dashed border, or click the change to select the element. You can also click the Delete icon on a change to remove those changes entirely.
#### Go to Page
The Go To drop-down allows you to enter a URL and click **Go** to move directly to that page.
#### Edit or Preview Mode
The **Edit** and **Preview** buttons in the upper right corner of the window determine whether you are in Edit mode or Preview mode. In Edit mode, you can work on changes to the current page. In **Preview** mode, you can click around the site to view other pages.
Click **Preview** to switch to Preview mode. The header changes to a dark color to indicate that you're in a different mode. Review any changes you have made to the page. Then click **Edit** when you're done to return to Edit mode.
#### Screen Size Controls
The Screen Size drop-down allows you to preview your site using the screen dimensions of common devices, such as phones, tablets, and full-width desktop screens. You can also select Custom Size to resize the page to your own specific set of dimensions.
#### Selecting Page Elements
As you move your mouse pointer around the Visual Editor page, different highlighting styles let you know what you can edit, what you can't edit, and what has already been edited.
### What You Can Edit
When you move your mouse pointer over a page element that you can edit, the element appears with a dotted outline as in the following image.
### What You Can't Edit
When you move your mouse pointer over a page element that you can't edit, the element appears with a dotted outline as in the following image.
### What You Are Editing
When you click your mouse pointer on a page element and begin editing it, the element appears with a solid outline while you are editing it, as in the following image.
### What Has Already Been Edited
Page elements that you have edited appear with a solid outline after you have saved them, as in the following image.
#### Edit Menu
The **Edit** menu becomes active when you right-click a page element. To view the menu, right-click on a page element such as a text box or an image. The menu displays different selections, depending on what page element you have currently selected.
The following image shows an example of the **Edit** menu. The **Delete Changes** menu item is active when you have edited something and allows you to undo the last edits you made to the selected text.
The following table lists the functions on the **Edit** menu.
| Menu Item | Description |
| --- | --- |
| **Edit Image** | Allows you to select an image as a background image for the page element, if it doesn't already have one, or to select a new image to replace an existing one. |
| **Edit Text** | Allows you to edit the content of the text or edit its formatting. |
| **Edit Style** | Allows you to edit several formatting options for the selected element. |
| **Edit HTML** | Opens a window that allows you to edit the selected object in an HTML editor. |
| **Hide** | Opens the **Hide Element** dialog that allows you to specify how to hide the currently selected page element. |
| **Reorder** | Allows you to change the order of the elements within the selected group, for example, on a menu. |
| **Add** | Allows you to add a page element. |
| **Track Clicks** | Allows you to track clicks on page elements. |
| **Click Element** | Provides clickable access to the selected element. This means that when you select an element on the page, and then select **Click Element**, it works just as if you had clicked on the element on your live website: it takes you to the linked location. |
| **Delete Changes** | Undoes any changes you have made to the page element during this edit session. |
#### Editing Text Elements
To edit a text element:
1. Select the text element you want to edit. The Edit function works only when you select a page element.
2. Select **Edit** and then **Text** from the right-click menu. The page element's outline turns solid. In addition, an edit palette opens that contains customary text editing tools. The edit palette is shown below.
3. Make any text changes you need. You can change the wording of the text element. In addition, the edit palette allows you to make standard formatting changes.
4. Select a Page Category from the drop-down. Page Categories allow you to assign changes to more than one page at a time and are defined using Triggers associated with pages. See [Understanding Page Categories](https://doc.sitespect.com/knowledge/understanding-page-categories?hsLang=en) for more information.
5. Click **Save** to save your changes or **Cancel** to abandon them.
#### Editing Image Elements
The Edit Image function allows you to replace an existing image with another one. It does not allow you to edit the image itself. To edit an image element:
1. Select the image element you want to edit. The Edit function works only when you select a page element first.
2. Select **Edit** and then **Image** from the right-click menu. The **Edit Image** dialog opens, displaying the image you want to change on the left.
1. Click **Browse** and locate the image you want to use as a replacement and click **Open**, or type a URL into the Image URL field. The new image appears on the right side of the page.
2. Select a Page Category from the **Apply To** drop-down. Page Categories allow you to assign changes to more than one page at a time and are defined using only the Triggers that are associated with pages. See [Understanding Page Categories](https://doc.sitespect.com/knowledge/understanding-page-categories?hsLang=en) for more information.
3. Click **Save** to save your changes.
#### Editing HTML
The Edit HTML feature allows you to edit content within an HTML window. To use the Edit HTML feature:
1. Select the page element you want to edit. The Edit function works only when you select a page element first.
2. Select **Edit **and then **HTML** from the right-click menu. The Edit HTML dialog opens, displaying the HTML of the page element you selected.
3. Select a [Page Category](https://doc.sitespect.com/knowledge/understanding-page-categories?hsLang=en) from the drop-down. Page Categories allow you to assign changes to more than one page at a time. See [Understanding Page Categories](https://doc.sitespect.com/knowledge/understanding-page-categories?hsLang=en) for more information.
4. Click **Save** to save your changes.
#### Hiding/Unhiding Page Elements
The Visual Editor allows you to Hide and Unhide page elements to see how the page will appear without the element. To hide a page element:
1. Right-click on the page element.
2. Select **Hide** from the menu. The **Hide Element** dialog opens.
3. Select how you want to hide the element:
- **Hide:** The page element is hidden, but still occupies space on the page.
- **Remove:** The page element is hidden and the page is displayed as if the element is not there.
4. Select a **Page Category** from the **Apply To** drop-down. See [Understanding Page Categories](https://doc.sitespect.com/knowledge/understanding-page-categories?hsLang=en) for more information.
5. Click **Apply**. The page element is hidden. In addition, when you hide page elements, the Unhide menu appears along the top of the Visual Editor. The Unhide menu contains a list of all the page elements that you've hidden.
To unhide a page element, select it from the Unhide menu.
#### Reordering an Item within a Group
The Visual Editor allows you to reorder the items within a specific group such as a menu or a banner. To reorder:
1. Right click on the page where you want to add the element.
2. Select **Reorder** from the pop-up menu. When you do, a palette appears allowing you to click and drag the selected element. The palette contains a setting called **Auto-select best element** that is selected by default. This feature tells SiteSpect to automatically select the element that it thinks is best for reordering. Uncheck the box to tell SiteSpect to be less restrictive and to allow you more control over what is selected.
3. Drag the selected element to its new location.
4. Select a **Page Category** from the drop-down.
5. Click **Done** when you're finished.
#### Adding a Page Element
The Visual Editor allows you to add a page element to your pages. To add a page element:
1. Right click on the page where you want to add the element.
2. Select **Add** from the pop-up menu.
3. Select a **Type** from the drop-down: Image, Text, HTML.
4. Select whether the new element should be placed before or after the current element.
5. Click **Next**. When you do, the Visual Editor displays a dialog that allows you to add the element.
6. Complete the settings for the new element, select a **Page Category** from the drop-down, and click **Apply**.
#### Tracking Clicks
The Visual Editor allows you to track clicks on certain items on the page. To track clicks:
1. Right-click on the item you want to track.
2. Select **Track Clicks** from the pop-up menu. The **Track Clicks** dialog opens.
3. Enter a **Metric Name**. SiteSpect will create the Metric when you click Apply.
4. Select a **Page Category** from the drop-down.
5. Click **Apply**. The Metric keeps track of the number of clicks on the page element.
### Click Element
When you are working in the Visual Editor, clicking on items doesn't cause the expected behavior because you are editing the page. As such, the Visual Editor allows you to simulate a visitor click. To do so, right-click on the page element you want to click on and select **Click Element** from the pop-up menu.
#### Saving Your Changes
Once you are done defining changes:
1. Click **Save** in the upper right corner of the page.
2. Click **Exit** to leave the Visual Editor.
**Note:** If you have created a Factor and Variation using the Visual Editor, you can edit it using the standard method of entering changes using the form pages. However, manually updating a Factor and Variation may prevent you from using the Visual Editor to edit the Factor and Variation in the future.
In particular, updating attributes set by the Visual Editor should be avoided, while other attributes such as CSS properties may be edited manually:
- [Get Started](https://doc.sitespect.com/knowledge/get-started?hsLang=en#main-content)
- [SiteSpect Support](https://doc.sitespect.com/knowledge/get-started?hsLang=en#sitespect-support)
- [Overview Information](https://doc.sitespect.com/knowledge/get-started?hsLang=en#overview-information)
- [Intro to SiteSpect](https://doc.sitespect.com/knowledge/get-started?hsLang=en#intro-to-sitespect)
- [Account Setup](https://doc.sitespect.com/knowledge/get-started?hsLang=en#account-setup)
- [Artificial Intelligence](https://doc.sitespect.com/knowledge/get-started?hsLang=en#artificial-intelligence)
- [Dashboard](https://doc.sitespect.com/knowledge/dashboard?hsLang=en)
- [Build](https://doc.sitespect.com/knowledge/build?hsLang=en#main-content)
- [Setting Up a Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#setting-up-a-campaign)
- [Create a Client-Side Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#create-a-client-side-campaign)
- [Create a Server-Side Campaign](https://doc.sitespect.com/knowledge/build?hsLang=en#create-a-server-side-campaign)
- [Metrics](https://doc.sitespect.com/knowledge/build?hsLang=en#metrics)
- [Audiences](https://doc.sitespect.com/knowledge/build?hsLang=en#audiences)
- [Triggers](https://doc.sitespect.com/knowledge/build?hsLang=en#triggers)
- [Variations](https://doc.sitespect.com/knowledge/build?hsLang=en#variations)
- [Traffic Management](https://doc.sitespect.com/knowledge/build?hsLang=en#traffic-management)
- [Preview](https://doc.sitespect.com/knowledge/build?hsLang=en#preview)
- [Factors](https://doc.sitespect.com/knowledge/build?hsLang=en#factors)
- [Advanced Settings](https://doc.sitespect.com/knowledge/build?hsLang=en#advanced-settings)
- [Omnichannel](https://doc.sitespect.com/knowledge/build?hsLang=en#omnichannel)
- [Regular Expressions (Regex)](https://doc.sitespect.com/knowledge/build?hsLang=en#regular-expressions-regex)
- [WATTS](https://doc.sitespect.com/knowledge/build?hsLang=en#watts)
- [Recommendations](https://doc.sitespect.com/knowledge/build?hsLang=en#recommendations)
- [Monitor](https://doc.sitespect.com/knowledge/monitor?hsLang=en)
- [Analyze](https://doc.sitespect.com/knowledge/analyze?hsLang=en#main-content)
- [Data Export and Integration](https://doc.sitespect.com/knowledge/analyze?hsLang=en#data-export-and-integration)
- [SiteSpect Reports](https://doc.sitespect.com/knowledge/analyze?hsLang=en#sitespect-reports)
- [Site](https://doc.sitespect.com/knowledge/site?hsLang=en#main-content)
- [Tools](https://doc.sitespect.com/knowledge/site?hsLang=en#tools)
- [Configuration](https://doc.sitespect.com/knowledge/site?hsLang=en#configuration)
- [Developers](https://doc.sitespect.com/knowledge/developers?hsLang=en#main-content)
- [API Reference](https://doc.sitespect.com/knowledge/developers?hsLang=en#api-reference)
- [Code Samples](https://doc.sitespect.com/knowledge/developers?hsLang=en#code-samples)
- [Tips & Tricks](https://doc.sitespect.com/knowledge/developers?hsLang=en#tips-tricks)
- [Mobile](https://doc.sitespect.com/knowledge/mobile?hsLang=en)
- [Implementation, Deployment, and Security](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#main-content)
- [How does SiteSpect work with CDNs?](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#how-does-sitespect-work-with-cdns)
- [Single Tenant Implementations](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#single-tenant-implementations)
- [Security Features](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#security-features)
- [Deployment and Implementation Overview](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#deployment-and-implementation-overview)
- [SiteSpect Engine & Admin API](https://doc.sitespect.com/knowledge/implementation-deployment-and-security?hsLang=en#sitespect-engine-admin-api)
- [Third-Party Integration](https://doc.sitespect.com/knowledge/third-party-integration?hsLang=en#main-content)
- [Google](https://doc.sitespect.com/knowledge/third-party-integration?hsLang=en#google)
- [Zuko](https://doc.sitespect.com/knowledge/third-party-integration?hsLang=en#zuko)
- [Troubleshooting](https://doc.sitespect.com/knowledge/troubleshooting?hsLang=en)
- [Releases](https://doc.sitespect.com/knowledge/releases?hsLang=en#main-content)
- [Superfresh](https://doc.sitespect.com/knowledge/releases?hsLang=en#superfresh)
- [Feedback](https://doc.sitespect.com/knowledge/feedback?hsLang=en)
- [A/B Testing](https://www.sitespect.com/testing-and-experimentation/)
- [Personalization](https://www.sitespect.com/personalization-targeting/)
- [Recommendations](https://www.sitespect.com/recommendations/)
[](http://monetate.com)
[mailto:email@email.com](mailto:email@email.com)
Copyright © 2026, Monetate