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

Video Instruction #

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.   

Info Box - Content menu

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. 

Info Box - Skin option

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 - Image/Icon option

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. 

Info Box - Info Box Content option

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. 

Info Box - Alignment option

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.  

Info Box - Style tab

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.  

Info Box - Image/Icon customization

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.   

Info Box - Content Style customization
Info Box - Content Style customization

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.  

Info Box - Button customization

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.

Info Box - Box Shadow customization

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

Info Box - Animation customization

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. 

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

Info Box - Motions 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.

Info Box - Background customization

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. 

Info Box - Border customization

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. 

Info Box - Positioning customization option

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.

Info Box - Responsive menu

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