5/18/2023 0 Comments Wordpress iconboxFirst, you need to enter the text from the Content Section. Give your icon box a more sleek look by adding a Badge to it. How to Add & Style Badge Text for Your Elementor Icon Box The final output will be an amazing icon that animates on hover. ![]() Now select the animation type and set the transition duration as per your liking. To do this, go to the Style section and click on the Hover tab. Once you have added the icon for your icon box, you can apply any of the premium 13+ hover animations to give a pleasant experience to your site visitors. You can play around with your creativity and add a background type to the icon along with a box shadow, just like this: How to Add Hover Animations to Your Icon Box You can choose any color of your choice as border color, just like we did here: Set custom size and color for the icon and border to it. Once the icon is added, go to the Style Section to design your icon beautifully. Here we will stick with an icon as the media type. Choose from an icon or image, you can also add a GIF as an icon from the image option. To add a media type, first, you need to visit the Content section and select the type of media. Icons or images convey a meaningful message to your site visitors about the content. By Xpro Elementor Addons How to Add Icon or Image and Style It in Icon Box WidgetĪdd a beautiful media type (icon or image) in your icon box and provide a seamless user experience. After this, simply set the desired HTML Tag for your heading, set alignment and layout (block or inline).Ĭheck our best alternative of Elementor Pro to customize default theme templates for your websites. You can also add a badge and a link to the entire box. Now, enter the title and description for your icon box. There are 300+ icons available in the Xpro Icon Library or you can choose any from the Font Awesome icons. Choose the icon or image of your choice or upload your custom SVG from the Media Type section. In the Content section, you’ll see multiple options like media type, title, description, badge text, box link, and more. The default view will be something like this: Step 2 Let’s try those features! Step 1ĭrag and drop the Icon Box widget on the desired page. Thus, giving your site visitors a unique personalized experience. You can create highly converting icon boxes containing your product/services’ USP and key features. Our Icon Box widget for Elementor lets you design your icon box information the way you want. How to Add Content to Your Icon Box Widget Step 2įrom the Xpro Addons section, simply drag’n’drop the Icon Box widget on your desired page location. ![]() Step 1Ĭlick on the Xpro Addons section available in the Elementor Editor. It’s simple, FREE, fun, and time-saving! Here’s how to use this amazing Elementor Icon Box widget. You can create eye-catchy icon boxes for your websites in minutes with our modern widget. Icon boxes are the best way to instantly grab your site visitor’s attention and direct them to any detail page of your website. How to Use Xpro Icon Box Widget for Elementor How to Migrate to WordPress Website Using Xpro Elementor Addons.How to Reset WordPress to default Setting Using Reset Wizard Feature.How to Import Premium Elementor Starter Sites.How to Import Free Elementor Starter Sites.How to Import/Export Elementor Templates.
0 Comments
Leave a Reply. |