🎥 Visual Editor: Contextual menu

In order to make modifications on your page, you can click on the elements and the contextual menu will adapt depending on the nature of the element.

Edit

• Replace the 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 element attributes: Change existing attributes or add some new.

---

Add

• Add an image: adds an <img> element from your computer or from an internal/external URL.
• Add a text: adds a text into a <div> element. You can then adapt it via the richtext toolbar.
• Add HTML: adds a <div> element with a generated id. You can add HTML code inside this <div>.
• Add a link: adds an <a> element over the selected element. Not possible on existing links.

---

Hide

• Hide the element: this option enables you to hide the selected element.
• Hide the content of the element: this feature keeps the element and only hides its content.
• Hide same class elements: hide elements of the same "class" as the selected element. This option masks the elements and their respective content.

---

Reorder

• Reorder the elements: reorders your menu items, divs, images... You can only reorder elements inside the parent container of a selected element. In order to save it, don't forget to click on "Validate" in the dedicated modal.

---

Copy, Cut & Paste

You will have to execute this in two steps: first copy or cut and then place it by pasting the element in the clipboard (before, after or at the end of the newly selected element).

• 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 (at the end): 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.

---

Selection

• Select a parent element / Select a child element: allows you to adjust the selector to a not easily selectable element, due to affordance, visibility, or z-index value.
• Select same class elements: 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 a modification to a lot of identical items without having to do it one by one.

---

JavaScript

• Add a tracker: add a tracker to measure clicks, mousedowns or submits on a selected elements. Submit event tracker must added onto a <form> element, not on a submit-type <input>.
• Element JavaScript: allows you to add a JavaScript code which will be executed when the selected element is present in the DOM.