Hello and welcome to WPBeginner. In this video I wanna show you how you can add
feature boxes with icons in WordPress. As an example I'm gonna show show you our OptinMonster
website. You see all of these features with icons and they are nicely set out in a grid
and it gives a site a real nice polished look. To get that on our site let's go ahead and
log into our site. We're gonna go to our plugins area, add new
and we want to find the advanced WP columns plugin.
Once we find that we're gonna install it and activate it.
Once it's activated we need to go to the settings, Advanced WP columns to configure it.
Now I need to go down and I'm looking for the column class and I want to enter
my columns next to it. This creates a CSS class that we'll be able to apply so once
we're done with that will save changes.
So we've set that up real quick. The next thing we need to do is go in and install another
plugin called WPSVG icons. This will allow us to put icons into featured
boxes. So I'm gonna go back to plugins add new. I'm gonna add WPSVG icons
that's the one. So I'm gonna install that
and now I'll activate it.
Now that we have both of those plugins we're ready to create our first feature box
So I'm gonna create a new page and I'm gonna call it our features and now on the
editor screen you'll see two new buttons the first one is add icon button and its
located just above the editor the second is the last one in the visual editor menu.
First thing we want to do is we want to create our columns so we'll click on
this button and we'll click on empty and then we'll select the number of columns that
we want to add. I'm gonna choose three
and after that you can click on each column and add some text. It's better to
do a little bit of text now so you can see what the columns look like otherwise
it will be a difficult to see once you're done. When we're finished with that let's click add
columns button at the bottom and now we can see it in our post. So next we need to add
the icons above the text.
So I'm gonna take the mouse, put it over at the beginning of the text area like this
I'm gonna click on the ENTER button this is gonna move the text down in its gonna give some
space to enter the icon.
Now we just need to go click the Add icon button and I'll bring up a nice pop
up like this.
Now we just need to go and find the icon that we want to add
I'm gonna use this one again
click Insert button and you'll see the shortcode comes up in the post editor. I'm gonna do
that a few more times to get all three columns their own icon.
Now that I'm happy with that we can save our page
and we can go take a look and see what it looks like.
Now if the icons are a little small like you see here then we can add a little bit of
CSS to solve that problem. To do that I'm gonna go to the style sheet for my
child theme and I want to add a little bit of code here and I do like this
and that should make it larger.
I'm gonna save those changes and I wanna go back to my site and refresh
so I can see what it looks like and now we've been able to add feature boxes
with icons to our WordPress site .
If you like this video click on the like button
and go ahead and leave us a comment there, we'd love to hear from you.
And subscribe to our YouTube channel to get the latest videos.