Support Center

How to select your elements with precision?

Last Updated: Apr 11, 2017 10:41AM WEST
You have 3 options to select elements on your website while creating your guides (REC Mode):

 

Automatic Selection (Point & Click)

The simplest but effective way of selecting elements is to do it automatically. Simply choose an element and click on it to attach steps.  





If you want to optimize the precision with which you select the elements or if an element was identified incorrectly, there’re always 2 other ways to improve selection:
 

Manual Re-selection (HTML Selector)


Track a web element using HTML selectors. These selectors are used to recognize HTML elements on web pages onto which you want to add a guide step. This option allows a more precise selection of your website's elements. 

Note: “Element” is another way of describing an item on your page that you want to change. The “selector” is the code the website uses to describe that element and identify it in the web page code.

 

1. Mouse over the web page and select the element to create a step.

 

2. Click on the icon “Change Page Element”.


3. Choose Re-Select manually.

 
4. Edit HTML selector


5. Check to finalize the process.
 
 

Here are some steps to find the right HTML selector: 
 

1. Mouseover the cursor over the element of your website you want to target. 
 
2. Right-click on the element, click Inspect or Inspect Element if you’re using Google Chrome or Firefox.  In case you’re using Safari, to enable the Web Inspector you have to go to Preferences, click Advanced, then select Show Develop menu in the menu bar. To examine a specific element you can use the same method as Google Chrome or Firefox.
 
3. Elements panel should be opened by default and the element itself highlights.
 
4. When you see the element area highlighted, click your mouse once to “freeze” the magnifying action, and you will be able to use the mouse freely without losing the selector. 
 
5. Click the right mouse button on the Web Inspector and go to Copy > Copy Selector.

 

6. Now, open the box Re-Select manually and select all current CSS selector. Delete it and paste the new element Selector. The step element will change automatically.

 
019f9d71182f0b622cee9d4050fb5d42@helppier.desk-mail.com
https://cdn.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete