Feature box displays important selling features of products and services and is a technique that is highly engaging by presenting features by means of Icons on WordPress Website.
How to add feature boxes with icons on WordPress website
1. First install the Plugin Advanced WP Columns.
2. Activate the plugin by clicking on Activate Plugin
3. After Activating the Plugin, select Settings >>> Advanced WP Columns to configure the plugin settings.
4. Just scroll down to the option ‘Column class’ and enter text mycolumns next to it. Make sure you do not forget to click on the save changes to store your settings.
5. After this install and activate the plugin WP SVG icons that can insert beautiful SVG icons into the feature boxes.
6. After activation, the WordPress is enabled for creating feature boxes. You need to Edit the page where you wish to add the feature boxes.
7. You can see two new buttons on the post editor screen.
8. The first button is the Add Icon located above the editor.
9. The second button is the Advanced WP Columns located in the visual editor at the end of the row.
Note: In case the visual editor shows only a single row of buttons then you need to click the toggle toolbar to expand it.
10. Next, click on “Advanced WP columns” button. You will see a popup. Click on Empty and choose the number of columns you wish to add.
11. Once it is done then click on each column and add the text. If you do not put some text then it will not be easy to see the columns in the post editor. After this is done click on the button “Add Columns” at the bottom.
Now in the post editor you will be able to see the columns. In the subsequent step add icons above the text.
Now move the mouse and place the pointer to the first column at the beginning of the text area and click the enter button, this will move the text down and will give you space for inserting the icons.
12. Then click on the Add icon button. The following popup will appear –
13. Now you can select the icon that you wish to use by clicking it. Click on the span button as it will cover your icon inside <span> element.
14. Click on the Insert button. The shortcode for the SVG icon will appear in your post editor. The shortcode will appear as the icon selected, if you select blog then it will look like this:
[wp-svg-icons icon="blog" wrap="i"]
Simply repeat the same procedure if you wish to add icons in other boxes.
When you have completed the task, all you need to do is to click the update button to save you page.
Just preview your page, you will notice that the icons on the page are too small and feature boxes are hardly noticeable.
Do not be apprehensive all you need to do is to add a little CSS to solve this issue.
Add the following CSS snippet in your theme or the child theme’s stylesheet.
01 span.wp-svg-blog.blog {
02 font-size:100px;
03 }
04
05 span.wp-svg-connection.connection {
06 font-size:100px;
07 }
08 .mycolumns {
09 border:1px solid #eee;
10 min-height:250px;
11 padding-top:20px !important;
12 }
Just remember to adjust the CSS so that it matches the names of the icons which you are using.
