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.
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.
@Crispee Sorry about the example pics being so small. I’ll keep that in mind for the next tutorial and have a link somewhere of a larger version of the picture. While I’d love to have a working version that you could look at, it becomes a bit hard to build and maintain a lot of different websites just for tutorials. If I figure out an easy way, I’ll do that in the future.
@kelliawise that would be great.
@Crispee @kelliawise why not utilize the multisite capabilities of WordPress?
@alikat @Crispee @kelliawise
@alikat @Crispee multisite is an option. I’ll keep that in mind.
I noticed you took “themes” off your homepage. Any news on eCommerce themes?
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?