FP – Front Page Icon Boxes

Front page icon boxes are designated only to the front page template, but gives you added visual aesthetics to your page content. You get up to four (4) icon box columns, each one has dynamic width that will adjust based on how many are published. Here is an example from the live demo site showcasing 3 icon boxes:

fp iconbox demo

Icons are using Font Awesome, so you get a large selection of choices from their main site:

Font Awesome Icons

Icon boxes are based on pages, so each one you make will require a page to be made with content. Each icon box will load an excerpt from the page, but once someone clicks on the button or link, they will be taken to the page to see the rest. These pages can have a combination of text, images, video, and other forms of media.

Icon Box Settings and Options

Each icon box will have the same settings, but here is a list of available options per icon box column, but you do not have to use them all. For example, you can leave the heading and intro fields empty and this will disable them on the front-end view.

  • Page – This is the page you will load an excerpt and title into each icon box
    fp iconbox pages
  • Heading – This is a title heading for this section
    fp iconbox heading
  • Intro – This is an introduction to this section
    fp iconbox intro
  • Number of Columns – You get up to 4 icon box columns
    fp iconbox column count
  • Section Padding – This will adjust the top and bottom padding space in percent. Enter a number or use the arrows when hovering over the field
    fp iconbox padding
  • Button Label – This is the button text
    fp iconbox button label
  • Section ID – This is an ID if you plan to use a one-page scrolling layout
    fp iconbox id
  • Excerpt Size – This is the page excerpt size
    fp iconbox excerpt size
  • Section Background Colour – This is the background colour to the icon box area
    fp iconbox bg
  • Icon – This is the font awesome icon you enter in
    fp iconbox icon
  • Icon Background Colour – This is the round background to your icon
    fp iconbox icon bg
  • Icon Colour – Icon colour
    fp iconbox icon colour
  • Section Text Colour – Section text and icon box text colour
    fp iconbox text colour
  • Section Heading Colour – Section Heading Colour
    fp iconbox heading colour
  • Icon Box Button Colours – Colour for your button and hover state
    fp iconbox button colours

Access the Icon Boc Settings

  1. Go to Appearance >> Customize >> Front Page >> Section Icon Boxes
    fp iconbox tab
  2. From here, you can enable and configure your icon boxes
  3. Click “Save & Publish