Headway 3.0.5 Now Includes Responsive Grid Design Capabilities

One of the most the most exciting features of Headway Themes 3.0.5 is the responsive options you have available at your finger tips. You no longer have to install a plugin and create separate mobile site for your mobile visitors. With a few clicks you can make your site mobile friendly! We’re going to spend the next couple of minutes seeing how easy it is to make your Headway Themes powered website mobile friendly. And the great part of it is that is really only two steps you need to do to get your site in order!

Step One

The first step is to load up the Visual Editor’s Grid Mode (link requires login). Once you get into the Visual Editor, all you have to do is click the ‘Enable Responsive Grid’ checkbox under Responsive Grid in the Panel. There’s also an option to disable the Wrapper Margin for Smartphones, but we’ve already went ahead and checked that by default. You’ll want to take a look at the site though on those devices to see if you need this unchecked. When you’re finished click save and you’re set!

Next click the ‘View Site’ link next to where the Visual Editor says what page you’re currently editing. You can now resize your browser and see how the site changes with before your eyes! This is the same type of thing that will happen on a mobile device! The way this works is with the use of media queries. To get an idea of what media queries are I’ve included a few links for you. My favorite one actually shows you what sites look like at various stages.

Now this is great and for probably 80-90% of the use cases this is the only step you need to do. But as you remember, I said there was 2 steps. So we’ll move on to step 2.

Step Two

Alright, so step two is actually a single or multiple step process. When building this responsive feature into Headway Base, we wanted to make sure that you had more control of what the site did when it was viewed on a mobile browser. So we built in what I think is the best thing about our responsive feature.

You should already be familiar with how blocks work and how each block on a layout has options. Well in the Options panel for each block, you are able to select if you want the block to be hidden when the responsive grid takes shape. This is particularly helpful if you have say a 3 column layout where the two outside columns are widget areas. With the way that the responsive grid feature works, it’s going to take the left most block in a row and make that the top. So in this case, your middle column, the content block, is going to be place underneath a widget block. What would happen if you didn’t enable ‘Responsive Grid Block Hiding’ on the widget block is that your users would have to scroll through your list of widgets first, and then get to the content.

Of course this is just one example, but I’m sure there are others. For instance, you might want to be able to show only certain blocks/content to visitors that access your site from a desktop computer. This would now be a cool way to make sure that happens. And it’s very easy to do!

Once you’ve determined which blocks on the layout you want to hide with the responsive grid, just save the layout and you’re set. You will however, have to do this for multiple pages if you want to hide specific blocks on other pages.

But wait! I want my mobile users to still access the real site?!? That’s great! We also built in a way that when the responsive grid feature is activated, a link will appear in the footer block (so make sure you have a footer block on all of your pages!) that will allow them to ‘turn-off’ the responsive grid and view the site normally!

So there you have it! A kick-butt feature for all you mobile friendly designers/developers out there that want to make sure your site looks good on a mobile device! You can easily enable the Responsive Grid feature and really make your site stick out when your visitors are looking at it on their favorite mobile devices!

Spread the word!

17 Responses

  1. That is one of the main reasons I am trying to learn headway.. moving from Builder. I noticed on my iphone that using this still seems to be treated like a mobile plug in installed. It still says go to full site. I was thinking it scaled automatically to screen size regardless of what the user does.

  2. Quick suggestion for the next Headway version…
    I love the Responsive Grid Block Hiding, but I also need a function for Responsive Grid Block SHOWING. So we can create a custom mobile menu (or other mobile features) that only shows up in the ‘smaller’ mode.

  3. Hi. I really appreciate your work. Since I bought my license I really improved my speed on making web sites. I’ve a question about this topic. I would like to swap a menu bar on desktop with a drop-down list on mobile browser. The matter is that there’s no option to hide a block on desktop computer but only for mobiles. There’s a different way to make this?
    Hope my english is good enough to be understandable!

    • Hi very similar. Am loving using headway, probably the most customisable drag and drop system I’ve used. However, I would like to enable a drop down menu or similar for mobile devices, but have the full bar for proper web browsers. I know in responsive mode I can turn off sections that I don’t want seen on mobiles, but is there a way of altering the layout of the menu? many thanks in advance for any help.

  4. When enabled, it resizes my videos to the width of the content on my computer. I have to disable the responsive grid for my embedded content to return back to the size manually set in the code. How do I keep this from happening?

  5. Can anyone tell me how to get my home page to show up on smartphones. When I view my website on my Iphone the home page just show the navigation for all the other webpages and blog of my website. I cannot see the content for the homepage in the main block. Website is happyeaters.org

  6. I love using Headway and I have started using it for all my new sites. But there is one thing that I would like to do but have been unable to find a way. I would like to make the text size in my page header responsive and use a separate print stylesheet. I note that Headway uses media queries but I can’t find a way to work with the resulting stylesheets. Is there a way to do this?

  7. I don’t seem to have the option to hide blocks in responsive mode (step 2) – the check box just isn’t there, whether responsive grid is enabled or not. Is this something that was phased out in later Headway versions, or what am I missing?

  8. Hi.

    I was wondering if it’s possible to do the following in Headway:

    1. Breakpoint for desktop and large screens: Can I replace the regular navigation with a hamburger menu item?
    2. In general, can the default headway mobile menu be customized/styled in the visual editor?
    3. Can the mobile menu be positioned differently i.e. on the top right or left instead of underneath the logo?

    I tried to search for help docs and tutorials but couldn’t really find anything. Maybe someone can answer my questions or point me to some help/tutorials.


Leave a reply

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