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

headway-featured-services

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 http://useiconic.com/open.

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)

headway-featured-services-1

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)

headway-featured-services-2

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.
headway-featured-services-3

headway-featured-services-4

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.

headway-featured-services-6

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.

 

 

How to use TypeKit fonts with Headway

This tutorial was done using Headway version 3.7.16

You may want to use fonts outside of Google Fonts.  We have a Screencast tutorial already on using custom fonts but this tutorial will be specific to TypeKit.

Step One:  Login to TypeKit

Step Two:  Find the font you want to use. I’m going to use Proxima Nova.

Make sure you are finding one that is Available for Web Use.

You can find that by looking at the icons underneath the font name.

The <> indicates the font is available for web use. (Left)typekit-1 typkit-2

You can also search for fonts only available for web use (see image on right).

 

 

 

Once you find the font you want, hover over it (you can also click on the font to load the font page).  Then click on “Use Fonts”.

typkit-3

The above is what you will see if you hover over the font on the main screen.  Below is what you should see if you click on the font to load the font’s page.

typkit-4

 

Once you click on Use Fonts, a popup will come up where you will need to click on the “Web” tab.  Once there, click on “Create a new kit”.

typkit-5

 

Step 3: Create your kit

Once you click on “Create a new kit”, a browser pop-up will appear allowing you to name your kit and input which domains will use the kit.

typkit-6Once done, click Continue.

Step 4: Copy and Paste Code into Header Scripts

Once you click continue, you will be given code that needs to go in the <head> tag.  It should look like this:

Copy and paste the code TypeKit gives you into the Headway Header Scripts Area

typkit-7

Once you’ve done that and hit save on that screen, then you can hit continue in the TypeKit pop-up.

Step 5: Now Type in your selectors or code your custom CSS

typkit-8

 

For example, if I wanted to use CSS to apply the font I chose to the body, I would use body {font-family: "proxima-nova";}

If you use the TypeKit selector box, make sure you click “Add” once you type in your selector and then hit “Publish” in the bottom right hand side of the pop-up.

Once you do that, your fonts should change in the selectors you added (assuming you do not have more specific customizations overriding the fonts).

typkit-9

If you have any questions, you can post in the comments or post a thread in the community forums.

Customize your copyright and add a dynamic year

You may want to customize the copyright and still have a dynamic copyright year. You can do this with at least two methods using a little PHP (or javascript) magic! Method 1: Using the footer block The custom copyright input box parses PHP javascript!   In that box, you could input the following code, which…Continue Reading

Apply scripts to certain pages

This is an Intermediate tutorial. You should be familiar with PHP. Headway makes it easy for you to add scripts to your WordPress site with the ability to add scripts to the Header and/or Footer. This option is found in the WordPress » Headway » Options » Scripts/Analytics What is a little known fact is…Continue Reading

How to correctly make edits to the core Headway Blocks

Please note: This is an Advanced tutorial.  Skills required: Creation of child theme and Advanced PHP. You may find that you want to add a feature to one of the core Headway Blocks but when you edit the core files directly, those changes get overwritten when you update Headway.  Not to mention, editing the core…Continue Reading

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

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