Table Of Contents

How to Use Interactive Card Widget

Let’s know about the Interactive card widget by Element Pack and how it works. Over the whole documentation, I’ll include some instructions one by one. Just, follow the guide and go ahead.

So, let’s dive into the doc.

To Insert Widget

Inserting the Interactive Card widget

It is very easy to place the Interactive Card widget. Only go to the Elementor panel and search Interactive Card in the search bar. Then, drag and drop the widget in the section you prefer.

Content Tab

The Content Tab having some handy sections will really help you to have a structure of the Interactive Card widget etc.


interactivecardwidget 2 - BdThemes

Simply, go to the Content tab > Layout.

Mainly, this section will let you add an image to the card. Additionally, you can edit the content(for example, Title, Subtitle, Text) and use the on/off switcher button to manipulate content on the user interactive card.

Note: If you select the position Right/Bottom, you’ll be able to add wavify effect to the card just by switching on the Show Wavify Effect button.

Read More

interactivecardwidget readmore - BdThemes

Go to Content tab > Read More.

You see! This section works to make you able to add text and link to the call to action button. Moreover, you can use OnClick event.


interactivecard badge - BdThemes

Come to the Badge section from the Content tab. Here, you can name the badge and set the position. Additionally, you can set the Offset value.

Note: If you switch on the Badge switcher, then you’ll discover the button corresponding.

Style Tab

Now, let’s work with the Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design the Elementor Interactive Card widget. 

Styling with the tab in Elementor will always give you a fantastic experience.

Let’s have a look.

Card Content

interactivecard style 1 - BdThemes

Here, both in Normal and Hover mode, you can style the contents in the card. See the image example up.


interactivecard style 2 - BdThemes

Now come to the Image section. This section will allow you to style all about the Image attached with the Elementor Interactive cards. You might add effects to the card such CSS Filters effect.

Mostly, you can handle the image hover and opacity from this section. And you’ve got the possibility to do all these things in both Normal and Hover.

Title, Subtitle and Text

interactivecard style 3 - BdThemes

In all three sections, you will be able to add color, adjust spacing. Just, go to the sections one by one.

Read More

interactivecard style 4 - BdThemes

In general, here, you might add the attention effect to the call to action button ( for example, See Details).

See, the tabs – Normal and Hover will let you beautify the call to action button. Just, go to the Style tab > Read more.


interactivecard style 6 - BdThemes

Go to the Style tab > Badge and style the badge.

Video Assist

To sum up, I hope you’ve noticed what is Interactive Card widget is, developed by Bdthemes, and how it works for you. Watch the video inserted above. If you want to discover what more is possible to do using this one, you can visit the demo page.

Need any assistance? Call Us: +880 1700 55 95 95 | © Copyright 2022 All Rights Reserved by BdThemes
AUTUMN Sales up to 60% Discount on our products | Coupon: AUTUMN

Ready to buy our Products?

Don’t miss Powerful Elementor plugins; the Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit and over 2000+ ready templates for professional web design. 

Changed your Mind?

Please Suggest us how to improve

Up to 60% OFF

Purchase all our add-ons and make your website better than ever with our web designing products. Make your purchase with our limited-time AUTUMN offer in 60% off.