This widget area has the ability to have an image displayed as the background.  In our demo we are not using the image background, but you can use it by navigating to Appearance > Customize > Front Page Background Images.

 

This is another flexible widget area that will adapt to the number of widgets you add to the area.  See diagram below:

Here is how we have it set up:

 

This is the first Text widget:

This is how the Custom HTML widgets are set up, they are all the same we just changed the text, button link and icon.

Here is the HTML code you can copy and paste:


1. The Feature box html is what adds the white box behind the text.

2. The Icon is added with this code:

<i class=”fa fa-file-o”></i>

You can select any icons from the following link:

Line Awesome

Once you determine which icons you want to use, click on the icon and you will see an image like this:

You will copy that code and paste it into your WordPress Custom HTML widget, then change the la la to fa fa

If you neglect this step you will not see your icons display on your site.

3. For the button you use this code:

Front Page 5