How to Add Feature Boxes With Icons in WordPress (2 Methods)

Feature boxes are one of the best ways to highlight your product‘s or service‘s main benefits and convince visitors to take action. According to OptinMonster, feature boxes can increase conversions by up to 38%. With some simple steps, you can start using them to boost results on your WordPress site.

In this detailed guide, I‘ll show you two proven methods to add feature boxes with icons, along with pro tips to maximize their effectiveness. After 15+ years as a webmaster and agency owner, I‘ve used feature boxes extensively to engage visitors and lift conversions for both my own sites and clients.

Let‘s get started!

Why Feature Boxes Are so Valuable

Before jumping into the how-to, let‘s look at why feature boxes should be part of your website toolkit:

Draw attention to your key differentiators

Your product or service probably has 3-5 standout benefits you want to showcase. Feature boxes neatly present those in a scannable way, so visitors immediately see your unique selling points.

Improve scannability

According to Nielsen Norman Group, 79% of website visitors scan pages rather than reading word-for-word. Feature boxes cater perfectly to these users by highlighting information visually.

Guide visitors through your sales funnel

Strategically placed feature boxes can lead visitors through your sales funnel and call them to take action. For example, use benefit-driven boxes on product pages, and value proposition boxes on pricing pages.

Boost engagement

Feature boxes add much-needed visual variety to text-heavy pages. The icons and graphics help break up the content, keeping people engaged.

Quickly communicate value

In just a glance, visitors understand what your product offers and why it‘s beneficial. Feature boxes use icons and headlines to convey this value clearly and concisely.

Now that you know why feature boxes are so valuable, let‘s look at how to add them in WordPress.

Method 1: Using the WordPress Block Editor

The WordPress block editor (Gutenberg) allows you to add feature boxes without installing any additional plugins. Let‘s walk through how to use it:

Step 1: Add a Columns block

First, create or open the page where you want your feature boxes to appear. Click the "+" button to insert a new block.

Search for "Columns" and select the layout you want. A two-column or three-column works perfectly for most feature boxes.

A two-column layout creates space for two feature boxes.

Step 2: Add icons

Inside each column, insert an Icon block from the formatting menu. WordPress has a built-in icon library with over 1500 icons to choose from.

To use your own icon image instead, select the "Media Library" tab when adding icons. SVG images maintain sharp quality at any size.

Insert icons from the WordPress icon library or your own SVG images.

Step 3: Add your feature text

Below each icon, insert a Paragraph block to add your text. Write a headline or sub-headline first, followed by a description of the feature.

Use the formatting options to adjust text alignment, colors, fonts, etc. Inserting a Call-to-Action block is also a great idea.

Flesh out the details of each feature beneath the icons.

Step 4: Format your feature boxes

With your icons and text in place, select the Columns block again to access formatting options.

Here you can add background color, adjust spacing between columns, and even duplicate the block to create more feature boxes.

Use block formatting options to polish the design of your feature boxes.

Once your feature boxes look good, update or publish your page to make them live!

Pro Tip: Install the Stackable Blocks plugin to access additional premium blocks like progress bars, Google maps, and more.

Method 2: Using a WordPress Page Builder Plugin

For maximum design flexibility and customization, a dedicated page builder plugin like Elementor is the way to go.

Here‘s how to add beautiful feature boxes with Elementor:

Step 1: Create a new page

First, install and activate Elementor. Then create a new page and select "Canvas" or any blank template.

This opens the page in Elementor‘s live drag and drop builder. The left sidebar contains widgets you can add.

Step 2: Add the Feature Box widget

Under the "General Elements" category, find the Feature Box widget. Drag this onto your page canvas to insert a pre-made box.

You can add multiple feature boxes by duplicating this widget as many times as you need.

Elementor‘s Feature Box widget adds an icon, headline, and description.

Step 3: Customize the design

Select any feature box to open the sidebar settings panel. You can:

• Upload your own icon image
• Change icon position and size
• Adjust text fonts, colors, and sizing
• Add animations
• Set advanced styles like box shadows

Use these options to create a completely custom design for each box.

The settings sidebar provides tons of design customization options.

Step 4: Arrange your feature boxes

One advantage of Elementor is that you can place widgets anywhere with drag and drop.

Experiment with different layouts by displaying your boxes in rows, columns, grids, etc. Responsiveness is built-in too.

Drag and drop allows full control over feature box positioning.

When your design looks perfect, click "Publish" to make it live!

Expert Tips for Creating Effective Feature Boxes

Now that you know how to add feature boxes in WordPress, here are some pro tips to maximize their impact:

• Highlight 3-5 main benefits – Avoid cramming too many points into each box. Focus on your top selling points.

• Use crisp icon graphics – Icons grab attention, so use sharp SVGs or PNGs. Stay consistent with your icon styles.

• Write strong headlines – Summarize the benefit using power words that speak to your audience.

• Use the active voice – "Boost sales" not "Sales will be boosted". Active voice is more compelling.

• Watch text length – Keep descriptions short and scannable. You can elaborate more in body content.

• Add relevant links – Link headlines or calls-to-action to related content or product pages.

• Strategically place boxes – Guide visitors through your sales funnel using box placement and copy.

• Check desktop and mobile – Ensure your boxes look great on all screen sizes. Mobile responsiveness is key.

Recap and Next Steps

Here‘s a quick recap on everything we covered on adding feature boxes in WordPress:

• Feature boxes showcase benefits, improve scannability, and guide visitors. They‘re worth adding to your site.

• The WordPress block editor provides an easy way to add boxes using columns and icons.

• For more control, use Elementor or a similar page builder with pre-made feature box widgets.

• Writing compelling copy, choosing good icons, and strategic placement all impact effectiveness.

• Test different layouts and tweak your designs until you find what converts best.

Adding high-performing feature boxes takes testing and refinement. I suggest starting with the WordPress block editor to quickly build your first version. Then analyze results and keep improving your boxes over time.

I hope this detailed guide helped shed light on creating great feature boxes for your WordPress site. Let me know if have any other questions!