Process Steps

Process Steps

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 to 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 block.

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

Pro tip
Try this idea. Create your company history timeline using this block. 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 Block of The Plus Addons For Gutenberg

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

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Process Steps into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Process Steps after “/” sign, eg.“/Process Steps”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Style

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

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 Step button and add as many steps as you want.

Title

Add your Process/Steps title here.

Description

Insert your text content here.

Icon Type

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.

Display Counter Custom Text

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

Normal Background Options

Apply suitable normal background like color/ gradient/ image to the content.

Hover Background Options

Apply suitable hover background like color/ gradient/ image to the content.

Counter Area

Counter

Slide the button to Yes to enable the counter.

Counter Type

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.

Extra Options

Normal Layout in Mobile

This option is visible when you select a horizontal style.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 Tab

Set which Process/Step icon stays active by default.

Rings Background

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

Extra Options

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 Anything Carousel Tutorial

Connection Carousel ID

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

Active 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 block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

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

Description

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

Icon Area

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.

Connecting Line

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

Counter Area

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

Content Background

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

Repeater Background

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

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
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.