With Drouit Elementor Addons, you can decorate your website with creatively illustrated visuals like cards. These tools can be used to include texts, links, badges, and images with the card. With cards, your website will look more eye-soothing and creative. 

Video Instruction #

Using Cards  #

To use the Cards tool and design your website creatively, follow the steps mentioned below.

Step 1 #

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

Step 2 #

In the ‘Content’ option, you will get the opportunity to customize the design style, add image, title, description, link and more easily and give a creative touch. 

Card widget on Elementor page builder

Step 3 #

From the Style section of the widget, you can customize the image, alignment, title, content and card box. 

Card widget's style menu

Image: From this option, you can upload images, resize, and reposition the images. We recommend using the PNG version of images for a better experience. 

Card widget's image style settings tab

Alignment: You can decide on the position of the card from the alignment section. You can pick left, right, center or justified alignment for the cards. 

Card widget's alignment settings tab

Title: With this option, you can include the title and description in the text. Also bring necessary modification with spacing, typography and transition. 

Card widget's title style tab

Content: Customize your content with relevant spacing, color and typography. 

Card widget's content typography settings tab

Card Box: With this option, you can customize the card box with color, adding hover effect and more to make your website visually appealing. 

Card widget's  card box style settings tab

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. 

Card widget's advanced settings tab

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. 

Card widget's motion effects settings tab

Background #

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

Card widget's background settings tab

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. 

Card widget's border settings tab

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. 

Card widget's positioning settings tab

Responsive #

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

Card widget's responsive settings tab

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