Envira Gallery Blog

Digital Photography Tips, Tutorials and Resources

How to Add Blurbs With Icons in WordPress

by Waseem Abbas on Jul 18, 2016

Do you want to add blurbs to your WordPress site? Blurbs are small columns of text with an icon above each column, and they’re great for displaying featured products or services. In this article, we will share how to add blurbs with icons in WordPress.

Blurbs are a popular way of displaying featured products or services on your site with a short description of each. They are commonly used on the homepage, below the header image.

Here is an example of blurbs from OptinMonster:

blurbs-optinmonster

Read on to learn how to add blurbs to your WordPress site.

Adding Blurbs With Icons in WordPress

First thing you need is the Advanced WP Columns plugin. This plugin will allow you to add the columns for your blurbs.

Simply go to Plugins » Add New from your WordPress backend. In the search bar, you should type ‘WP Advanced Columns’ and press the Enter key.

Search WP Columns

Now, click on the Install Now button to install this plugin.

Install the Advanced WP Columns Plugin

Next, activate the plugin click on the Activate Plugin link.

Activate Advanced WP Columns Plugin

Upon activating the plugin, you need to go to Settings » Advanced WP Columns to configure the settings.

Scroll down to the Column Class field and add ‘mycolumns’ to it. Make sure to hit the Save button.

Configure Advanced WP Columns Plugin

Now go back to Plugins » Add New and write ‘WP SVG Icons’ in the search bar. Press the Enter key.

Search WP SVG Icons

Then click on the Install Now button to install the plugin.

Install WP Svg Icons

From the next window, you’ll need to click on the Activate Plugin link to activate this plugin, just like you did for the previous plugin.

Activate WP Svg Icons

Once the plugin is activated, you can edit the page where you want to add your blurbs with icons.

First, click on the Advanced WP Columns button from the menu in your visual editor.

Advanced WP Columns Button

It will open a popup window. Go ahead and click on the Empty dropdown to choose the number of columns you want to add to your page.

Popup Advanced WP Columns

We selected Three Columns from the Empty dropdown. You’ll need to add some text in each of the columns you added, so it will display inside your editor.

Once you are satisfied with settings for your columns, click on the Add Columns button.

Add Columns

After adding columns, you can add in the icons. Click just before the first column of text and press the Enter key to create the space above this column.

Then, click on the Add Icon button above the visual editor.

Add Icon

It will popup the settings to add the icon to your first column. Choose your desired icon from the options, and then click on Span to wrap your icon in span tags.
You will see the shortcode appear in the visual editor.

Insert WP Svg Icons

Now you need to repeat this process for the other columns.

After adding all the icons, simply click on the Update button to save your page. Now go to your website to see the blurbs with icons.

Web Page Preview

Since you can see that the icons appear to be very small in size, we recommended adding the following code to your theme’s CSS file:


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

span.wp-svg-download.download { 
font-size:100px; 
} 
span.wp-svg-cart-3.cart-3 { 
font-size:100px; 
} 
.mycolumns { 
border:1px solid #eee;
min-height:250px; 
padding-top:20px !important;
}

Make sure that you change the names of the icons (e.g. “wp-svg-bullhorn.bullhorn”) to match the icons you used on your page.

That’s all. Your website should now look something like this:

Blurbs with Icons

We hope this article has helped you to learn how to add blurbs with icons in WordPress. You may also want to check out our guide on how to create a featured content gallery in WordPress.

If you like this article, then please follow us on Facebook and Twitter for more free WordPress tutorials.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.