How to Add Feature Boxes With Icons in WordPress

Introduction: Enhancing User Experience with Feature Boxes

Feature boxes, also known as benefit boxes or highlight boxes, are a visually appealing and effective way to showcase the key features, benefits, or services you offer on your WordPress website. By combining concise text with compelling icons, you can quickly grab your visitors’ attention and communicate your value proposition in a digestible format. This article provides a comprehensive guide to adding feature boxes with icons in WordPress, covering various methods from plugins to custom coding.

Method 1: Using WordPress Plugins

One of the easiest and most accessible ways to add feature boxes is by leveraging the power of WordPress plugins. Many plugins offer pre-designed feature box templates and customization options, requiring minimal coding knowledge.

Choosing the Right Plugin

Several WordPress plugins cater to creating feature boxes. Some popular options include:

• Elementor Page Builder
• Beaver Builder
• Visual Composer
• SiteOrigin Page Builder
• Ultimate Addons for Elementor/Beaver Builder/Visual Composer
• Feature Box (Specific Feature Box Plugins)

When selecting a plugin, consider the following factors:

• Ease of Use: Does the plugin have a user-friendly interface and drag-and-drop functionality?
• Customization Options: Can you easily customize the appearance of the feature boxes, including colors, fonts, and icons?
• Responsiveness: Are the feature boxes responsive and display correctly on different devices?
• Features: Does the plugin offer the specific features you need, such as icon libraries, animations, and integration with other plugins?
• Pricing: Is the plugin free, premium, or freemium? Does the premium version offer enough value for the cost?

Installing and Activating the Plugin

After choosing a plugin, install and activate it through the WordPress admin panel:

1. Navigate to Plugins > Add New.
2. Search for the plugin by name.
3. Click “Install Now” and then “Activate.”

Creating Feature Boxes with a Plugin (Example: Elementor)

Let’s use Elementor as an example to demonstrate how to create feature boxes:

1. Edit the page or post where you want to add the feature boxes with Elementor.
2. Search for “Icon Box” or “Feature Box” in the Elementor elements panel.
3. Drag and drop the element onto your desired location on the page.
4. Customize the icon, title, and description of the feature box in the Elementor settings panel.
5. Adjust the styling options, such as colors, fonts, and spacing, to match your website’s design.
6. Duplicate the feature box element to create additional boxes.
7. Arrange the feature boxes in a visually appealing layout using Elementor’s column system.
8. Click “Update” to save your changes.

The process is similar for other page builder plugins, although the specific element names and settings may vary.

Method 2: Using Custom CSS and HTML

For users comfortable with coding, creating feature boxes with custom CSS and HTML offers greater flexibility and control over the design.

HTML Structure

The basic HTML structure for a feature box typically involves a container div, an icon element, a title element, and a description element.

“`html

“`

* `feature-box`: The main container for the entire feature box.
* `feature-icon`: The container for the icon.
* `feature-title`: The heading for the feature box.
* `feature-description`: The text describing the feature.
* `fas fa-star`: This class comes from Font Awesome which adds the actual icon.

Adding Icons (Font Awesome)

Font Awesome is a popular icon library that provides a wide range of scalable vector icons that can be easily added to your website using CSS classes.

1. Include the Font Awesome CSS file in your WordPress theme. You can do this by adding the following code to your theme’s `` section in `header.php` file, or using a plugin like “Insert Headers and Footers”.
   “`html “`
   (Replace `6.0.0` with the latest version of Font Awesome). Alternatively, install the Font Awesome plugin.
2. Choose an icon from the Font Awesome library (fontawesome.com).
3. Use the corresponding CSS class in your HTML code (e.g., ``).

CSS Styling

The CSS code controls the appearance of the feature boxes. You can add the CSS code to your theme’s `style.css` file or use the WordPress Customizer (Appearance > Customize > Additional CSS).

Here’s an example of CSS code to style the feature boxes:

“`css
.feature-box {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 20px;
border: 1px solid #eee;
border-radius: 5px;
}

.feature-icon {
font-size: 3em;
color: #007bff;
margin-bottom: 10px;
}

.feature-title {
font-size: 1.5em;
margin-bottom: 5px;
}

.feature-description {
font-size: 1em;
color: #666;
}
“`

