Sunday, November 29, 2020
Home Blogging How to Add Feature Boxes With Icons in WordPress

How to Add Feature Boxes With Icons in WordPress

Do you need to add a function field with stunning icons on the homepage of your WordPress web site? These feature boxes present essential promoting factors of your services and products. It has confirmed to be a extremely participating method in presenting options to new prospects. On this article, we’ll present you easy methods to simply add feature boxes with icons in your WordPress web site.

What’s Characteristic Packing containers With Icons?

Most individuals once they go to web sites don’t truly learn them. As people, we’re changing into skilled scanners.

Because of this as a enterprise proprietor, it is advisable to current essential info in an simply scannable and extremely participating format.

That’s why hottest enterprise web sites often have a big picture or a slider on high with a name to motion button.

Just under that, you need to use a options field which lets you showcase the essential options of your services or products. Every function field can have its personal name to motion which might lead customers to be taught extra.

Right here’s an instance from our OptinMonster web site:

Including Characteristic Packing containers with Icons on Your WordPress Homepage

Very first thing it is advisable to do is set up and activate the Superior WP Columns plugin. Upon activation it is advisable to go to Settings » Superior WP Columns to configure the plugin.

Merely scroll right down to the choice ‘Column class’ and enter mycolumns subsequent to it. Don’t neglect to click on on the save adjustments button to retailer your settings.

Subsequent, you will want a plugin to insert stunning SVG icons into your feature boxes. Set up and activate WP SVG Icons plugin.

You are actually able to create your feature boxes.

Begin by enhancing the web page the place you need to add the feature boxes.

You’ll discover two new buttons on the publish editor display screen. The primary one is the Add Icon button situated simply above the editor. The second button is situated because the final merchandise within the visible editor menu.

In case your visible editor is barely displaying one row of buttons, then it is advisable to click on on the toggle toolbar button to develop it.

First, it is advisable to click on on the Superior WP Columns button. This can deliver up a popup the place it is advisable to click on on Empty after which choose the variety of columns you need to add.

After that it is advisable to click on on every column so as to add some textual content. For those who don’t add some textual content now, then it will likely be tough to see the columns in publish editor. As soon as you might be performed click on on the add columns button on the backside.

You will note the columns in your publish editor now. The subsequent step is so as to add icons above the textual content.

Take your mouse to the start of the textual content space within the first column and click on on the enter button. This can transfer the textual content down and provides house to insert your icons.

You May Also Like : How to Setup Automatic WordPress Backup with CodeGuard

Now it is advisable to click on on the Add icon button, which can deliver up a pleasant popup like this:

From there, you possibly can choose the icon you need to use by clicking on it. Subsequent, it is advisable to click on on the span button, so your icon is wrapped inside <span> component.

Lastly, click on on the insert button. You’ll now see the shortcode for the SVG icon in your publish editor. Relying on the identify of the icon you chose, it can look one thing like this:

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

Repeat the method so as to add icons in different feature boxes as effectively.

As soon as you might be completed, merely click on on the Replace button to avoid wasting your web page.

You might be almost performed, however in case you preview your web page, then you’ll discover that icons are too small and your feature boxes are barely noticeable.

You’ll need so as to add a bit CSS to unravel this downside. Merely add this CSS snippet into your theme or little one theme‘s stylesheet.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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 neglect to regulate the CSS to match the names of the icons you might be utilizing.

We hope this text helped you add an exquisite options bins part in your homepage. You may additionally need to see our information on 5 greatest drag and drop WordPress web page builders as a result of a number of these web page builders have this function field performance constructed into them.

If you liked this article, make sure to hit the bell for getting our latest updates and share this article with your friends in every social media platforms.

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

An Internship Guide about DRDO

Defense Research Development Organization (DRDO) provides an internship to graduates and submit graduate college students. If you're on the lookout for a profession in DRDO...

How to Become a Pilot: Eligibility, Training, Study & Salary

Every little one dreamt of flying. Some wished to fly as passengers whereas others wished to grow to be pilot, taking plane hovering into...

10 Best Online Money Transfer Apps & e-Wallets in India

There was a time when sending cash from one place to a different concerned standing in lengthy financial institution/publish workplace queues, patiently awaiting your...

14 Best Part Time Jobs in Chennai (+Online Jobs)

Chennai is a quickly rising metropolis with a booming auto business. Not simply auto business however Chennai has turn out to be hub for FMCG...

Recent Comments