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 (text, image, 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.
From Icon Type, activate icon or image mode then you should select any icon just by clicking on the icon library or upload SVG.
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.
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 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.
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
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.
Icon/Image
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.
Label
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
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
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.
