Stay Google “mobile friendly” with Headway and the built-in responsive grid

Stay Google “mobile friendly” with Headway and the built-in responsive grid

On February 26, 2015, Google announced a major change to it’s algorithm that will roll out starting April 21, 2015 where “mobile-friendliness” will be expanded as a ranking signal in searches.

The great news is, if you are using Headway version 3.05 or above, you should simply have to turn on the built-in responsive grid to pass Google’s test.  You turn the responsive grid on in Headway with 2 steps.

Steps

  1. Access your Headway Visual Editor in Grid Mode
  2. Under Setup, click on the “Responsive Grid” tab & Place a check next to “Enable Responsive Grid” and don’t forget to save!

turn-on-rg

That’s it!  Most sites should pass Google’s test then with just that one click but there may be other steps needed depending on the design of the site.

 

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…Continue Reading

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

Headway Newsletter

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

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