Let’s know about the Interactive card widget 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
It is very easy to place the Interactive Card widget. Only go to Elementor panel and search Interactive Card in the search bar. Then, drag and drop the widget in the section you prefer.
The Content Tab having some handy sections will really help you to have a structure of the Interactive Card widget etc.
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.
Note: If you select the position Right/Bottom, you’ll be able to add wavify effect to the card just switching on the Show Wavify Effect button.
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.
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.
Now, let’s work with Style Tab. The tab will easily have you style the web content (text, image, video, etc.) of the page you require to design.
Styling with the tab in Elementor will always give you a fantastic experience.
Let’s have a look.
Here, both in Normal and Hover mode, you can style the contents in the card. See the image example up.
Now come to the Image section. This section will allow you to style all about the Image attached with card. You might add effect 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
In all the three sections, you will be able to add color, adjust spacing. Just, go to the sections one by one.
In general, here, you might add 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.
Go to the Style tab > Badge and style the badge.
To sum up, I hope you’ve noticed what is Interactive Card widget 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.