The Icon Box is the simpler version of the Info Box. With its versatile preset style, you can create creative icon boxes to make the webpage easier to read. 

Video Instruction #

Using the Icon Box  #

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

Step 1 #

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

Step 2 #

Create a custom infobox for your website to showcase additional information about your business with stunning visuals.

In the Content section, you can upload any icon or SVG. While uploading images, we recommend using the PNG format. From here, you can also provide a title, description text, box link, configure text size, and alignment very easily.

Icon Box - Content tab
Icon Box - Content tab

Step 3 #

You can easily customize and design different Icon and Content from the Style section of the widget.

Icon Box - Icon style options

Icon: In this section, you can edit the size, add colors to the icon, select background color, add spacing and rotation. Adding a hover effect to your icon is also doable with this feature. 

Icon Box - Icon style option
Icon Box - Icon style option

Content: With this option, you can add typography, select alignment, add spacing and change the color of your title and description text easily. 

Icon Box - Icon style option

Step 4 #

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. 

Icon Box - Advanced customization options

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. 

Icon 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.

Icon Box - Background option

Border #

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

Icon Box - Border customization option
Icon Box - Border customization option

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. 

Icon Box - Positioning option

Responsive #

You can check the responsiveness 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.

Icon 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