User tour step targets

Prev Next

When creating a user tour you will need to add each step for which you want to provide information. For each step you can decide which feature to highlight using the settings in the Step target section.

First, select the Target type from the following options:

  • Block: This option allows you to select a block type from the Block dropdown list. If a block of this type is present on the selected page, it will be highlighted.

  • Selector: Highlight part of the page using the selector from an element's CSS code. Find out more in the instructions below.

  • Display in middle of page: This option displays the step as a pop-up in the middle of the page. This can be useful for introductions or general guidance that isn't specific to a block or layout element.

If the element you want to highlight isn't a block, you will need to use the Selector option. These steps will outline how to find the relevant CSS in Google Chrome, but the method may be different in other web browsers. Follow these steps to find the selector:

  1. Navigate to the page containing the element you wish to highlight in Google Chrome.

  2. To open the developer tool either:

    1. Press Ctrl+ Shift + I to open the Developer tools.

    2. Alternatively, open the menu and go to More tools > Developer tools.

    3. Right click on the area of the web page you wish to highlight, and from the menu select Inspect

  3. Click the inspect element icon ( ) or press Ctrl + Shift + C.

  4. On the Totara page, select an element (e.g. the navigation bar or a block) and a section of HTML code will be highlighted in the Elements window of the Developer tools panel.

    Totara webpage with the developer tools pane open highlighting class= code

  5. With the id= or class= code selected either:

    1. Click the ellipsis icon ( ) to the right of the element, then Copy > Copy selector

    2. Right click on the selected element and choose Copy > Copy selector

    GIF showing selection of HTML, and right clicking to copy selector

  6. Paste the selector (which should look something like '#block-totara-featured-links-tile-8896 > div') into the CSS selector field for the user tour step.

  7. Test the user tour to ensure that the step points to the correct element.

Next steps

Join the Totara Community for more resources to help you get the most out of Totara. 


© Copyright 2025 Totara Learning Solutions. All rights reserved. Some content originally obtained via GPLv3 license and continues to be available under GPLv3. All other content is the sole copyright of Totara Learning Solutions.