* `display: flex;`: Creates a flex container.
* `flex-direction: column;`: Arranges flex items vertically.
* `align-items: center;`: Centers flex items horizontally.
* `text-align: center;`: Centers the text within the feature box.
* `padding: 20px;`: Adds padding around the content.
* `border: 1px solid #eee;`: Adds a subtle border.
* `border-radius: 5px;`: Rounds the corners.
* `font-size: 3em;`: Sets the icon size. `em` is a relative unit.
* `color: #007bff;`: Sets the icon color (example uses blue).
* `margin-bottom: 10px;`: Adds space below the icon.
* `font-size: 1.5em;`: Sets the title size.
* `font-size: 1em;`: Sets the description size.
* `color: #666;`: Sets the description color (example uses gray).

Implementing the Code in WordPress

You can add the HTML code directly to your page or post using the WordPress editor. Switch to the “Text” or “Code” editor to insert the HTML. Alternatively, create a custom shortcode to simplify the process of adding feature boxes to multiple pages.

Method 3: Using a Theme’s Built-in Features

Many premium WordPress themes come with built-in feature box functionality. This approach often provides a seamless integration with the theme’s design and offers a user-friendly interface for creating and managing feature boxes.

Checking Theme Documentation

The first step is to consult your theme’s documentation to see if it includes feature box functionality. The documentation should provide detailed instructions on how to use the built-in feature box options.

Using Theme Options or Customizer

If your theme supports feature boxes, you’ll typically find the settings in the theme options panel or the WordPress Customizer (Appearance > Customize). Look for sections related to “Features,” “Services,” or “Homepage Settings.”

Example: Using Theme Customizer

Some themes may have a dedicated section in the Customizer for managing feature boxes. In this section, you can typically:

• Add new feature boxes.
• Customize the icon, title, and description of each feature box.
• Choose the layout and arrangement of the feature boxes.
• Adjust the styling options, such as colors and fonts.

The specific options and settings will vary depending on the theme.

Method 4: Creating a Custom Shortcode

Creating a custom shortcode provides a reusable way to insert feature boxes into your WordPress content. This method requires some PHP coding knowledge.

Adding the Shortcode to `functions.php`

Add the following code to your theme’s `functions.php` file (or a custom plugin) to create a shortcode:

“`php
function feature_box_shortcode( $atts, $content = null ) {
$atts = shortcode_atts( array(
‘icon’ => ‘fas fa-star’,
‘title’ => ‘Feature Title’,
), $atts );

$icon = esc_attr( $atts[‘icon’] );
$title = esc_attr( $atts[‘title’] );

$output = ‘

‘;

return $output;
}
add_shortcode( ‘feature_box’, ‘feature_box_shortcode’ );

“`

* `feature_box_shortcode`: This is the name of the function that will generate the HTML.
* `shortcode_atts`: This function defines the attributes that can be used with the shortcode.
* `icon`: The default value is ‘fas fa-star’.
* `title`: The default value is ‘Feature Title’.
* `esc_attr`: Escapes the attributes for safe use in HTML.
* `do_shortcode`: Allows other shortcodes to be used within the description.
* `add_shortcode`: Registers the shortcode with WordPress.

Using the Shortcode in Your Content

You can now use the `[feature_box]` shortcode in your posts and pages. For example:

“`
[feature_box icon=”fas fa-rocket” title=”Fast Delivery”]
We offer fast and reliable delivery services.
[/feature_box]
“`

This will display a feature box with a rocket icon, the title “Fast Delivery,” and the description “We offer fast and reliable delivery services.”

You can customize the icon and title attributes as needed. The content between the opening and closing shortcode tags will be used as the feature box description.

Considerations for Design and User Experience

When designing feature boxes, keep the following considerations in mind:

• Visual Hierarchy: Use a clear visual hierarchy to guide the user’s eye. Make the icons and titles prominent and the descriptions concise.
• Consistency: Maintain consistency in the design of your feature boxes, including colors, fonts, and spacing.
• Responsiveness: Ensure that the feature boxes are responsive and display correctly on different devices. Test your design on various screen sizes.
• Accessibility: Consider accessibility when choosing colors and fonts. Use sufficient contrast and ensure that the text is readable for users with visual impairments.
• Relevance: Choose icons and descriptions that are relevant to your target audience and clearly communicate the value proposition.
• Placement: Place feature boxes strategically on your website, such as on the homepage, landing pages, or product pages.
• Call to Action: Consider adding a call to action (CTA) button to each feature box to encourage users to take the next step.