One of the challenges with Modern pages is elements on the page can have dynamic IDs. This means an element can have a different ID every time the page is refreshed, and if you have a walkthrough step tagged to that element, your walkthrough will skip that step. We have expanded what elements can be selected and how they are selected, thereby improving the reliability of the element selected. These instructions will introduce you to the new interface and the improved element selector functionality.
In the walkthrough editor, the element selector has a new look:
Clicking Select element will minimize the editor window and display a new element selector control in the lower right corner of your browser window:
The Use It!, Clear, Toggle Position, and Help buttons have not changed and have the same functionality.
Moving the cursor around the page to highlight and select the different page elements is still the same experience. Once you select an element you can then fine-tune your selection in various ways:
- Narrow selection: Clicking Narrow selection will step you down through the child elements of the selected element. When there are no more child elements, you will see a message that you “Cannot narrow further.”
- Expand selection: Expand selection will do the opposite of Narrow selection; clicking Expand selection will step you up through the parent elements of the initial selected element. When you are at the top parent level you will see a message that you “Cannot expand further.”
- Ignore Text: By default Ignore Text is selected. If this box is unchecked, you can use text, such as a document name or page title, to help identify the selected element.
- Ignore Position: By default Ignore Position is selected. If this box is unchecked, you can use the position of an element on the page to help identify the selected element.
- Use Custom jQuery: By default this is unchecked. If you check this box there is an extra dialogue displayed: