Process Builder Shortcode

Updated on November 17, 2017

Process Builder shortcode is one of the Jupiter shortcodes that allows you to create a process diagram step by step.

In this article, we’ll explain about configuring Process Builder shortcode.

To see the Process Builder shortcode in action, you may check the demo page.

Process builder shortcode - demo

Displaying Process Builder Shortcode

To add the shortcode:

1Add a new page or edit an existing page.
2From Visual Composer screen, click + button.

Process builder shortcode - visual composer screen

3In Add Element pop-up screen, search for Process Builder and click on it to be added to the page.

Process builder shortcode - add element

4When the shortcode is added, a new pop-up screen called Process Builder Settings opens. It gives you the ability to configure the shortcode settings.

Process builder shortcode - Process builder settings

5Configure the settings as required. Other settings are explained in next sections.

Title Adds a title for the whole process diagram.
How many steps? Sets steps number you want in your process diagram. This is simply the amount of those circles with title and description below.
6Click Save Changes and publish or update the page to check the result.

Configuring Process Builder Settings

After you added the Process Builder shortcode, a pop up window will appear where you can set options for this shortcode. Below is the detailed description of each option for Process Builder shortcode.

Adding Process Builder Steps

You can add up to 5 steps of the diagram. The options will be described below:

Setting Description

Add Icon Class Name Adds the icon class name that you want to have in the shortcode. Where to find icon class name you can refer to the article Jupiter Control Panel. Scroll down to the paragraph Icon Library.
Title Sets a title for the first step of your process. This title goes below the circle.
Description  Sets a description for the first step. This goes below the title.
Link  Adds an optional link to the title. Don’t forget to add http:// at the beginning of the URL.

The same settings are for the 2nd, 3rd, 4th and 5th steps.

Configuring Process Builder Styling

There is only one setting to style Process Builder steps.


Container Hover Color   Sets color for all of circle boxes. This circle shaped box will hold an icon inside.

Adding an Entrance Animation

Viewport Animation field in the settings pop-up allows you to hide the shortcode initially and make it visible with animation when you scroll in the browser.

You can read Configuring shortcode’s entrance animation article for further explanation.

Adding an Extra Class Name

Extra Class Name field in the setting pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a style sheet or JavaScript file.

You can read Adding custom CSS class to a shortcode article for further explanation.

Did this answer your question?