---
title: "User tour step targets"
slug: "user-tour-step-targets"
tags: ["Developer", "Explainer", "How-to", "Site Administrator", "Totara Platform"]
updated: 2025-07-22T10:52:18Z
published: 2025-07-22T11:18:12Z
canonical: "totara.help/user-tour-step-targets"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://totara.help/llms.txt
> Use this file to discover all available pages before exploring further.

# User tour step targets

When [creating a user tour](https://totara.help/19/docs/add-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 ( ![](https://cdn.document360.io/a007399b-031e-436b-999a-528240e16f58/Images/Documentation/Snag_284e3b1a.png?sv=2026-02-06&spr=https&st=2026-11-01T15%3A56%3A12Z&se=2026-11-01T16%3A56%3A12Z&sr=c&sp=r&sig=yGUJ2NNZjZoSAdzwaJCOJzgqfBFSra1gGNW%2BcDQwP%2Bs%3D) ) 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](https://cdn.document360.io/a007399b-031e-436b-999a-528240e16f58/Images/Documentation/Snag_2822a737.png?sv=2026-02-06&spr=https&st=2026-11-01T15%3A56%3A12Z&se=2026-11-01T16%3A56%3A12Z&sr=c&sp=r&sig=yGUJ2NNZjZoSAdzwaJCOJzgqfBFSra1gGNW%2BcDQwP%2Bs%3D)
5. With the `id=` or `class=` code selected either:

![GIF showing selection of HTML, and right clicking to copy selector](https://cdn.document360.io/a007399b-031e-436b-999a-528240e16f58/Images/Documentation/2025-05-21_15-24-47.gif?sv=2026-02-06&spr=https&st=2026-11-01T15%3A56%3A12Z&se=2026-11-01T16%3A56%3A12Z&sr=c&sp=r&sig=yGUJ2NNZjZoSAdzwaJCOJzgqfBFSra1gGNW%2BcDQwP%2Bs%3D)
  1. Click the ellipsis icon ( ![](https://cdn.document360.io/a007399b-031e-436b-999a-528240e16f58/Images/Documentation/Snag_284ce0e9.png?sv=2026-02-06&spr=https&st=2026-11-01T15%3A56%3A12Z&se=2026-11-01T16%3A56%3A12Z&sr=c&sp=r&sig=yGUJ2NNZjZoSAdzwaJCOJzgqfBFSra1gGNW%2BcDQwP%2Bs%3D) ) to the right of the element, then *Copy > Copy selector*
  2. Right click on the selected element and choose *Copy > 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**

- [User tour settings](https://totara.help/19/docs/user-tour-settings)
- [Add a user tour](https://totara.help/19/docs/add-a-user-tour)

Join the [Totara Community](https://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](https://www.gnu.org/licenses/licenses.html#GPL) and continues to be available under GPLv3. All other content is the sole copyright of Totara Learning Solutions.