Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Fancy Card Widget

How to Use Fancy Card Widget

A fancy card widget is capable of showing an icon or image in an attractive mode. You can say it is one kind of identification. Here I’m going to show how you can make an icon or image-based card using the Fancy Card Widget by Element Pack.

I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (textimage, and video, etc.)  you want to work with and style as well.

Content Tab

The Content Tab having some handy sections will genuinely get you to have a structure of the fancy card widget. It’s necessary to utilize this part of the customization menu to build unique interactive cards on your own. 

Icon Box

In this section, going to Skin control, you need to select any perfect one in addition to the default one.

Fancy Card Widget icon box

From Icon Type, activate icon or image mode then you should select any icon just by clicking on the icon library or upload SVG.

profile image

and set an image by clicking on the right icon for images and choose the image from the Image Icon option on the Elementor widget.

Fancy Card Widget icon position

In the Icon Box section, in default mode, you have a chance to set the icon position while hovering. Just go to Fancy Icon Position > set left or right and the output.

elementor widget icon box stack mode

If you change the default skin to the Stack, you’ll find the look as shown in the screenshot above for both icon, SVG, or images and see after hovering the mouse first one has got a different look because of the Stack skin.

The more important thing is that from the Select Style control, you’ll be able to set the mouse hover style like Style 01, Style 02, etc for the Fancy Card Widget

Read More

This section here works to send visitors to other pages for information details. As well as you can add a button text or icon with the button.

interactive card read more button

If you want to add a link to the read more button, you can do that by just using Link to control. you can hit the gear icon to open in a new window or Add a Nofollow link with the URL. Also, you can enable the OnClick switcher button to add a custom function to the interactive cards.

Additional Options

Additional options for the card widget

This section will allow you to enable a few options like Indicator, Badge, Global-Link as you see in the demonstration above.

Style Tab

It is time to work with Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design with the Fancy Card Widget.

Let’s have a look.


Fancy Card Widget icon style

In this section in both Normal and Hover mode will be able to set Primary Background color and border radius.

colors options

If you want to set a color, padding, border, border radius, typography with an icon all these are possible.

border & background of the icon of the Fancy Card Widget

Moreover, you have a chance to set the solid and gradient background color, even the image background is possible with an icon. Just go to Style > Icon/Image > Background Type (Classic, Gradient).

Typography and rotation

You can also set an icon or image rotation.


Fancy Card Widget label style

Simply, go to Style Tab > Label > Color > Typography

Title & Description

title style

In these two sections, you can just set a color, typography both in Normal and Hover mode. Moreover spacing between the content of each other.

Read More


This section here works to send visitors to other pages for information details. To design the read more button just go to Style Tab > Read More.

See there is another option is Attention. If this option is enabled the button will be shaking continuously for the Fancy Card Widget.


additional styles

Here, you’ve nothing more to do except setting the solid or gradient background color or image-based background to the lower part of the fancy card. It is like the Read More section. Just check it out.

Video Tutorial

For more details, see the video about the Fancy Card Widget in Elementor.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.