{"id":42318,"date":"2023-01-25T15:00:44","date_gmt":"2023-01-25T14:00:44","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=42318"},"modified":"2023-01-24T12:29:13","modified_gmt":"2023-01-24T11:29:13","slug":"how-to-add-illustrated-process-with-stages-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-add-illustrated-process-with-stages-wordpress\/","title":{"rendered":"How to Add an Illustrated Process with Stages in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]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 <strong>how to illustrate a process<\/strong> in WordPress. To do so, we will be using <strong>Qi Addons for Elementor<\/strong>, our own plugin for Elementor. With Qi Addons, you can have your illustrated process set up within minutes.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Another option, if you choose to use the Gutenberg block editor instead of Elementor, is to use our <strong>Qi Blocks for Gutenberg plugin<\/strong>. We will show you how to do it, too, so sit back and get ready for some learning.[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-an-illustrated-process\">What Is an Illustrated Process<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-illustrated-process-using-qi-addons\">How to Add an Illustrated Process Using Qi Addons<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#add-illustrated-process-using-qi-blocks\">How to Add an Illustrated Process Using Qi Blocks<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;qi-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-an-illustrated-process\"><\/a>What Is an Illustrated Process<\/h2>\n<p>[\/vc_column_text][vc_column_text]Simply put, an illustrated process is a <strong>graphical feature of a website that showcases the various stages of a process<\/strong> 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 \u2013 if it happens in stages or by degrees, an illustrated process can be used to demonstrate it. It\u2019s clear that pretty much any business, from agencies to industries, can make use of this feature.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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).<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"475\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Illustrated-Process.jpg\" class=\"attachment-full size-full\" alt=\"Illustrated Process\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Illustrated-Process.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Illustrated-Process-300x147.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Illustrated-Process-768x376.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Illustrated-Process-620x304.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-illustrated-process-using-qi-addons\"><\/a>How to Add an Illustrated Process Using Qi Addons<\/h2>\n<p>[\/vc_column_text][vc_column_text]Elementor is the premier visual page editor for WordPress, and <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/\" target=\"_blank\" rel=\"noopener\">Qi Addons for Elementor<\/a> is a plugin made to expand Elementor\u2018s already considerable capabilities. <strong>Qi Addons adds 60+ beautiful, artfully designed widgets<\/strong> to Elementor\u2018s array of available elements. The <a href=\"https:\/\/qodeinteractive.com\/qi-addons-for-elementor\/process\/\" target=\"_blank\" rel=\"noopener\">Process widget<\/a> is only one of those, and it comes with the free version of Qi Addons.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]All you need to do in order to use it is <strong>install the latest version of Elementor<\/strong>, and then <strong>install Qi Addons<\/strong> 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<strong> will work with the free version of Elementor<\/strong>, so the whole setup needn\u2018t cost you a penny. Note that Qi Addons will not work with other page editors.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;40px&#8221;][vc_column_text]<iframe loading=\"lazy\" style=\"border: 1px solid #ebebeb;\" title=\"YouTube video player\" src=\"https:\/\/www.youtube.com\/embed\/colSjAmnAQU\" width=\"1280\" height=\"720\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Content to the Widget<\/h3>\n<p>[\/vc_column_text][vc_column_text]First, find the <strong>Process<\/strong> widget in the left-hand side menu, and drag it to where you want it on the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Drag-Process-Element.jpg\" class=\"attachment-full size-full\" alt=\"Drag Process Element\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Drag-Process-Element.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Drag-Process-Element-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Drag-Process-Element-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Drag-Process-Element-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You will immediately be able to see the placeholder widget. You can configure the basic settings using the <strong>General<\/strong> section of the <strong>Content<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Each of the stages is treated as an <strong>Item<\/strong>. To add one, simply click the <strong>Add Item<\/strong> button, which we will do for our design. The <strong>Number of Columns<\/strong> control sets the number of items on display, while the <strong>Columns Responsive<\/strong> menu governs the behavior of the widget across different screens. We will set the <strong>Number of Columns<\/strong> to <em>Four<\/em> and the <strong>Columns Responsive<\/strong> to <em>Custom<\/em>, reducing the number of items shown for smaller and portrait-oriented devices.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"700\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-General-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process General Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-General-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-General-Settings-300x217.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-General-Settings-768x555.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-General-Settings-620x448.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the <strong>Appear Animation<\/strong> section, we only have one setting:<strong> Enable Appear Animation<\/strong>. We will leave it at the default <em>Yes<\/em>, because we want the website visitor to see the animation when they reach the appropriate section of the page.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Appear-Animation.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Appear Animation\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Appear-Animation.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Appear-Animation-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Appear-Animation-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Appear-Animation-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Layout<\/strong> section also contains only one setting: <strong>Item Layout<\/strong>. You can switch between <em>Horizontal<\/em> and <em>Vertical<\/em>, but we will leave it at <em>Horizontal<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Layout.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Layout\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Layout.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Layout-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Layout-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Layout-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Moving back to the <strong>General<\/strong> 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 <em>.svg<\/em> file. We will add an icon for our first item.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]To add an icon simply select it from the library and click the <strong>Insert<\/strong> button.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"596\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Icon.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Icon\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Icon.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Icon-300x185.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Icon-768x472.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Icon-620x381.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will then use the <strong>Title<\/strong> and <strong>Text<\/strong> field to change the placeholder text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-and-Text.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Title and Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-and-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-and-Text-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-and-Text-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-and-Text-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next down are the other item options. The <strong>Item Offset<\/strong> control offsets the item in relation to the others, in case you don\u2018t want them all in a line. We will set it to<em> 77 pixels<\/em>. The <strong>Item Holder<\/strong> size sets the size for the circle around the icon, and we will set it to<em> 218 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]If you use the numbers for your process stages, you can change their <strong>Typography<\/strong> settings. The typography settings for the title and text are elsewhere. You can change the color of the icon using the <strong>Item Color<\/strong> settings, and the background using the <strong>Background Type<\/strong> settings. We want a simple color background, but you can use a variety of images, gradients, and even video.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Item Holder Radius<\/strong> settings can be used to set the shape of the item, while the <strong>Border Type<\/strong> menu lets you set a border around it. We will not be using them for this design.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, the <strong>Line Top Offset<\/strong> and the<strong> Line Rotation<\/strong> controls set the height and the direction of the line between elements. We will set the former to <em>35 pixels<\/em> and the latter at <em>-8<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"654\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Item-Options.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Item Options\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Item-Options.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Item-Options-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Item-Options-768x518.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Item-Options-620x418.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We will populate the rest of our items with icons, backgrounds, and text before moving on to the <strong>Style<\/strong> tab.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Widget<\/h3>\n<p>[\/vc_column_text][vc_empty_space height=&#8221;24px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"684\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Tab.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Style Tab\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Tab.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Tab-300x212.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Tab-768x542.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Tab-620x438.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The first option up is the <strong>Alignment<\/strong> of the text. We like it centered, so we will leave it there. The <strong>Item Offset<\/strong> and <strong>Item Holder Size<\/strong> 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\u2018t be using them for this demonstration.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Item Typography<\/strong> sets the typography options for the icon. We will be setting the size to<em> 50 pixels<\/em> but we will not be touching the other settings. The <strong>Item Color<\/strong> lets you select a color for the icon. We will leave it at its default value.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Finally, while we won\u2018t be using these settings for this design, the<strong> Background Type, Item Holder Radius<\/strong>, and <strong>Border Type<\/strong> can be used to style the items together, as a group.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Style Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Settings.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Settings-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Style-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The <strong>Title\/text Style<\/strong> section is where you can style your title and text. You can change the <strong>Title Tag<\/strong>, as well as the color and typography of your title and text. We are satisfied with the default settings, so we won\u2018t be changing them for this design.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-Text-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Title Text Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-Text-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-Text-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-Text-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Title-Text-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]In the next section, you can set your <strong>Line Style<\/strong>. The <strong>Line Border Style<\/strong> lets you choose between the <em>Solid<\/em>, <em>Dashed<\/em>, and <em>Dotted<\/em> lines. We went with the first option. We also used the <strong>Line Border Color<\/strong> to change the line color to a steely gray and set the <strong>Line Thickness<\/strong> to <em>1 pixel<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Line-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Line Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Line-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Line-Style-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Line-Style-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Line-Style-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The final section we will be using is the <strong>Spacing Style<\/strong> section. Here is where you can set the margins and paddings for the textual elements. We will be setting the <strong>Item Title Margin Top<\/strong> to <em>8 pixels<\/em>, and the <strong>Item Text Padding<\/strong> to <em>5 pixels<\/em> for the left and right, decoupling the settings so not all the padding sides are affected. We will not be using the <strong>Item Text Margin Top<\/strong> settings.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Additional Style<\/strong> section is all about the stage numbers, but we are happy with them as they are, so we won\u2018t be using them. Suffice it to say that they have much the same settings as the items.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Spacing.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Spacing\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Spacing.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Spacing-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Spacing-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Spacing-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]And there you have it, our illustrated process with stages is complete!<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"add-illustrated-process-using-qi-blocks\"><\/a>How to Add an Illustrated Process Using Qi Blocks<\/h2>\n<p>[\/vc_column_text][vc_column_text]The <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/\">Gutenberg block editor<\/a> is WordPress&#8217; native editor and successor to the Classis editor. Our <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/\" target=\"_blank\" rel=\"noopener\">Qi Blocks for Gutenberg plugin<\/a> \u2013 a part of our <a href=\"https:\/\/qodeinteractive.com\/magazine\/introducing-qi-for-gutenberg\/\">new line of Gutenberg-relate products<\/a> \u2013 is the perfect companion to the block editor. It adds 48 new free blocks and 33 premium ones to it. The <a href=\"https:\/\/qodeinteractive.com\/qi-blocks-for-gutenberg\/process\/\" target=\"_blank\" rel=\"noopener\">Process block<\/a>, which we&#8217;ll show you how to use for illustrating a process shortly, is one of the free ones.[\/vc_column_text][vc_empty_space height=&#8221;72px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Adding the Content to the Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]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.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"465\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Default.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Block Default\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Default.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Default-300x144.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Default-768x369.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Default-620x298.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You can add new items from the settings sidebar. It opens on <strong>Content<\/strong> by default, showing you where you can set the <strong>Item Layout<\/strong>, enable <strong>Appear Animation<\/strong>, choose the <strong>Number of Columns<\/strong> and their responsive style, and add and style the items.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]We need one more item for our example, so we&#8217;ll add it. Don&#8217;t worry if it appears in a new row \u2013 simply increasing the number of columns to four will create space for it. We also set <strong>Columns Responsive<\/strong> to <em>Custom<\/em>, entering values <em>4, 4, 2, 2, 1<\/em>, and <em>1<\/em> from top to bottom.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"610\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Columns-Responsive.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Block Columns Responsive\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Columns-Responsive.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Columns-Responsive-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Columns-Responsive-768x483.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Columns-Responsive-620x390.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The options for adding content to individual items include icon, title, and content. You can also set up<strong> Item Offset, Holder Size<\/strong> and <strong>Color<\/strong>, <strong>Type of Background<\/strong>, its <strong>Image<\/strong> or <strong>Color<\/strong>, the <strong>Border<\/strong>, and the <strong>Line<\/strong> connecting the item to the others.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]For the first item, we&#8217;ll set the <strong>Item Offset<\/strong> to <em>77 pixels<\/em> and the <strong>Holder size<\/strong> to <em>218 pixels<\/em>. <strong>The Background Color<\/strong> we use is <em>#fff0ed<\/em>, while the <strong>Line Top Offset<\/strong> is <em>35 pixels<\/em>, and <strong>Rotation<\/strong> is <em>-8<\/em>. Needless to say, we added our own title, content, and icon, too.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"501\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Setup.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Block Setup\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Setup.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Setup-300x155.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Setup-768x397.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Setup-620x321.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]We&#8217;ll also change the content, title, and icon for the rest of the items. For the second item, we&#8217;ll set the <strong>Item Holder Size<\/strong> to <em>250 pixels<\/em>, <strong>Background Color<\/strong> to<em> #f06633<\/em>,<strong> Line Top Offset<\/strong> to <em>152 pixels<\/em>, and <strong>Line Rotation<\/strong> to <em>-8<\/em>. With the third, it&#8217;s <em>78 pixels<\/em> for <strong>Item Offset<\/strong>, <em>218 pixels<\/em> for <strong>Item Holder Size<\/strong>, <em>#f6f86b<\/em> for <strong>Background Color<\/strong>, <em>116 pixels<\/em> for <em>Line Top Offset<\/em>, and <em>-8<\/em> for <strong>Line Rotation<\/strong>. And for the final item, we&#8217;ll set the Item <strong>Holder Size<\/strong> to <em>250 pixels<\/em> and the <strong>Background Color<\/strong> to <em>#f4f4fe<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"524\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Content-Set.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Block Content Set\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Content-Set.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Content-Set-300x162.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Content-Set-768x415.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Content-Set-620x335.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;82px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h3 class=\"qodef-h5\">Styling the Block<\/h3>\n<p>[\/vc_column_text][vc_column_text]The <strong>Style<\/strong> section is separated into tabs specific to different parts of the block. The first is <strong>Title<\/strong>, where you get to choose the <strong>Tag, Color, Top Margin<\/strong> to the title, and all the <strong>Typography<\/strong> options you might want. We&#8217;ll set the <strong>Tag<\/strong> to <em>H5<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Text<\/strong> options remove the <strong>Tag<\/strong> but add some <strong>Padding<\/strong> options and keep all the rest you saw under the previous tab. We&#8217;ll set the<strong> Top Margin<\/strong> to<em> 8 pixels<\/em> and add <em>5 pixels<\/em> <strong>Padding<\/strong> to the <strong>Left<\/strong> and the <strong>Right<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"485\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Style.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Block Style\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Style.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Style-300x150.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Style-768x384.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Style-620x310.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Under the <strong>Item<\/strong> tab, you&#8217;ll find the same <strong>Typography<\/strong> and <strong>Color<\/strong> options and<strong> Item Offset<\/strong>, <strong>Holder<\/strong>, and <strong>Background<\/strong> 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 <strong>Icon Size<\/strong> in the <strong>Typography<\/strong> options to <em>50 pixels<\/em>.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <strong>Line<\/strong> options let you choose the <strong>Line Border Style<\/strong>, <strong>Color<\/strong>, and <strong>Line Thickness<\/strong>. We&#8217;ll set the <strong>Color<\/strong> to <em>#acacac<\/em> and the <strong>Thickness<\/strong> to <em>1 pixel<\/em>. The final set of options is the <strong>Number<\/strong> options, where you can choose the <strong>Color<\/strong>, <strong>Size<\/strong>, and <strong>Typography<\/strong> for the number element in the items. You can also set the <strong>Background<\/strong>, but we won&#8217;t change anything.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"506\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Final.jpg\" class=\"attachment-full size-full\" alt=\"Qi Process Block Final\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Final.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Final-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Final-768x401.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2023\/01\/Qi-Process-Block-Final-620x324.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]That&#8217;s all there is to it \u2013 we&#8217;ve created our illustrated process in no time.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]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\u2018s done.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>If you&#8217;re looking for a quick and easy way to illustrate a process, any process you want, on your site, look no further as we have just the thing for you. <\/p>\n","protected":false},"author":16990,"featured_media":42358,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[108,342],"class_list":["post-42318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-qi-addons","tag-qi-blocks"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/16990"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=42318"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/42318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/42358"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=42318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=42318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=42318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}