How to Use Fancy Card Widget

element pack

How to Use Fancy Card Widget

A fancy card is a way to show 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 etc.). 

Icon Box

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

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

and set an image rightly clicking on the Choose Image.

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.

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 image and see after hovering the mouse first one has got 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.

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.

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

Additional Options

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. 

Let’s have a look.


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

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

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

You can also set an icon or image rotation.


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

Title & Description

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 about the Typography.

Read More

This section here works to send visitors to other pages for information details. To design 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.


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 as like as Read More section. Just check it out.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.