Process Box can be very useful to make your website interactive. This tool can be used to creatively display processes with visual appeal.

Video Instruction #

Using Process Box #

To use Process Box and design your website creatively, follow the steps mentioned below. 

Step 1 #

From the menu bar on the left-hand side, select Process Box. Drag and drop the widget on the area you want it to be. 

Step 2 #

By clicking on the tool you will see three different sections to work with. These sections are Content, Style, and Advanced

Process Box - Content tab

Step 3 #

From the Content section, you can pick from any of the available presets. There are four different presets to choose from. You can also determine the number of columns you want in the process box. 

Process Box - Preset options

Step 4 #

From the Content section, you can enable icons and modify them accordingly, plus add the title and description.

As it is a Process Box, you can also add Step Image to navigate the reader to the next process. Here you can also add the links to the process box. 

Process Box - Preset options

Step 5 #

From the Style section, you can customize three different sections. General, Icon, and Content

Process Box - Style tab

General: In the General section, you can easily customize box shadow by tweaking the different settings and color options. 

Process Box - General option

Icon: In the Icon section, you can add icon color, apply gradient and hover effects. 

Process Box - Icon options

Content: From the Content section, you can customize the typography of the title. Change color and design with offset settings. 

Process Box - Content customization options

Step 6 #

In the Advanced section of the widget, you will have the flexibility to add margin and padding to the widget. You can also modify the Z-index to customize the widget more. 

Process Box - Advanced option

You will also get the chance to edit and customize the following options: 

  • Motion Effects
  • Background
  • Border
  • Positioning
  • Responsive
  • Attributes
  • Custom CSS

Motion Effects #

From the Motion Effects option, you can add different effects such as fading, zooming, bouncing, sliding, rotating, motion, lightspeed, and more effects to make your widget look different. 

Process Box - Motion Effects

Background #

If you want to customize the background with specific color, gradient, or images, you can do that from the advanced settings as well. You can pick background type, color, gradient, gradient type, and more.

Process Box - Background options

Border #

If you want to add any line, box, dots, or other design variation as the borders of the widget, you can do it from here. You can also customize the size and insert shadow effects if you want to. 

Process Box - Border options

Positioning #

This feature will allow you to fix the positioning of the widget. From the width section, you can select if the position will be full width, inline, or customized. And you can set the position as absolute or fixed as well from these settings. 

Process Box - Positioning

Responsive #

You can check the responsive of the widget if you toggle through the available options. However, the change to the widget will be visible only on the live page or preview, not in the Elementor.

Process Box - Responsive

Attributes #

With Attributes, you can add custom HTML attributes to any element. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Custom CSS #

Custom CSS lets you add CSS code to any widget, and see it render live right in the editor. However, this feature is only available with the pro version of the Droit Elementor Addons. 

Powered by BetterDocs