Do you want to add a feature box with beautiful icons on the homepage of your WordPress site? These feature boxes show important selling points of your products and services. It has proven to be a highly engaging technique in presenting features to new customers. In this article, we will show you how to easily add feature boxes with icons in your WordPress site.
What is Feature Boxes With Icons?
Most people when they visit websites don’t actually read them. As humans, we’re becoming professional scanners.
This means that as a business owner, you need to present important information in an easily scannable and highly engaging format.
That’s why most popular business websites usually have a large image or a slider on top with a call to action button.
Just below that, you can use a features box which allows you to showcase the important features of your product or service. Each feature box can have its own call to action which can lead users to learn more.
Here’s an example from our OptinMonster website:
Video Tutorial
If you don’t like the video or need more instructions, then continue reading.
Adding Feature Boxes with Icons on Your WordPress Homepage
First thing you need to do is install and activate the Advanced WP Columns plugin. Upon activation you need to visit Settings » Advanced WP Columns to configure the plugin.
Simply scroll down to the option ‘Column class’ and enter mycolumns next to it. Don’t forget to click on the save changes button to store your settings.
Next, you will need a plugin to insert beautiful SVG icons into your feature boxes. Install and activate WP SVG Icons plugin.
You are now ready to create your feature boxes.
Start by editing the page where you want to add the feature boxes.
You will notice two new buttons on the post editor screen. The first one is the Add Icon button located just above the editor. The second button is located as the last item in the visual editor menu.
If your visual editor is only showing one row of buttons, then you need to click on the toggle toolbar button to expand it.
First, you need to click on the Advanced WP Columns button. This will bring up a popup where you need to click on Empty and then select the number of columns you want to add.
After that you need to click on each column to add some text. If you don’t add some text now, then it will be difficult to see the columns in post editor. Once you are done click on the add columns button at the bottom.
You will see the columns in your post editor now. The next step is to add icons above the text.
Take your mouse to the beginning of the text area in the first column and click on the enter button. This will move the text down and give space to insert your icons.
Now you need to click on the Add icon button, which will bring up a nice popup like this:
From there, you can select the icon you want to use by clicking on it. Next, you need to click on the span button, so your icon is wrapped inside <span> element.
Finally, click on the insert button. You will now see the shortcode for the SVG icon in your post editor. Depending on the name of the icon you selected, it will look something like this:
[wp-svg-icons icon="rocket" wrap="span"]
Repeat the process to add icons in other feature boxes as well.
Once you are finished, simply click on the Update button to save your page.
You are nearly done, but if you preview your page, then you will notice that icons are too small and your feature boxes are barely noticeable.
You will need to add a little CSS to solve this problem. Simply add this CSS snippet into your theme or child theme‘s stylesheet.
span.wp-svg-rocket.rocket {
font-size:100px;
}
span.wp-svg-cloud.cloud {
font-size:100px;
}
span.wp-svg-headphones.headphones {
font-size:100px;
}
.mycolumns {
border:1px solid #eee;
min-height:250px;
padding-top:20px !important;
}
Don’t forget to adjust the CSS to match the names of the icons you are using.
We hope this article helped you add a beautiful features boxes section on your homepage. You may also want to see our guide on 5 best drag and drop WordPress page builders because a lot of those page builders have this feature box functionality built into them.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
It was an awesome article..
Helped me a lot
Hey. My icons won’t centre in the column itself. Is there a parameter we can add to ensure it centres? 2 of my icons centre fine, but 2 will only align left, even if I align it to center using formatting in the WordPress formatting editor (using a plugin).
Thanks.
Great article, i love it,
so, i have one question, can i make changes to these icons and set them bigger by making change in the parent theme graphicaly and without touching css code ?
Thank you !!
Hi Hassan,
You would still need some CSS.
I tried everything that was said in the tutorial but instead of it being set into columns, everything is set under one column. While the icon are set beside the words. I wanted to create three columns and everything in under one another in one column. Why is that that?
Thank you. So useful!
Do you have a tutorial on how to do this with css, html and php without having to use a plugin? I’ve looked around but cannot seem to find anything.
How do I get the icon to center over the content?
For anyone using WP SVG Icons that isn’t comfortable writing CSS, you can actually adjust the icon size by passing in a size=”#px” parameter to the wp-svg-icons short code.
Example:
[wp-svg-icons icon=”rocket” wrap=”span” size=”100px”]
That will set the icon to 100px and avoid the step of writing custom CSS. You may still need to adjust the padding.
That was very helpful Evan, thank you!!
Thanks, Evan. That worked.
Good article about an important feature for your site. However, the plugin recommended has not been updated for 2 years. I am relatively new to WordPress and I was told to steer from plugins that have not been updated in the past year. I am guessing that it depends since you are very knowledgeable about WordPress and highlighted the plugin in this article. Let me know your thoughts.
Bobby, the plugin works fine we tested it. We have also reached out to plugin author so that they can update the plugin.
Ideally you should install plugins that are recently updated. However, there are plenty of WordPress plugins that don’t need updates. Plugin authors feel that since a plugin is not broken and works great, then there is no need for them to update it.
Ok, that’s good to know. Thanks again.
Great post, i am also running wordpress blog. i will apply these icons on my blog thanks for sharing.
Nice article. WordPress is a great enterprise content management solution that can cater to any complex business requirements and develop powerful websites. It contains thousands of flexible, customizable and responsive themes, modules and plugins that can be utilized to design multiple websites effortlessly. Increasing competition demands an interactive and engaging website and thus it is important to include variety of tools that encourage visitors to stay more on a page. Plugins in WordPress adds value to the web page specially by making it more interesting. Utilizing right tools like Call to action buttons and social media login and sharing buttons with on page content helps to enhance user experience. Article rightly highlighted the point that selecting a right tool and utilizing its powers allows a CMS developer to have better control over the website.