How to Create Step Flow Using Elementor Process Widget
Whatever the type of website you may have, it is essential not only to have quality content but also to be able to display it in an appealing manner. Luckily, many tools allow us to share a wide range of information and data creatively. You can add a parallax effect to highlight the modern tone of your site, use toggles and accordions to achieve better content structure, and process widgets are precious as they allow us to display complex data in a clear, interesting and engaging manner.
If you have any kind of content that implies displaying some sort of process, it is essential to be able to break it down to your users in a simple, clear and concise way, yet not to lose any important detail related to it. Online stores will find process widget valuable as it can be used to show the process of online purchase step by step, corporations can share how the employment procedure looks in their company, medical websites can showcase the process of healing through stages, any kind of workflow can be visually represented through phases – the possibilities are limitless.
In this article we will show you how to easily set and customize the process widget on your website. Stay tuned to read more about:
Qi Addons for Elementor is a powerful, versatile, and very easy-to-use tool that adds an air of elegance besides functionality to your website. At the moment, this tool is the largest collection of free add-ons on the web and includes 60 free widgets that make it easy even for complete beginners to enrich their websites with effective elements without any coding knowledge necessary. Besides free widgets, you can find amazing 40+ premium.
The Process widget that is included for free comes with plenty of customization options and allows you to create beautiful displays of all kinds of workflows and processes, that seamlessly match both your website’s needs and style.
After dragging the process widget to the side you will get its default view which you can edit. It is important to note that the widget uses the fonts used by your theme, so if you want uniformity in this part you will not have to change it.
The options for setting up the Process widget are Content and Style options. Here we will choose which element we want in our process widget and we will determine what it will all look like in terms of style. There are a lot of customization settings but they are so well organized that you will find it very easy to try out and experiment with options.
Here are General Options, Animation Options, Process Layout and a useful Developer Tool, but also Help where you can find instructions and support from the addon author himself.
General Options
The first thing you will need is to set up are the general settings of the widget itself.
Here we choose the Number of Columns and if you want all your items to be in one row then you will select the number of items for the number of columns. Otherwise, if you put fewer columns than the item, the items will be in 2 or more rows, or if you select more columns than the item, you will be left with an empty space in the row.
You will probably know how many items you want as soon as you start building this, so I like to set it up right away, and of course, you can also customize these settings later too.
A significant setting is Columns Responsive where we adjust how our process will look on devices of different sizes. You can select Predefined or custom, it is your choice.
Based on our experience, the size of 618-768px looks best when it using one column, so we put it that way.
Items of course serve to add an item to the process. You can add as many as you need. There is an option to both copy the item and delete it.
Each item is customized separately, its specific characteristics are entered and it is possible to set certain items for each item so that each item looks different. However, if you want all items to look the same, you will specify their styling in the Style options, not in each item individually. Everything that is set in the style options applies to all process items, except for those where the item itself is set slightly differently in relation to the style settings. Everything will be clear to you when we go through the settings.
The Title and Text fields are used to enter text that goes with a specific process step. Of course, it is only natural in this case that each step has a different title and description so this is the only place where you can enter these values.
This is how it looks like when replaced with our text.
Item options refer to the part of the item that is not the title and description. We use Item Offset to position one item. The circle with the unit and the line leading to the next step are part of one item and by adjusting the Item Offset we move these elements down or up. As you can see in the picture, we have set some offset for the first item and it is now a little below the level of the next item.
The item offset option also exists in the Style options, which as we mentioned, anything set there applies to all process elements. Therefore, if you want all items to be in a different plane for each item, you will set the offset separately.
Item Holder Size is the size of the field in which it is currently 1, ie the number of steps, and later we will see what else can be found here. (This option is also found in the style options if we want all item holders to be the same size).
Item typography refers to the typographic characteristics of the number of steps.
The background serves to assign the appropriate color or background to the item. Also, we can set some gradient background. If we want all items to have the same background we will adjust it in Style options, if we want the background to be different for a different item then we will adjust it through item settings.
For now, we’ll only add the background color.
By default, items are displayed as circles, but if you want a square or a shape with certain angles Item holder Radius is where you will adjust it. When the value is 0 then it is the square of right angles. By adding values you will see how the angles change. If you delete the values you get a circle again. Not all angles have to be the same, you can set a different value for each angle.
Border type, Width and Color refer to border items. When you don’t want a border then Border is Type None.
You also have all these settings in style options, if you want all items to be the same.
We just saw how to change the offset and now we have two options that allow us to change the position of only the line that leads to the next process. Line top offset is used to move the position of the line (up / down), and Line rotation is used to rotate it. As you can see in the note below we have rotated the line and it is no longer at right angles to the item. You only have these settings on the item itself.
What we intentionally missed at the beginning is the Icon Type option, it serves us to add an icon from the Library to the item or to upload our SVG icon.
Pay attention to what happens next, the ordinal number of steps is no longer written in the center of the item but as a separate additional circle.
Now Item Typography and Item color refer to the icon itself. Here we will adjust the size (in typography size option) and color for each icon.
Another thing we haven’t looked at in more detail above is the background image of the item as in the case of the second item in the example:
Each background image carries with it certain settings regarding the positioning of the image, its size and whether it will be a plain background or with a scrolling effect (attachment option). You will have all these options when you use a background image.
After setting the general options, our process widget looks like this:
Appear Animation Options
The process widget can have an animation – items are loaded one after the other and appear in the same order, and this is the place we will adjust whether we want it or not.
Layout Options
There are two layout options – horizontal and vertical view of the process. So far, we have shown everything horizontally. However if you opt for vertical display the options are exactly the same. The only thing to pay attention to is the number of columns (we talked about this in the general options). The vertical process always has one column if we want the items to be arranged one below the other in one column.
Since we set three columns for our example because we have 3 items, without changing to one column our widget looks like this:
Of course, if we set up one column everything will be as it should be:
Developer Tools
This option gives us the ability to see the widget in shortcode form if we need it.
Help
As we mentioned, here we can find documentation and help from the author of the addons for the widget itself.
The style tab provides options for stylizing parts of the process. As we have already mentioned, everything that is set here will apply to all items in our process, except for those in which something different is set on the item itself.
Style Options
Here you can find various repeated options from the items themselves, such as those related to colors, typography, offsets.
The only thing not in the items is Alignment that specifies how the Title and Text will be centered.
If you want all items to be the same you will adjust the style here. In our case, we mostly adjusted the items because we have different background colors, different sizes, and positions. What we set here is Item color, ie the color of the icon that was gray by default and is now black for us.
Line Style Options
Process line stylization – we have several types, we can adjust the color and thickness.
Spacing Style
Spacing, space above the subtitle, above the text, and padding around the text. This padding around the text in a way serves to “narrow” the content by putting the padding in a field where it will not be possible to display the text.
Additional Style
We have these settings only when our item contains an inserted icon, ie when we have this additional field in which the number is located. The settings refer to that number and the field in which it is located.
Additional Holder Color is the color of the field in which the number and Additional Holder Typography are all related to adjusting the appearance of the number itself. Additional Holder Size is the size of the field and with the help of Additional Holder Position we can change the position of the field.
We can also add a background for the regular item field, but we cannot add it for each field individually here, it will be applied to all fields generally. We added a background image.
Let’s see if we understand each other well and based on the presentation we can see how certain processes were done. This can help you make your own and immediately know where to set what.
We have already shown an example of horizontal. What we can notice at first glance is that we have 3 columns and in them, the items in which are icons – an additional field with the number tells us that the item is an icon and not a picture because we said that only then it appears.
Since the items have different colors, we know that these settings were made in the items themselves, not in general options.
We may also notice that the offset is adjustable because not all items are in the same plane.
All icons and texts have the same colors which tell us that this is set in the style tab options.
The second example, although it seems more complicated, is even easier to execute. Here, the row on the page is divided into two parts. In the left is the image and in the right is the process.
The process has a vertical layout which means that the number of columns of that process is 1 and that all 5 items are placed below one another.
All items are arranged symmetrically one below the other which means no offset is set.
All texts have the same characteristics, so the style is set in the style tab.
Here we can see that each item has a background image (and that there are no additional fields for the number), but we can also notice that the number is not in the middle of the item as is the case by default.
There is a trick you can use to hide the number in case you don’t want the number to be displayed. All that you need to do is to set Item Typography Size to 0px in the Style tab in the General Options. This way the number will not to be displayed.
This can be useful if you do not want to show the process but just use this widget for your other needs and it bothers you to display the number or steps.
In Conclusion
Adding a process widget to your website with the Qi Addons for Elementor is not only easy, but also fun and allows you to express your creativity too. We encourage you to keep exploring ways in which you can enrich your website’s design and functionality. If your website focuses mostly on visual content – you may also be curious to find out more about adding full width page and row to your WordPress website, or if you want to achieve better content structure you may be interested to know more about WordPress tabs. As we mentioned, Qi Addons comes with 60 free widgets, so experimenting and trying new possibilities will not be a threat to your budget, but could only inspire you to Improve your website and add more useful features to it.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
