Info Box will allow you to create stunning and creative info boxes on your website.  Who said info boxes have to be boring? Design Info Boxes with icons, texts, images, and more with Info Box. 

Using Info Box  #

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

Step 1 #

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

Step 2 #

The widget will show three different options. Content, Style, and Advanced. Let’s start with the content section. In the content section, you can customize and edit Skin, Image/Icon, Info Box content, and Alignment.   

Skin: You can set the style you want to follow to display the icon box on your website. Pick from the creatively built three presents and get started. 

Image/Icon: This option will allow you to upload images and icons. It is recommended to use the PNG version of images or icons. You can also upload SVG as well.  

Info Box Content: By using this option, you can input the title and description of the icon. You will also have the option to customize the size and alignment of the fonts. You can also add a button to your Info box and customize it accordingly. 

Alignment: You can finalize the alignment of the image and text from here. You have three alignment options to choose from. The options are left, center and right. 

Step 3 #

In this step, we will discuss the Style function of the widget. From the Style option, you can design Image/Icon, Content Style, Button, Box Shadow and Animation  just the way you want.  

Icon/Image: Here you can customize and design the icon/images you are using. It allows you to modify the height, width, offset, spacing, padding with ease.  

Content Style: The Style section will allow you to edit the text color, type of text, do typography, increase opacity, modify CSS filters, add padding, and more to make the text look appealing.   

Button: From the Style section, you can also include the type of text, hover effect, add borders, customize the CSS filters, change color, customize offset very easily.  

Box Shadow: Add shadow to your box easily with the box shadow option. You will also have the flexibility to select the placement of the shadow, select color, blur or spread the shadow from this section.

Animation: You can add different animation options such as fading, zooming, bouncing, attention seeking animation, lightspeed and other special animation for the info box on your web page. 

With these easy to use features, you can create a unique info-box with Droit Elementor Addons. 

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. 

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, attention seeking motion, lightspeed and more effects to make your widget look different. 

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.

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. 

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. 

Responsive #

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

Attributes #

With Attributes you can add custom HTML attributes to any elements. 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