Latest Tech and Tips

How to Add Feature Boxes With Icons in WordPress

13

Do you desire to add a feature box with attractive icons on the homepage of your WordPress website? These feature boxes reveal essential marketing factors of your services and products. It has actually confirmed to be an extremely interesting strategy in offering attributes to brand-new clients. In this short article, we will certainly reveal you how to conveniently add feature boxes with icons in your WordPress website.

Adding feature boxes in WordPress with icons

What is Feature Boxes With Icons?

Most individuals when they go to internet sites do not really review them. As human beings, we’re ending up being specialist scanners.

This suggests that as a local business owner, you require to existing essential details in a conveniently scannable as well as very interesting style.

That’s why most prominent service internet sites normally have a big photo or a slider on the top with a phone call to activity switch.

Just listed below that, you can make use of a functions box which enables you to display the essential attributes of your service or product. Each feature box can have its very own phone call to activity which can lead individuals to discover more.

Here’s an instance from our OptinMonster site:

Example of feature boxes on the homepage of a WordPress powered website

Video Tutorial

Subscribe to WPBeginner

If you do not such as the video clip or require even more guidelines, after that proceed analysis.

Adding Feature Boxes with Icons on Your WordPress Homepage

First point you require to do is set up as well as trigger the Advanced WP Columns plugin. Upon activation you require to check out Settings” Advanced WP Columns to set up the plugin.

Simply scroll down to the alternative ‘Column class’ as well as get in mycolumns following to it. Don’ t fail to remember to click the conserve adjustments switch to shop your setups.

Adding CSS class for your columns

Next, you will certainly require a plugin to insert attractive SVG icons right into your feature boxes. Install as well as trigger WP SVG Icons plugin.

You are currently prepared to produce your feature boxes.

Start by editing and enhancing the web page where you desire to add the feature boxes.

You will certainly discover 2 brand-new switches on the article editor display. The initially one is the Add Icon switch situated simply over the editor. The 2nd switch lies as the last thing in the aesthetic editor food selection.

If your aesthetic editor is just revealing one row of switches, after that you require to click the toggle toolbar switch to broaden it.

Advanced columns and svg icon buttons in post editor

First, you require to click the Advanced WP Columns switch. This will certainly raise a popup where you require to click Empty and afterwards choose the variety of columns you desire to add.

Creating feature boxes columns

After that you require to click each column to add some message. If you do not add some message currently, after that it will certainly be challenging to see the columns in article editor. Once you are done click the add columns switch near the bottom.

You will certainly see the columns in your article editor currently. The following action is to add icons over the message.

Take your computer mouse to the start of the message location in the very first column as well as click the get in switch. This will certainly relocate the message down as well as provide room to insert your icons.

Now you require to click the Add symbol switch, which will certainly raise a good popup similar to this:

Adding icons to feature boxes in WordPress

From there, you can choose the symbol you desire to usage by clicking it. Next, you require to click the period switch, so your symbol is covered inside << period> > aspect.

Finally, click the insert switch. You will certainly currently see the shortcode for the SVG symbol in your article editor. Depending on the name of the symbol you picked, it will certainly look something similar to this:

[wp-svg-icons icon="rocket" wrap="span"]

Repeat the procedure to add icons in various other feature boxes too.

Once you are ended up, just click the Update switch to conserve your web page.

You are virtually done, however if you sneak peek your web page, after that you will certainly discover that icons are also tiny as well as your feature boxes are hardly visible.

Feature boxes with small icons and no styling

You will certainly require to add a little CSS to resolve this trouble. Simply add this CSS bit right into your style or kid style’s stylesheet.

span.wp-svg-rocket. rocket {
font-size:100 px;.
}

span.wp-svg-cloud. cloud {
font-size:100 px;.
}
span.wp-svg-headphones. earphones {
font-size:100 px;.
}
. mycolumns {
boundary:1 px strong #eee;.
min-height:250 px;.
padding-top:20 px! essential;.
}

Don’ t fail to remember to change the CSS to match the names of the icons you are making use of.

feature boxes with proper styling and large icons

We wish this short article assisted you add a lovely attributes boxes area on your homepage. You might likewise desire to see our overview on 5 ideal drag as well as decline WordPress web page building contractors since a great deal of those web page building contractors have this feature box capability constructed right into them.

If you liked this short article, after that please subscribe to our YouTube Channel for WordPress video clip tutorials. You can likewise locate us on Twitter as well as Facebook.