Create a Clickable Icon Box in Elementor

Facebook
Twitter
LinkedIn

When creating websites, icon boxes are really helpful. The parts that list features of goods or services are used the most frequently used aspect of icons. The symbol, the headline, and the description are just a few of the many ways you can personalize this widget that is shown. In this Elementor tutorial, we are going to walk you through creating a clickable icon box and even adding more custom icons to your library. But before setting your icon box, be sure to read about the best practices for making an icon box clickable below.

Table of Contents

How To Add Icon Box In Elementor

Step 1: Search for the icon box widget from the menu bar on the left side of your screen. Drag it to the section

Step 2: Make your icon design unique. In the icon library, select the icon you want.

View: Set the icon’s view to “Default,” “Stacked,” or “Framed.” Framed refers to a frame encircling the icon, whereas stacked refers to a background.

Title and Description: Give your Icon Box widget a title and a description.

Link: Add a link and specify whether you want it to open in a new window.

Icon Position: Choose whether to place the icon on the box’s left, top, or right side (on Mobile view it will stay centered)

Title HTML Tag: Choose an H1–H6 tag, Div, Span, or P for the title.

Step 3: Style Tab

You may design “Icon” and “Content” in the “Style” section.

Icon > Normal

Primary Color: A secondary color will be available if you select a stacked or framed icon box.

Icon Spacing: The space between the icon and the heading.

Icon Size: Scale up and down the size of the icon.

Icon Rotate: Rotate the icon.

Icon > Hover

For the hover of the icon, decide on the primary and secondary colors.

Animation – Choose from a long list of animations for the hover.

Content

Alignment: Left, centers, right or justified.

Vertical Align: Top, middle, and button.

Title > Spacing: Set the distance between the description and the title.

Color: Change the color of the title.

Typography: Make the title’s typography unique.

Description

Color: Change the color of the description.

Typography: Choose custom to change the typography, just like with the title.

Step 4: Click on “Advanced” to learn more about the options if you want to add motion effects, happy effects, a background, or to make it responsive and more captivating. Elementor comes with the “Advanced” feature by default. Read this document to learn more about advanced features and their applications.

The stunning icon box will appear on your website after you press the “Publish” button.

Adding Custom Icon Libraries in Elementor

So Elementor’s default icon library are free Font Awesome 5 and 6 icons. There are quite a few. But sometimes you just aren’t happy with the icons in the default library. Well the cool thing about Elementor is that they let you upload even more icon libraries. Here are several more ways to add even more icons to your Elementor icon library.

1. If you have a Font Awesome Pro subscription

Elementor offers direct integration if you have a Font Awesome Pro subscription. Follow the steps below to activate it on your site.

Step 1: Go to your site’s Admin Dashboard > Elementor > Settings > Integrations

Step 2: Scroll down to Font Awesome Pro and enter in your Kit ID and then save changes

Now when you edit your page and go to choose your icons, Font Awesome Pro families will show up for you.

2. Uploading custom Fontello, IcoMoon, and Fontastic icon packs

Step 1: Go to your site’s Dashboard > Elementor > Custom Icon

Step 2: Upload a zip file of your custom icon pack

So Fontello, IcoMoon, and Fontastic are services that let you import custom images to make icons. Then you can save them as a zip file and upload them to your site and it will be in your icon library.

3. Use third-party plugin icon packs

So there are third-party plugins that offer icon packs. Some of these plugins would be Exclusive Addons or Skyboot

What you do is download the plugin and install it like you would any other plugin. 

Step 1: WordPress dashboard > Plugin > Add New

Alternative way: If you can’t install it in the WordPress dashboard (because the file size of the icon pack is too big), you can upload it directly via File Manager in your Cpanel (or whatever backend software you are using). If you don’t know how to do that, you can follow the instructions in the video below.

Best Practices for Your Clickable Icon Box

Because icons are SVG files, you can change a lot of things about it, like the color and size without having to directly edit the icon in any third-party software.

So if you want your visitors to click on your icon, the same rules apply for creating a high-converting icon as it is for making a high-converting button. In short, you have to make it stand out from the rest of the page. That means it has to be a high-contrast color and has to stand out from the colors of the rest of the page. If the icon blends in with the rest of the page, it’s not good.

Another good idea is to make the icon big enough to see, on all screens (desktop, mobile, and tablet).

There should be enough spacing between the icon and the text too so that it is easily clickable. This is especially important on mobile where screen real estate is sparse.

 

Share on Facebook
Tweet this article
Share on LinkedIn
Email this article

More to explorer