Have you ever looked to create a vertical progress tracker instead of a traditional scrollbar? If not, then browse this article to the end to find out how to create it with Elementor Pro.
But before tackling the main theme, let's first recall what a progress tracker is.
A progress tracker is a progress indicator that informs the user of the progress of an ongoing process, such as installing an application, updating, reading an article, etc. . And there are two types:
- le linear progress tracker
- le circular progress tracker
You can also read: Elementor: How to create an effect card from a portfolio
In this tutorial, we will show you how to insert a vertical progress indicator step by step into a section containing the post archives.
Create a progress tracker
In the tab elements from the tool panelElementor, type in the search bar Progress Tracker. Then drag the widget into a section.
A progress indicator then appears. By default, it is oriented horizontally. But don't worry, you'll see later how to arrange it vertically.
The progress indicator being created, let's make the necessary modifications to obtain the desired result.
See also: Elementor: How to create an effect card from a portfolio
Edit progress tracker content
Here you will choose the type of tracker and what it is related to.
The main settings are:
- typical tracker: here the default value is Horizontal. However when scrolling down the list, the type circulation is also offered to you. Keep the default.
- Progress relative to: in this second setting, choose the value selector. This choice will bring up an additional setting: Selector.
- Selector: This field is intended to receive the identifier of the object to which the tracker will be attached.
Let's select the publications archive since it is the element to which our tracker is attached.
In its settings panel, go to the Advanced tab, then fill in a value in the field CSS ID.
Next, return to the tracker panel and complete the Selector field in the menu contents.
Finally, set the orientation of the progress indicator to the right.
Change the style of the progress tracker
In this step, we will configure the parameters of the progress indicator as well as the background of the latter.
Start by setting the progress indicator.
Read also: Elementor: How to Create an Image Gallery
- Adjustment progress color allows you to choose between a classic progression and a gradient progression. In our example, choose the first option. However whatever the choice, it appears the setting color.
- Set lhas color using the global color palette or the color picker.
- The type of border: you have here six proposals (none, full, double, dotted, dotted, groove). Opt for a full border.
- The width: This is to give thickness to the border of your progress indicator.
- The border radius: By default, the progress indicator looks like a rectangle. By modifying its radius, its extremities become rounded.
Finally, set the runway background settings. You notice that it is almost the same settings that come back. Limit your therefore to those mentioned beforehand.
Change progress tracker advanced options
To complete our work, we will set the following tabs: motion effects, Transform and custom CSS.
Let's start with the tab first Custom CSS. Select it, then insert the following code in the appropriate field. It allows to define the width of the tracker. So, it sets the width to be 50% the height of the window.
Next, rotate the tracker in the vertical direction. To do this, select the submenu Transformer, enable rotation, then type 90 in the blank field. This will rotate our widget 90 degrees giving you the desired vertical position.
To align our widget at the same level as the first posts, apply an offset of 145.
At this level, if we scroll our page, you will see that our progress indicator disappears while we scroll our contents.
To overcome this problem, you will open the tab Motion effects, then drop down the command Pin and select downstairs.
This time, scrolling down, we can see our progress tracker gradually populating as we move through our archive of posts.
Get Elementor Pro Now!
Conclusion
So ! That's it for this article that shows you how to create a vertical progress tracker.
Adding interactive elements such as the vertical progress indicator when creating your website can really take it to the next level by making it more intuitive. Additionally, it can be linked to an entire page or to the contents of a publication and even to any other specific element of a page. Knowing how to use it would therefore be an additional advantage.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
