Sometimes the element that you want to edit on your webpage doesn’t get selected inside the VWO Editor due to various reasons. For example, it could be due to another element in the foreground. But, don’t worry - we have it covered for you. The VWO Editor allows you to navigate to any element with respect to the selected element in one go. This means we have the entire lineage - ancestors, parents, siblings, and children of the element put in a linear view. So, you can access any container or the end element of a container with no effort.
Say you want to edit the href value of the anchor tag of the element in the following HTML code example, but you cannot select it directly inside the VWO Editor because of the image in the foreground.
<a href=”example.com”>
<image src=”abc.png” />
</a>
To overcome this, select the image and from the editing options menu panel, click on the Select Parent (appears in case the element has no child or sibling) / Select Relative Element (appears in case the element has a sibling or a child along with the parent) option to find and select the anchor tag.
The following screenshot shows how a relative element can be selected using the Select Relative Element option.
Alternatively, you can select a relative element using the DOM (Direct Object Model) tree. In simple terms, the DOM tree is the family tree of that selected element. It displays the flow starting from the origin to the very end. This appears just above the bottom panel in the editor, the moment you select an element.
With this, you can select any member from the DOM tree, just by clicking on it. Hovering over each node will highlight the corresponding element on the page. You can also check the branches for a sibling or a child element from the arrows. Click on an arrow to bring forth a list of elements that coexist at that stage. Hover over the elements in the list to see them highlighted on the page. This way, you can easily identify and access the container or the element that you want to work on.
If the lineage is too long to display, the containers in the middle are rolled up under an ellipsis (...) that shows the count of the elements. You can click on it to discover them from the list that pops up. The elements are displayed in order of their sequence from the top.
Thus, accessing an element’s relative is just a matter of a few clicks. Dig in from the tree, identify the required element, click on it, and voilà!