Creating a single page website using Headway Part 2

In Part 1, we created the page, the content, and layout in the grid mode editor. In Part 2, we’re going to do some unique styling to set each section of the one page layout apart from the others.

Step 1 Styling the page and wrapper body

In the VE, change to Design Mode (where we will be spending all of our time). In Blocks, select Body and let’s give the body a background color of #ecffe3. A nice, soft green.

In the Wrapper, we’re going to set the background color to Transparent, and the Box Shadow to Transparent.

Click Save

Step 2 Styling the global Navigation properties

There are some stylings that I want to be consistent throughout the page. The first is a dark top and bottom border and text size and font.

Click on Blocks and click on Navigation. Set the border color to #888888. Click on Menu Item and change the Font Family to Lucida Grande and Font Size to 16px.

Click Save.

Step 3 Styling the TOP Content

We’re going to give each of the content sections a different background color and style to set them off.

Click on Blocks and click on Custom Code. In the “Instances”, select the top content navigation, in our example, block #10.

Set the background color to #E3FFF7.

Click on Blocks and click on Navigation. In the “Instances”, select the top content navigation, in our example, block #2.

Set the background color to #E3FFF7.

Click on Blocks and click on Content. In the “Instances”, select the top content block, in our example, block #3.

Set the background color to #E3FFF7.

Click Save.

But what’s that? There’s a gap between the Custom Code, Navigation and the content where the background color shows through. Let’s get rid of that.

In order to make the content look attached to the navigation bar, we need to get rid of the bottom margin of the navigation blocks so that they fit snugly and there is no background color showing through.

This will take some CSS code in the LiveCSS editor. Copy and paste this into the LiveCSS editor:


.block-type-navigation, .block-type-custom-code {margin-bottm:0;}

While we’re at it, lets shrink the custom code block down to 5px tall.


.block-type-custom-code {min-height:5px !important;}

Click Save.

Step 4 Styling the MIDDLE Content

Click on Blocks and click on Custom Code. In the “Instances”, select the top content navigation, in our example, block #11.

Set the background color to #FFEDE3.

Click on Blocks and click on Navigation. In the “Instances”, select the top content navigation, in our example, block #4.

Set the background color to #FFEDE3.

Click on Blocks and click on Content. In the “Instances”, select the top content block, in our example, block #5.

Set the background color to #FFEDE3.

Click Save.

Step 5 Styling the BOTTOM Content

Click on Blocks and click on Custom Code. In the “Instances”, select the top content navigation, in our example, block #12.

Set the background color to #FFE3E8.

Click on Blocks and click on Navigation. In the “Instances”, select the top content navigation, in our example, block #4.

Set the background color to #FFE3E8.

Click on Blocks and click on Content. In the “Instances”, select the top content block, in our example, block #5.

Set the background color to #FFE3E8.

Click Save.

Step 5 Styling the Media Content

We want that media block to look like it belongs with the bottom content, so we’re going to have to add some styling.

Click on Blocks and click on Media. Set the background color to #FFE3E8.

But the media isn’t centered in the page and there is that pesky gap between the media block and the previous content block. Let’s fix that.

In LiveCSS, add the following to center the video in the media block:


.block-type-media {text-align:center;margin-top:-10px;}

Click Save.

Step Last

Take a look at your new one page website and enjoy! We’ve done all of this with only 3 lines of custom css and a few lines of html.

A one page website using Headway Theme

Spread the word!

8 Responses

  1. Both these walk-thrus are great — and really show off what you can do.  What I don’t care for is the fact that all the example pics are so small.  Plus, a link to a working version would be nice.

  2. Do you know of any way to show only one page at a time so that when you link to middle content, the middle content displays and it hides the top and bottom content?

Leave a reply

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