Landing Page – Add Icon Boxes

The icon boxes can be done with a text widget, but we will be using the Black Studio TinyMCE Widget plugin for this. The reason is that we can easily add icons using the Better Font Awesome plugin to get better functionality to create this:

Let’s start with the plugins we will need for this tutorial…although they are considered optional for this theme, they add enhancement for development of a website when using this theme.

Simple Custom CSS – Gives you the ability to create custom CSS. However, if you use Jetpack, you can use the Custom CSS feature.

For the purpose of this tutorial and to do what I did for the demo, you can install and activate those two plugins if you do not have them already.

NOTE When you activate the Better Font Awesome plugin, go to the customizer >> Site Options, and uncheck the “Load Font Awesome” setting so we don’t have two font awesome scripts being loaded; we’ll use the plugin one.

Activate and Style Section 4

Go to Appearance >> Customize >> Landing Page Options >> Section 4

Check the box next to “Enable Section 4“

Check the box next to “Make Section 4 Fluid“

Check the box next to “Sidebars without Spacing“

Section 4 Padding is set to 0 (which is 0 pixels)

Set the colours for Text, Link, and Heading, to be white

Click “Save & Publish“

Create First Icon Box

Go to Appearance >> Widgets

Drag a “Visual Editor” widget into the “Section 4a” sidebar position

At the top of the editor is an “Insert Icon” button to click on. Search for the icon you want and click on the icon. This will automatically insert a “shortcode” into your editor

Select the icon shortcode and then using the font size from the editor, choose a size something like 32px. Once done, we need to make one small style adjustment, so we will switch to the “Text” tab and on the icon code, we need to add “line-height: 1;” to our code like this:<p><span style="font-size: 32px; line-height: 1;">[icon name="user" class="" unprefixed_class=""]</span></p>

Below the heading, type in some content

Below the icon shortcode, create a title heading and make it an H3 heading (or whatever you decide)

Select all of your content, including the icon shortcode, and then from the editor, click on the “Align Center” option so that everything gets centered.

If you installed and activated the “Widget CSS Classes” plugin, at the bottom of your widget should be a field like you see below. Enter in “icon-circle” to get that style of an icon:

Click on “Save“

When all done, your widget icon box source code should look something like the code below…which comes in handy if you decide to use a text widget instead and create your icon boxes manually without the editor:

On the visual tab of your editor, your content area will look something like this:

Colour Your Icon Boxes Individually

Colouring each icon box individually is not really part of this theme, but it’s more of a bonus enhancement to using this theme. So I decided to add this tutorial to the icon boxes tutorial so that you can expand on the capability with a little extra HTML coding. Although you could create new CSS widget classes to do just that, or you can simply create a quick custom CSS style on a per-widget-basis. This is where the plugin called “Simple Custom CSS” comes in handy, or if you are using Jetpack, you can use the “Custom CSS” feature that is built into it.

Finding the Icon Box Sidebar Name

We need to find the sidebar’s ID name by looking at the source code. Let’s take our Section 4area as an example. If you were to look at the source code, you would see something like this:

NOTE I used the webmaster tools in my Chrome browser to view this, but you can use any browser’s own method to view the source code.

We will actually be adding a background colour to the sidebar instead of the widget itself, so looking at the source code above, we found the ID of the first sidebar we need has the ID of “section4-a” which represents our sidebar position “Section 4a” in our widgets admin area. So now we know the ID we need to apply some custom CSS code like this:

#section4-a {
background-color: #a55b2a;
padding: 30px 20px;
}

Remember that each section has 4 sidebar positions:

Section 4a

Section 4b

Section 4c

Section 4d

To colour the other sidebars (if used), we simply repeat that custom CSS above, except change the ID to be #section4-b, #section4-c, and #section4-d, respectively. For our live demo site, here is the complete custom CSS I did: