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:
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
- Heading - This is a title heading for this section
- Intro - This is an introduction to this section
- Number of Columns - You get up to 4 icon box columns
- 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
- Button Label - This is the button text
- Section ID - This is an ID if you plan to use a one-page scrolling layout
- Excerpt Size - This is the page excerpt size
- Section Background Colour - This is the background colour to the icon box area
- Icon - This is the font awesome icon you enter in
- Icon Background Colour - This is the round background to your icon
- Icon Colour - Icon colour
- Section Text Colour - Section text and icon box text colour
- Section Heading Colour - Section Heading Colour
- Icon Box Button Colours - Colour for your button and hover state
Access the Icon Boc Settings
- Go to Appearance >> Customize >> Front Page >> Section Icon Boxes
- From here, you can enable and configure your icon boxes
- Click “Save & Publish“