How to Make a One Page Scrolling Site in WordPress and Headway

In this screen-cast Diane Laidlaw will show you how to make a one page scrolling site which seems to be a very popular request within the Headway community these days. She will go through the process step-by- step to show you how you can incorporate this within your own designs. There is no skill level required for this other than the skill of awesomeness.

Diane Laidlaw is a self-taught web designer from London, England. Having only been in the business for 3 years her Headway designs have been mentioned on many blogs including web-design inspiration.com, cssauthor.com as well as being nominated for a css award this year all by using Headway Themes as her framework.

Diane currently works as a freelancer designer for The Design Creative, she spends her time looking after her 4 year old son, privately tutoring Headway users as well as posting out regular tutorials on YouTube to her subscribers.

Spread the word!

44 Responses

  1. This was a great tutorial but I seem to be missing how you get the content from the page to display. You put the tag in the block title but is there anything else?

    • You would put the content in the page the same way you would do it normally so you would put in a CONTENT block or a TEXT block or any block you want to use and you can drop in the html in the TITLE section.

  2. McWicked! Dropping HTML into Block Title… Setting wrapper to fixed… Nice. We need to see more tuts like this with really practical and innovative advice on how to apply Headway. Cheers!

  3. Hi, great tutorial, if not a little rushed. I nipped over to your youtube series, and they were a lot more informative and step by step. Im guessing the idea on here is to drive interest to your youtube channel. If so, it worked.
    Disappointingly, this tutorial, as well as any others showing this solution from beginning to end are missing on there! Are these to be added at a later date? I hope so πŸ™‚

    I have set the wrappers to fixed, but then changing the navigation to floating now has the navigation on the left, and not centered? Any help?

    More of this kind of tutorials are definitely needed, where a complete solution from beginning to end are shown to users

    • Hey, sorry about the delay, I didn’t see this post. The idea is to really give you bit sized under 10 minute tutorials, on my YouTube channel I have more of an option to break things down a little more. I have done a tutorial on there recently called How to Make a One Page website that goes in to more detail and is complete.

      You don’t set the navigation to floating, you only set the wrapper to floating everything in it will float as well.

      If you have any suggestions let me know as I will be posting them here and on my regular site.

  4. Excellent Tutorial Diane! We totally need more tutorials like these for Headway. I know a lot of us as users want to know how to convert the PSDs and HTML files to Headway indeed. I’ll definitely gather some inspiration and send them over Jamie

    • I have used a full sized image for the background of my wrappers but if you want to use a block like slider or an image blog then it’s probably best you make the wrapper fluid, the block, stretching from left to right and in the design mode make sure that you take off any padding to the wrapper.

  5. Very nice tut, Diane. I really enjoy sites designed like this and would like to implement one, but I wonder about the SEO impact of not having specific, targeted pages– but with everything blurred together. Any thoughts on that? Thanks.

    • From what I know long pages are not disqualified in anyway when it comes to SEO as you have all your content on the one page anyway, so as long as you use the right tags for your content you should be good to go.

    • Your wrappers need to have space between them so you don’t seem them on the same page. So they need to be pretty wide maybe give at 10% padding on the top and bottom and add some content in the middle.

  6. Hi Diane
    Great tutorial. I already followed your Youtube channel before I found this.
    I like the scroll with Anchor links and it’s easy to use.
    But is it possible to have a page scroll without Anchor links?
    What I would like to use on my Headway page is this: http://www.alvarotrigo.com/fullPage/examples/noAnchor.html
    But I’m not sure if it will work within Headway?? He is using a JS and makes each section a full page.
    Is it possible and more important how?? πŸ™‚

  7. Hi Diane
    Great work on this series! I’ve done a few simple sites with headway and was looking for a guide to making sites like these, yours is by far the best.
    Would it be possible to get a copy of the custom css page your were creating for the tutorial?
    The basic elements of that would be a good reference for when to use the design tool and when to use custom css. Looking forward to checkin out more of your stuff!

  8. Hi Diane,
    Thanks for the great info. That is exactly what I want to produce. However I also want some of my menu items to link to a separate static page.
    So I want a scrolling FRONT Page and additional STATIC pages. The menu will link them all together… Can you help me?
    Leanne )

  9. Hi,

    Great info. But I can’t seem to find the option for block title in WordPress, can you tell me what I’m missing here? I tried a few other places for the <a> tags but they don’t work.

    Thanks! πŸ™‚

  10. Exellent tutorial, and here is the outcome: http://www.terminalrage.com

    Just one question for you: How do I get the menu items of the section chosen to be a different color when you are on that section. For instance, on that site, when you click on Book Trailer, it changes color only when you hover on it, but when you release, all the menu items are in the static state. It would be nice to be able to make a distinction of which section you are actually on, as would be the case if each menu item triggered a separate page. Any help would be much appreciated!

  11. What your tutorial is missing though is the active state of the menu items. It is nice having it floating at the top, but in your example you still don’t know in which section of the page you currenty are. The menu’s active state should also change when you scroll manually, instead of clicking the menu items.
    So basically you left out the most interesting part πŸ™‚

  12. Hi Diane,

    a super video, and then I was looking for, thank you for your trouble.

    I’ve never created a OnePage. In my websites I’m always so acted that I always have a switch BlockType in Grid Mode in the wrappers – have “content” is set, but you use the wrapper SwitchBlock Type – “Custom Code”.

    How do you get into the content of your page, for example, “about, portfolio…” in the “Custom Code”. If you give there a path or by copying and pasting.

    Sorry for the bad english

    thank you and best regards

  13. Great tutorial and learned a lot. Enough to get my site done as per your example. Still playing around with it and tweaking it to get my desired result. Its been a long time coming to get it done, and have tried a few themes.

    Procrastination and general laziness has stopped me, but now am on a roll, thanks to you and Headway.

    I purchased Headway, a few years ago, before it went to a subscription based model and got was grandfathered in. I knew Id use it and am invogorated by the results.

    Heres my site http://www.jamesjamesmagician.com

    Thankyou once again and more power to you…

    Regards

    JJ

  14. Hey, nice tutorial. I was following the steps smoothly but I couldn’t figure out how to got to the Custom Code Block page from the Menus page at 2:39 in the video. Can you please explain that part. I am trying to fin that custom code block, but I am not able to.

    Thanks!

  15. Hi,
    I didn’t get where to put the html code. (custom code block) at 2:40 can you please tell me something more about it?
    Regards

Leave a reply

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