Process/Steps

< All Topics
Widget Used
Process/Steps
Knowledge Required
Advanced

While running your business, you must have come across these questions quite often.

1. How does the website work?
2. How to place an order? or
3. How can I get support?

To answer these questions, you have two ways. You can email each and every website user explaining them how to do it or You can be smart and create a simplified step by step process section on your website using the Process/Steps widget.

It is one of those useful widgets using which you can make a complex process understand much more easier to your visitors visually.

Pro tip
Try this idea. Create your company history timeline using this widget. Explain how and when it started, how it grew over the years, and how it is doing today. Don’t you think it will look cool?

How to use the Process/Steps Widget of The Plus Addons For Elementor

The Process/Steps widget comes with two different layouts i.e. Horizontal and Vertical. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps


Search for the Process/Steps widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Process/Steps

Style

Select your widget style from the drop-down. It can be either Horizontal or Vertical.

Display Counter

Slide the button to Yes to enable the counter. Choose your preferred counter-style from the various options in the drop-down. Every option is self-explanatory.
When you select the Custom Text option, it will display a box to add your custom text.

Adding Display Counter to the Process/Steps widget

Special Background

Slide the button to Yes to enable the special background style.

Normal Layout in Mobile

Enable/Disable to show or hide this layout on mobile. If you enable it, you get two more options to select i.e. Circle Alignment and Content Alignment.

Default active

Set which Process/Step icon stays active by default.

Adding Process/Steps

To help you get started, we have created two steps by default. You can start editing those or if you want to add a new one, click on the Add Item button. Now, let’s add/edit content in the Tab

Title

Add your Process/Steps title here.

Description

Insert your text content here.

Inserting the Process/Steps Content

Select Icon

Select your icon option using the dropdown. You can add a FontAwesome icon or an Image-based icon. If you want to add a Custom Text instead of an icon, you can add it as well. If you don’t want an Icon or Custom Text, select None.

If You Select Icon

Select your preferred icon library from the dropdown. We have provided two icon font libraries i.e. Font Awesome and Icons Mind.

If You Select Image

If you don’t want to use the icon library, you can also add an image-based icon by selecting the Image option from the drop-down. Click the + icon to add your image. You can either select a pre-uploaded image from the Media Library or you can upload a new image from your Desktop.

If You Select Text

Add your custom text in the text box.

Link

A common setting for all the above options. Sets a link to each of your Process/Steps boxes.

Normal Background Options

Background Options are a common option across all our widgets. So, we have written a universal tutorial on how to use these options.
View The Background Options Tutorial

Hover Background Options

This is exactly similar to the above options. Follow the same instructions.

Display Counter Custom Text

Add custom text here which will be displayed above the title.

Carousel Anything Connection

Slide the button to enable this option. To understand how to use Anything Carousel connection, check out the detailed tutorial below:
View The Carousel Anything Tutorial

Connecting Anything Carousel with the Process/Steps Widget.

Connection Carousel ID

Add your carousel anything widget ID here to connect the Process/Steps widget with Anything Carousel.

Effect On

Select how the animation effect should appear. It can be Click or Hover.

Effect On

Select how the animation effect should appear. It can be Click or Hover.

2. Style

The Style tab is used for customizing the appearance of all the Process/Steps widget components. Let’s understand each of these customization options.

Title Style

Set your Title Typography, Text Color, and Text Hover options here.

Description Style

Set your Description Typography, Text Color, and Text Hover options here.

Icon/Image Style

These options are used to customize components such as your Icon/Image Size, Icon Color, Icon Hover, Border Radius, Typography, Text Color, Background, and Box Shadow.

Separator Line Style

Set your Separator Line Color, Border Type, and Border Size Options here. Similarly, set the hover options for those components.

Display Counter Style

Set the Padding, Offset, Typography, Text Color, Background, Border, Border Radius, and Box Shadow options over here.

Content Background Style

Set the Padding, Left Control Right Margin, Typography, Text Color, Background, Border, Border Radius, and Box Shadow options over here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View On Scroll View Animation Tutorial

3. Advanced

Want to get more nerdy with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.
View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.
Need help?