How to create and edit content in the visual editor
Learn to use the WYSIWYG/Contextual Editor for real-time webpage edits without coding skills. It simplifies A/B testing, personalizations, and UI modifications.
Last updated
Was this helpful?
Learn to use the WYSIWYG/Contextual Editor for real-time webpage edits without coding skills. It simplifies A/B testing, personalizations, and UI modifications.
Last updated
Was this helpful?
The WYSIWYG/Contextual Editor (What You See Is What You Get) enables you to play with your webpage and make changes on the fly by clicking on the different elements.
The contextual editor enables you to virtually write new lines of code, especially CSS (to modify UI parameters such as the margins, colors, etc.) without any coding knowledge, just by clicking on elements and selecting the modification you want to apply from a list.
For a complete discovery about the visual editor, please refer to this .
To use the visual editor, you need:
to be on the campaign flow of an AB Test, a Personalization or a patch
to have pasted a sample URL in the step 1 of the flow Main Information
to click on the element you want to edit/ remove etc. to make the contextual editor appear:
The element appears as a title of the block (in this example, “h1”), so every change you make here will affect the title you selected.
In this specific article, we are going to review all the possible modifications you can perform with the visual editor.
In the Edit section, you can edit the following:
Style: all the CSS attributes (colors, borders, z-index, margins etc.)
Text
Element attributes
Depending on the element you’ve selected, some options may not be available in the list. For example, Edit Text won’t appear if you have selected an image - tag <img> - and Edit Link won’t be available if the selected element is not a <a> tag. Each tag will trigger only those editing options compatible with its type.
The configuration pop-in offers you the option to edit the style the text, color, border, layout, and position of your selected element.
⭐️ Tip 1: Pay attention to the element you’re working on. Sometimes you have selected an element whose CSS configuration has inherited a higher parent in the code. To make your changes visible, you must select the correct element at the beginning, and use the select parent or children element option.
⭐️ Tip 2: If you want to change the overall look of an element (background color, font color and size, border style and color, etc.), do it all at once before clicking on Save Changes to embed all the modifications relative to the button in one single line of modification.
Click on Active Changes in the right-hand panel to retrieve all your modifications and access your history.
All customizable options in the Edit Style pop-in are in English, even if your language choice in the platform is not. We’ve kept the CSS English vocabulary to optimize the understanding of each parameter.
While editing, click on save, and your modifications will be directly visible in the editor.
The original text will appear in a modal. You can directly edit it and make standard CSS changes in this modal, too.
When you finish editing, click on save, and your modifications will be visible in the editor.
The Edit HTML option in the editor enables you to edit the HTML of a selected element on your page in a code console.
When selecting the element you want to edit, you can refine your selection by using the Select Parent or Select Child options.
In the code console, the HTML content for the selected element is displayed.
You can modify it as desired: Add, remove or edit HTML content.
Heads up ⚡: Your web page may be based on an HTML template that loads dynamic information. Using this option will replace the former HTML with the one you have edited for each page that matches both the targeting and the selector for your modification.
For example, if you edit the product information (title, size, color, etc.) of a product page, the edited HTML will be replaced for every product page that has the same targeting and selector.
As a result, many different products will have the same title, size, and color (depending on what you edited) when they shouldn’t.
Moreover, JavaScript events that may have been added to the element(s) you edited for your product may have disappeared, as the element(s) they were attached to have been modified, replaced by the new HTML content.
We recommend using the Edit HTML option in the following cases:
For static pages such as homepages, or static parts of your website such as the navigation or the footer.
For the smallest HTML parts, as you can avoid side effects (such as overwriting templates or deleting JavaScript events) and any negative impacts on the tag weight.
For campaigns that target a small part of your traffic, such as one language or one device, to avoid showing your visitors content that isn’t adapted to them.
There are less sensitive options, which can be used in the following use cases:
To add new HTML to your page 👉 Use the Add Image, Add Text or Add HTML options in the Visual Editor.
To remove existing HTML from your page 👉 Use the Hide Element, Hide the content of the element options in the Visual Editor.
To edit existing HTML on your page 👉 Use the Edit Style, Edit Text, Edit Link, Edit Attributes, Replace Image options in the Visual Editor.
In terms of performance, it is preferable to make edits through other options rather than solely relying on the Edit HTML option to make edits (regarding tag weight and your website's rendering) to protect your website’s functionalities and guarantee templates with correct content.
Good to know💡 : Don’t forget to QA your campaign for several pages of your website on different devices and browsers (especially if your campaign should be displayed across devices), and in different environments (e.g. logged in/not logged in) to make sure you have covered all possible scenarios.
This option will enable you to modify element attributes (detected in the HTML code), delete some attributes (by clicking on the cross), or add new ones.
While editing, click on Save Changes, then your modifications will be visible in the editor.
The Add option will enable you to enrich your HTML by adding an element that didn’t exist on the original page.
In the Add section, you can add the following:
an image
a block of text
some HTML
a link
You can either:
select an asset from you library
You can add a text element by filling it directly in the following pop-in.
While editing, click on Save Changes, then your modifications will be visible in the editor.
You can add an HTML snippet directly in the following pop-in. AB Tasty creates a parent tag with its own parameter “ID” to help you. This is a good way to add a pre-coded element to your page. You can also declare the selector in which the new tag will be embedded.
While editing, click on Save, then your modifications will be visible in the editor.
You can add a link directly to one element you want to make clickable. Enter the URL in the field and activate the Open a New Tab option if desired.
This option lets you customize the CSS and/or the JS you want to execute in your variation/page/experience. This is an alternative to WYSIWYG modifications, particularly for more advanced campaigns.
It can be useful to refine a change you’ve made with the WYSIWYG editor, or help you to more deeply customize the widgets.
There are three sub-options in the Hide option:
Hide the elemen
This hides the whole element (content + element), meaning that the element that follows in the HTML will automatically replace the hidden element(s) (for example, a tab in a navigation bar, an item in a list, etc.)
Hide the content of the element
This only hides the content of the element, leaving an empty space instead of replacing it with the element that follows.
Hide same class elements
This option is useful if you want to hide a specific element that appears on the page several times.
This option lets you play with a drag and drop functionality to reorder elements that share the same CSS parameters and are all embedded in a master parent element.
For example, reordering items in a list or tabs in a navigation bar.
Select one element of a list, click on Reorder elements: a small popin appears (you can move it on the page). Drag your element at its new placement in the list, click on Validate, then your modifications will be visible in the editor. Otherwise click Cancel to go back without saving.
To use this option, first you need to cut or copy an element to add it to your clipboard.
You can paste it where you want, so select the element before or after which you wish to paste the clipboard element. You need to select if you want to paste the element before, at the end, or after the place where you want to paste it.
HTML: direct modification in the HTML can be dangerous. See more details in the following ).
For more information about CSS parameters and how they work regarding each type of tag, please refer to a CSS guide such as .
To learn more about attributes, please refer to a CSS guide such as
You can add an image by uploading your file directly from your . We support .jpg, .png, .svg, .webp and .avif files.
upload a new item to your library, by URL or by droping your image directly in the area from your computer.
While editing, click on Save Changes.
To help you to use the JS code console, you can access this Code Modal shortcuts .
For more information about different types of JavaScript files, please refer to the following .