1. Help Center
  2. Build
  3. Create a Client-Side Campaign

Browse DOM Tree Using the Visual Editor

SiteSpect's Visual Editor allows you to make many changes to your webpages to update its visual appearance. It is possible to browse the DOM tree within the page using the Visual Editors Select Nearby option to ensure you can select the right element to make your changes against.

1) Open your site in SiteSpect's Visual Editor.

2) Navigate to the page(s) that contain the element you wish to modify using Go To Page, Preview mode or right click 'Click Element' for the Visual Editor.

3) Hover over the element you want and select it with a left click. Once selected the element will have an orange border. A right click within this border will present you with options to browse the DOM tree.

4) Select the Edit > Select Nearby option.

Select Nearby - selection

5) Once clicked you'll be provided with a list of the parent and child elements surrounding your selected zone.

Select Nearby - selection 2

6) You can hover over each parent or child in the Select Nearby navigation to see which element this would select via the orange dashed border. Continue to hover over the elements in the navigation until you have the content you need within the dashed zone.

Select Nearby - selection 3

7) Clicking that element in the Select Nearby navigation will turn the orange dashed line into a complete border.

Select Nearby - selection 4

8) Right click the zones orange tab to select the type of option you require to make a change to the element.

Select Nearby - selection 5