Creating a features/services area in Headway

Creating a featured area is very easy in Headway. This tutorial is going to go over how to create an area that looks like this


The great thing is you can do this with just core blocks in the visual editor but I’m also going to go over how to do this with a block from extend called Features. First things first, you’ll need the 3 icons that you want to use.  Mine are from

There may be many other ways you can achieve this as well such as using widgets or using the content block.  I’m only going over two ways you can achieve this.  Icon fonts could also be used so you have many options.

Let’s get started!

Option 1:  Using a text block

Create a new wrapper for this area and draw 3 text blocks of equal width (or as close as you can get, depending on your grid setup)


You can also just create one, and then use the duplicate block feature by right clicking on the block and choosing “Duplicate block”.

Next, add the icon to the first block and your text.

Add an image by dragging and dropping the image in the text editor area or you can click the icon on the toolbar that looks like a framed picture (right of the chainlink and left of the left alignment icon)


Click the image you’ve added to access to the edit pop-up for the image. Once you click on edit, you can change the position to center.


Don’t forget to save!  Once you save, you can then add your text.  Change the alignment to center and hit save again and you’re done.  Repeat for the next two blocks and you are done!

 Option 2: Use the features block

Let’s use the featured block instead.  First you have to install the block (install it as a plugin in WordPress) and activate it, and then you will have a new block available in the Visual Editor called Features.

This time, instead of drawing three text blocks, you’ll draw one block and choose the Features as the block type.  Open the Features block options.  Click on the Content tab in the block options.

You can use Custom Post Types but this tutorial will use Headway as the source.

Click on the pencil next to Description to add the text.   It’s the same editor as the Text block so it should look familiar.

To replicate the icon being in the center and the description also being in the center, you’ll need to add the image in the description instead of using the Choose Image option in the Features block.

headway-featured-services-5Don’t forget to center your text in the editor.

Then, click on the plus (+) at the very right to add 2 more features elements.


Then add your text and images for those remaining 2 features elements.

And that’s really it.  You are done.  You can adjust some other settings in the block options, but this covers the basics.



Spread the word!

5 Responses

  1. Hey Jamie,

    Good quick tutorial. Might be worth mentioning using icon fonts like font-awesome to add these in. I’m not sure where these icons are coming from, but always good to have options and ideas.


  2. Jason,

    Thanks. I actually thought about including a section in using icon fonts but opted against it since I feel like it is enough for it’s own tutorial.

    I’ll mention where I got my icons from though and that icon fonts are an option 🙂

Leave a reply

Copyright © 2016 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress