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.
Displaying Process Builder Shortcode
To add the shortcode:
| Setting | Description |
|---|---|
| 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. |
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.
| Setting | Description |
|---|---|
| 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.
