How to Add an Illustrated Process with Stages in WordPress
Sometimes, the best you can do to get a point across is to break it down into constituent parts. This is especially true of dynamic, changing things such as processes. In this article, we will be showing you how to illustrate a process in WordPress. To do so, we will be using Qi Addons for Elementor, our own plugin for Elementor. With Qi Addons, you can have your illustrated process set up within minutes.
Another option, if you choose to use the Gutenberg block editor instead of Elementor, is to use our Qi Blocks for Gutenberg plugin. We will show you how to do it, too, so sit back and get ready for some learning.
Simply put, an illustrated process is a graphical feature of a website that showcases the various stages of a process related to the object of the website itself or its owner. It can detail the production process of, say, manufacturing organic cosmetics, or the onboarding process for a temp agency – if it happens in stages or by degrees, an illustrated process can be used to demonstrate it. It’s clear that pretty much any business, from agencies to industries, can make use of this feature.
Usually, this means a couple of sequential images or even simply numbers followed by text describing the stages of a process in brief. You can see an example using placeholders in the picture below (also created using Qi Addons).
Elementor is the premier visual page editor for WordPress, and Qi Addons for Elementor is a plugin made to expand Elementor‘s already considerable capabilities. Qi Addons adds 60+ beautiful, artfully designed widgets to Elementor‘s array of available elements. The Process widget is only one of those, and it comes with the free version of Qi Addons.
All you need to do in order to use it is install the latest version of Elementor, and then install Qi Addons as you would install any plugin. In addition to the Process widget, you will, of course, get a number of exquisite widgets you can use for other purposes, from creative and infographics to forms and typography. Qi Addons will work with the free version of Elementor, so the whole setup needn‘t cost you a penny. Note that Qi Addons will not work with other page editors.
We will demonstrate the addition of a process widget to a post, but the process is exactly the same if you want to add it to a page. We have the tutorial in video format, here:
However, if you prefer your tutorials in text form, or if you want to know more about the illustrated process as a web design element, Qi Addons, or Elementor, read on. We have you covered.
Adding the Content to the Widget
First, find the Process widget in the left-hand side menu, and drag it to where you want it on the page.
You will immediately be able to see the placeholder widget. You can configure the basic settings using the General section of the Content tab.
Each of the stages is treated as an Item. To add one, simply click the Add Item button, which we will do for our design. The Number of Columns control sets the number of items on display, while the Columns Responsive menu governs the behavior of the widget across different screens. We will set the Number of Columns to Four and the Columns Responsive to Custom, reducing the number of items shown for smaller and portrait-oriented devices.
In the Appear Animation section, we only have one setting: Enable Appear Animation. We will leave it at the default Yes, because we want the website visitor to see the animation when they reach the appropriate section of the page.
The Layout section also contains only one setting: Item Layout. You can switch between Horizontal and Vertical, but we will leave it at Horizontal.
Moving back to the General section, we will now populate our items with content. To add an icon to the item, you can select one from the icon library, or upload an .svg file. We will add an icon for our first item.
To add an icon simply select it from the library and click the Insert button.
We will then use the Title and Text field to change the placeholder text.
Next down are the other item options. The Item Offset control offsets the item in relation to the others, in case you don‘t want them all in a line. We will set it to 77 pixels. The Item Holder size sets the size for the circle around the icon, and we will set it to 218 pixels.
If you use the numbers for your process stages, you can change their Typography settings. The typography settings for the title and text are elsewhere. You can change the color of the icon using the Item Color settings, and the background using the Background Type settings. We want a simple color background, but you can use a variety of images, gradients, and even video.
The Item Holder Radius settings can be used to set the shape of the item, while the Border Type menu lets you set a border around it. We will not be using them for this design.
Finally, the Line Top Offset and the Line Rotation controls set the height and the direction of the line between elements. We will set the former to 35 pixels and the latter at -8.
We will populate the rest of our items with icons, backgrounds, and text before moving on to the Style tab.
Styling the Widget
The first option up is the Alignment of the text. We like it centered, so we will leave it there. The Item Offset and Item Holder Size sliders are used to set the relative positions of the items and the icons in relation to the other elements of the widget, and we won‘t be using them for this demonstration.
The Item Typography sets the typography options for the icon. We will be setting the size to 50 pixels but we will not be touching the other settings. The Item Color lets you select a color for the icon. We will leave it at its default value.
Finally, while we won‘t be using these settings for this design, the Background Type, Item Holder Radius, and Border Type can be used to style the items together, as a group.
The Title/text Style section is where you can style your title and text. You can change the Title Tag, as well as the color and typography of your title and text. We are satisfied with the default settings, so we won‘t be changing them for this design.
In the next section, you can set your Line Style. The Line Border Style lets you choose between the Solid, Dashed, and Dotted lines. We went with the first option. We also used the Line Border Color to change the line color to a steely gray and set the Line Thickness to 1 pixel.
The final section we will be using is the Spacing Style section. Here is where you can set the margins and paddings for the textual elements. We will be setting the Item Title Margin Top to 8 pixels, and the Item Text Padding to 5 pixels for the left and right, decoupling the settings so not all the padding sides are affected. We will not be using the Item Text Margin Top settings.
The Additional Style section is all about the stage numbers, but we are happy with them as they are, so we won‘t be using them. Suffice it to say that they have much the same settings as the items.
And there you have it, our illustrated process with stages is complete!
The Gutenberg block editor is WordPress’ native editor and successor to the Classis editor. Our Qi Blocks for Gutenberg plugin – a part of our new line of Gutenberg-relate products – is the perfect companion to the block editor. It adds 48 new free blocks and 33 premium ones to it. The Process block, which we’ll show you how to use for illustrating a process shortly, is one of the free ones.
Adding the Content to the Block
After making sure you have the plugin installed and activated, you first need to add the block to a page or a post. By default, it creates a three-step process.
You can add new items from the settings sidebar. It opens on Content by default, showing you where you can set the Item Layout, enable Appear Animation, choose the Number of Columns and their responsive style, and add and style the items.
We need one more item for our example, so we’ll add it. Don’t worry if it appears in a new row – simply increasing the number of columns to four will create space for it. We also set Columns Responsive to Custom, entering values 4, 4, 2, 2, 1, and 1 from top to bottom.
The options for adding content to individual items include icon, title, and content. You can also set up Item Offset, Holder Size and Color, Type of Background, its Image or Color, the Border, and the Line connecting the item to the others.
For the first item, we’ll set the Item Offset to 77 pixels and the Holder size to 218 pixels. The Background Color we use is #fff0ed, while the Line Top Offset is 35 pixels, and Rotation is -8. Needless to say, we added our own title, content, and icon, too.
We’ll also change the content, title, and icon for the rest of the items. For the second item, we’ll set the Item Holder Size to 250 pixels, Background Color to #f06633, Line Top Offset to 152 pixels, and Line Rotation to -8. With the third, it’s 78 pixels for Item Offset, 218 pixels for Item Holder Size, #f6f86b for Background Color, 116 pixels for Line Top Offset, and -8 for Line Rotation. And for the final item, we’ll set the Item Holder Size to 250 pixels and the Background Color to #f4f4fe.
Styling the Block
The Style section is separated into tabs specific to different parts of the block. The first is Title, where you get to choose the Tag, Color, Top Margin to the title, and all the Typography options you might want. We’ll set the Tag to H5.
The Text options remove the Tag but add some Padding options and keep all the rest you saw under the previous tab. We’ll set the Top Margin to 8 pixels and add 5 pixels Padding to the Left and the Right.
Under the Item tab, you’ll find the same Typography and Color options and Item Offset, Holder, and Background options. You can use these to set these options so that they apply to all items. We already set those options for each item individually. We will change the Icon Size in the Typography options to 50 pixels.
The Line options let you choose the Line Border Style, Color, and Line Thickness. We’ll set the Color to #acacac and the Thickness to 1 pixel. The final set of options is the Number options, where you can choose the Color, Size, and Typography for the number element in the items. You can also set the Background, but we won’t change anything.
That’s all there is to it – we’ve created our illustrated process in no time.
In Conclusion
With Qi Addons for Elementor and Qi Blocks for Gutenberg, you get dozens of professionally designed widgets and blocks, and the number of options, settings, and controls makes it certain that they will fit any style and website layout. You can create a gorgeous illustrated process feature for free and in much less time than it takes to read this article. But, having read this article, you now know how it‘s done.
