With this widget, you can create a beautiful horizontal step progress bar that you can control manually.
Required Setup
- Elementor FREE Plugin installed & activated.
- You need to have the WDesignKit plugin installed and activated.
- Make sure you’ve created an account and logged into it.
- Make sure you’ve downloaded the Horizontal Level widget.
How to Activate the Horizontal Level Widget?
Go to
- WDesignKit → Widgets.
- Search the widget name and select Elementor as the Page Builder.
- Click on the Download icon.
How to Use the Horizontal Level Widget in Elementor?
Add the Horizontal Level widget to the page.
Content
From the Circle Inner Layout dropdown, you can select the layout for the circle in the line. Here you’ll find three options –
- Dot – To show a dot in the circle.
- Number – To show a number in the circle.
- Check Mark – To show a checkmark in the circle.
Note: To show the checkmark you have to enable the Active toggle in the repeater item.
Then in the Items section, you have to add the the items. By default, you’ll find one repeater item, open it.
From the Select dropdown, you can select the content type that will be added above the circle. Here you’ll find three options –
- Text – To show a text.
- Icon – To show an icon.
- Image – To show an image.
Based on your selection you’ll find different options to add the content.
You can add a description from the Description field.
By enabling the Active toggle, you can fill the line of the item making it as active.
Then you’ll find some styling options to color the title, icon and description for normal and hover states along with options to color the dot, inner dot and progress bar of the item.
You can click on the +Add Item button to add more items.
Columns
From this tab, you can set the number of columns for desktop, tablet and mobile separately.
From the Style tab, you can customize the style further.
