🎥 [Video tutorial] Visual Editor: Contextual menu

Several settings that apply to your elements are available so you can modify and create your variations with the visual editor. To modify an element, click on it.

Change image: if the selected element is an image, this option lets you replace it. You can upload an image from your computer or give the path of an image (external or internal).

Edit style: edit the style of the selected element (position, layout, text, color, border...).

Edit text: edit the textual content of selected element

Edit on the fly: edit your text directly without using a modification module. Helpful if you try to edit elements with pictograms or similar placed in pseudo-elements.

Edit HTML: edit the HTML code of the selected element and its children elements

By editing an element’s HTML code, you make it entirely static: we apply the HTML code as it is specified in the editing window. But if some elements of the source code are dynamically generated on the server side, they will be overwritten by this change.

So you must always verify that the element to which you are applying the Edit HTML function does not contain any dynamic elements. As a general rule, we recommend that you not select too wide a range of elements, such as a <div> tag, because there is a higher chance that it includes a dynamic element. Reduce the function’s field of application by selecting a child tag with the Select child function.

Edit link: if the selected element is a link, you can edit where it points to

Edit attributes: Change one or many existing attributes

Hide element: this option enables you to hide the selected block and mask the content it contains.

Hide content: this feature retains the block but hides its content.

Hide similar: hide elements of the same "class" as the selected element. This option masks the element and its content.

Sort: reorders your menu items, divs, images...

Add image: add an image in your variation with one of the three options offered: from your computer, from a URL, or from the AB Tasty images library.

Add paragraph: add a text into a <p> element.

Add HTML: add a <div> element with an generated-value id. You can add HTML code inside this div.

Add link: add an <a> element over the selected element. Not possible on existing links.

Copy: it copies the selected element with all its attributes and children and let the selected element in place.

Cut: it copies the selected element with all its attributes and children and removes the selected element.

Paste before: it pastes the previously selected element with all its attributes and children and places it before the selected element.

Paste here: it pastes the previously selected element with all its attributes and children and places it at the beginning of the selected element.

Paste after: it pastes the previously selected element with all its attributes and children and places it after the selected element.

Select parent / Select children: allows you to adjust the selector to not easily selectable element, due to affordance, visibility, or z-index value.

Select similar: if a class is attached to the element you have selected, you can select all the same-class elements at once. Handy when you want to apply to identical items (not just a single one).

Element JavaScript: allows you to add a JavaScript code which will be executed when the selected element is present in the DOM.

Track clicks: add a tracker to measure clicks, mousedowns or submits on a selected element.