Using the visual editor is the easiest way to make simple changes to any of your pages. You can amend text and images as well as hiding and removing content.
The visual editor is capable of delivering small changes. E.g. changing text, the style of the text or an image is easily achievable however changing page layouts or for more dynamic changes you need to consider using the advanced code editor, where you can build more complex transformations using JS and CSS. If you need help understanding which is best to use please use this guide.
Things not covered here
If you are looking for information on using widgets or surveys as part of the visual editor they are covered here.
If you are looking for information on tracking conversions in the visual editor then this can be found here.
Accessing the visual editor
You will access the visual editor once you have completed the 'Create' form and more information on how to access and complete this can be found here.
The final step of the create form is to launch the visual editor and confirm the page/URL you want to build the experience on.
To use the visual editor you will need to have our Chrome extension added and enabled. You can find it here.
Clicking here opens the field to enter the URL you wish to make changes to. Simply enter the page and click 'Start'
Please note:
If you have created a new location while filling in the form this field will be blank.
If you have used an existing location which does not have an editor URL it will be also be blank.
Find out more about locations and editor URL's here.
Once you have clicked on start, it will open the page you input as well as the WTO editing toolbar. You are now ready to start building your experience.
Be aware, the editing tools persist while navigating within other chrome tabs on the same browser session. This is by design and means you can return to continue editing without opening/closing each time.
If you close the editing tools you will need to return to the 'Create' form and re-launch the visual editor.
Browse mode
Browse mode allows us to engage with the selected page to get it into a state for us to make our changes. This may be to navigate to somewhere behind a login/paywall or it may be to open dynamic content only available once the page has been interacted with.
Please note, changes made are not visible in browse mode.
This behaviour is intentional. When you enter Browse Mode, all changes are reverted, allowing you to interact with the page in its original state. This approach offers key advantages:
there's no need to manually dismiss widgets or popups
the transition between modes remains clear
Switching on/off browse mode can be done from the editing tools.
Building an experience in the visual editor
Building an experience in the visual editor is simple and there are lots of options available to you.
By default the visual editor opens in a desktop view. To change this to mobile, or other devices, you will need to hit the Windows key and the left arrow. This adjusts your screen into half window and shows the page in mobile view. As long as you define the test entry segment as mobile these changes will be reflected as part of the experience for mobile users only.
More information on how to set this up can be found here.
Editing content
Editing content allows you to make changes to existing elements on the page itself. To edit an element click on it within the page and it will be highlighted and the element name/id shown in the editing toolbar.
From here it is up to you what you want to change and the toolbar offers different options. Lets cover each of those below.
Content
Editing the content asks the page what content is within the selected element and displays it in the text box. You are able to change the font, size, placement and much more from here. You will need to click 'Save' for your changes to be reflected.
In this example the original text chosen above has been change to 'Webtrends Optimise ROCKS!' and once saved the change instantly reflects on the page.
Styles
Within styles you can change the colour, margin, border and padding. You can also select to only show these changes on hover. You will need to click 'Save' for your changes to be reflected.
In this example the new text 'Webtrends Optimise ROCKS!' has been changed to green.
HTML
The HTML option allows us to change the raw HTML relating to the element itself.
In this example the 'Webtrends Optimise ROCKS!' text has been changed to align to the right.
Attributes - images/links
Within attributes is where you will find the option to change images and links. In the example below we have selected the 'Free trial' button.
Be aware, you will need to have selected an image, for the option to change the image, to be unlocked.
If you select a link, the link HREF will be automatically populated.
To change the link, we can simply replace the populated link with our new link and this will now direct users who click, and fall into this variant, to the new destination.
If we select an image we can now see the option to change both the source and the option to use assets. If selected this will open your asset library below.
Using assets will require these to be uploaded to the asset library and more information on how to do this can be found here.
Insert
You are able to insert content by clicking on a element and selecting where to insert as well as what type of content to insert.
You can choose from the following placements:
Before - before the chosen element
After - after the chosen element
Beginning (inside) - within the same element but before the existing content
Ending (inside) - within the same element but after the existing content
You can also choose from the following element types to insert:
div – Generic block container
span – Generic inline container
p – Paragraph text
a – Hyperlink
h1–h6 – Headings (h1 = biggest, h6 = smallest)
img – Image
ul – Unordered list (bullets)
ol – Ordered list (numbers)
li – List item (used inside
ulorol)
In this example a new paragraph has been added before the existing chosen element and I can now see this available for me to edit on the page.
Move Element
Moving elements requires us to select an element and choose where we want to place it in its new position.
When moving content within the visual editor, its very important thorough QA and testing is carried out. The move function can fall foul to various ways in which your page renders.
You will have chosen an element to move and you will then select its new position by clicking on another element on the page. At this point you can specify how it will show in comparison to the newly selected element.
Options available are:
Insert before target
Insert after target
In this example the newly added text 'Replace this test with your own content' has been moved from above the title to under the final paragraph by clicking on the final paragraph and selecting 'Insert after target'.
Choosing this configuration and clicking save makes these changes to our newly added text show as below.
Triggers
Triggers allow us to do things on behalf of the user. We can select to focus or click on an element and this can be user for a range of things.
Click - this will essentially automate a click on the element you have selected.
Focus - this will focus the users cursor into the selected element.
In this example we have selected the 'Free trial' button and chosen the 'Focus' trigger and this means when a user lands on the page their cursor will be placed on this button automatically.
CSS
The CSS option allows you to add your own custom CSS to a selected element. You can add whatever CSS is required here and it will apply it to the selected element.
Its as simple as adding the new CSS and clicking on apply. In this example we are taking this text and making it bold by using the selector and some basic CSS. Once 'Save' has been clicked the change is applied.
Hiding and removing elements
You can hide or remove elements when using the visual editor and this can be done by using the 'Visibility' option in the editing tools.
Hiding content - this essentially makes the element invisible on the page
Removing content - this removes the selected element and the layout will change to reflect that element no longer been there
To remove or hide content, select the element on the page as before, and select either 'Hide' or 'Remove'.
Once selected, click save and in this example we have hidden this piece of text from the hero banner.
The change log
Every change you make will be recorded inside the log and this can be accessed via the editing tools.
Please note conversions are covered in another document and can be found here.
Clicking to remove changes from here instantly reflects on the page.
Scope (multi-page testing)
This is one of the more complex areas of the visual editor and requires an example to fully understand the capability.
Lets say we have a location which consists of several landing pages and we want to apply different changes to each of those pages as part of the same experience.
Changing the scope, prior to making our edits, will allow us to navigate to each page in the location (using browse mode), make our changes and then save them. In this example we can then create a test which runs in totality across all pages in the location but deploys different changes to each of the pages as I specify below.
Lets break it down and use the example where we have created a location which includes these 6 pages associated with 'Solutions'.
As part of this experience I want to make an individual change on each of these pages and not a common change across all of them.
I will navigate to 'Scope' and choose 'Custom scope'. I will then need to specify the exact URL, or multiple URL's, where I want this change to take effect.
There is the option to use regular expressions here and more info on how to do this as part of creating locations can be found here.
I will then navigate back to 'Editor' and make the desired changes and save them. By doing this I am telling WTO that even though there are several pages in this location I only want to changes to take effect on the specified URL('s).
You will then repeat this process for all the changes you wish to make and save the experience, return to the UI and continue with the experience creation.
Visual editor FAQ's
Why isn’t my new image saving/changing in the variant?
Why isn’t my new image saving/changing in the variant?
When replacing an image using HTML in the Visual Editor, simply updating the src attribute isn’t enough. Many images on modern websites use a srcset, which defines multiple image options for different screen sizes or devices.
To update the image correctly:
Click on the image in the Visual Editor.
Click “Attributes” in the side panel.
Update the
srcvalue to your new image URL.Press Save.
This ensures both src and srcset are properly updated so your image appears on the live variant.
Why can’t I change my CTA text unless I use HTML?
Why can’t I change my CTA text unless I use HTML?
If you’re editing a button (like a "Go" or "Submit" CTA), it's often built as an <input> element, which doesn't have regular text content — it uses a value attribute` instead.
Because of this:
The Content Editor won’t affect it.
You need to use the HTML editor and update the
valueattribute manually.
Example:
<input type="submit" value="Go">
Change "Go" to your new text here.
Why aren’t my changes applying to all the same buttons on the page?
Why aren’t my changes applying to all the same buttons on the page?
The Visual Editor’s “Edit Content” tool only changes one element at a time, even if others look identical.
Here’s how it works:
Styles (like color or font) can be applied to multiple elements at once.
Text/content changes apply only to one specific element.
To change multiple buttons at once:
Use the Advanced Editor (code view) to write a small script.
This gives you full control over repeating changes across similar elements.
This limitation exists because the Visual Editor needs to be able to undo your changes cleanly — and bulk content changes are hard to track safely.