How to: assign elements (the Elements panel)
With Inline Manual, you can assign steps to a particular element or set of elements within your application, like a button, a form field, or even a link inside your menu. Assigned steps are interactive and can have multiple triggers and end-points. Use this feature to emphasize the particular part of your page or direct users to perform the desired action. By default when you create a step, it is not assigned to any element of your application - it appears in the middle of the screen.
To quickly assign one element, use the Step Options Panel in the Authoring tool. Here we describe in details all functionalities of the Step Options Panel. If you want to assign more elements to one step, you need to use the Elements panel. In the Elements panel, you add and manage all elements assigned to a step.
In this article, we describe all options available in the Elements panel, so you can use it to the maximum.
The Elements panel appears in the Authoring tool when you create and edit steps of your walkthroughs and tooltips. In this article, we will start from this point and won’t include the instruction on how to build a walkthrough or a tooltip as such. To learn how to create a walkthrough, please check this article and to learn how to create a tooltip, go here.
To open the Elements panel:
- In the Authoring tool, while you’re editing or adding a walkthrough or a tooltip, select a step from a list of steps or click “+” to create a new one.
- Scroll down to the Elements panel and expand the tab. Now, you see the Elements panel.
With the Elements panel, you manage all assignments. In this part of the article, we will outline the functions of the Elements panel and show you how to use them.
Let’s start with assigning elements:
- To assign a specific element to a step, first, click “+” in the Elements panel.
- Next, click the Assign button and choose to which element of your application you want to point at with this step.
When there is already an assigned element, the Assign button will change to Re-assign button. It allows you to re-assign the element.
If you want to add another assignment to the same step, just follow again the above instructions. You can assign multiple elements to one step.
Note that some applications might make selecting an element impossible. There also may be cases that the element you want to assign is in a drop down or collapsed menu. To assign an element form a drop-down menu, hold down the Shift button on your keyboard to suspend selection until you get to the correct element.
There may be also instances that the exact element can't be assigned to due to some issue e.g. getting redirected to a different page or performing an action. In such case, hold down S key on your keyboard to select that element.
- Now, if you want to change the position of the step in relation to the selected element, you need to do in the Step Options Panel. Open the Step Options Panel and select the position of the popover in the relation to the element. By default, it is positioned at the top.
- To highlight the assigned element, click the eye icon next to the re-assign button.
- It will display the selected element in a green frame.
Providing a selector:
Selector defines the assigned element from your application. When the assign button is used, a selector is automatically generated. But you can also provide it manually.
- Next, provide a selector for your element.
Expanding/reducing the area:
- To expand or reduce the area of the selected element, click the expansion or reduction icons.
- It will change the area around the selected element.
If you have any issues with properly assigning an element, please take a look at this article.
Removing the assignment:
- To delete the assignment, click the “x”.
Point at first:
By default, when you have multiple elements selected, the popover will create a bounding box around the elements and position itself based on the position settings. With “point at first” feature, you will have the ability to choose what element your popover will point at. Read this article to learn more.
Need some inspiration? Take a look at our blog post in which we present 20+ inspiring onboarding examples.