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:

fp icon boxes

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.

  • Black Studio TinyMCE Widget – A text widget with a fully functional content editor
  • Better Font Awesome – Adds font awesome icons to your site from a plugin
  • Widget CSS Classes – Lets you create or add premade styles for your widgets
  • 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

  1. Go to Appearance >> Customize >> Landing Page Options >> Section 4
  2. Check the box next to “Enable Section 4
  3. Check the box next to “Make Section 4 Fluid
  4. Check the box next to “Sidebars without Spacing
  5. Section 4 Padding is set to 0 (which is 0 pixels)
  6. Set the colours for Text, Link, and Heading, to be white
  7. Click “Save & Publish

 Create First Icon Box

  1. Go to Appearance >> Widgets
  2. Drag a “Visual Editor” widget into the “Section 4a” sidebar position
  3. 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
    insert icon
  4. 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>
  5. Below the heading, type in some content
  6. Below the icon shortcode, create a title heading and make it an H3 heading (or whatever you decide)
  7. 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.
  8. 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:
    icon circle class
  9. 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:

<p style="text-align: center;"><span style="font-size: 32px; line-height: 1;">[icon name="user" class="" unprefixed_class=""]</span></p> <h3 style="text-align: center;">Ready For bbPress</h3> <p style="text-align: center;">Curabitur ut ultricies lorem. Nunc pulvinar mauris non gravida feugiat. Integer tincidunt semper hendrerit. Proin id vulputate ante. Nulla sed nisi lacinia, placerat ante nec, tristique elit. Integer vulputate tellus magna, et euismod.</p>

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

visual editor icon box

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 4 area as an example. If you were to look at the source code, you would see something like this:

section4 source code

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:

  1. Section 4a
  2. Section 4b
  3. Section 4c
  4. 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:

#section4-a {     background-color: #a55b2a;
    padding: 30px 20px; } #section4-b {     background-color: #b8860b;
    padding: 30px 20px; } #section4-c {     background-color: #7c8083;
    padding: 30px 20px; }