How to create a One Page website with Layers and WordPress

Published by @RobHope in Tutorials on 11 Jul 2016

This weeks RSS and website sponsor is the awesome free Layers WordPress theme by theme veterans, Obox.

With WordPress now powering 1/4 of the internet, the CMS vs “blogging software” discussions are officially dust. There is also no denying the increase in One Page WordPress themes.

But still some are quick to shut down the idea on a One Pager using WordPress with the mention of blogging. They forget that WordPress is a solid piece of software with excellent infrastructure to build any website on. One Page websites not only use WordPress for their content management but for the access to a sea of quality free plugins for SEO, security and speed – all elements needed in One Page website design.

Meet Layers

Simply put, Layers is a free WordPress theme that enables you to create a powerful website all within WordPress’s new theme customizer. This means you don’t have to go back and forward between the dashboard and your website. All the action happens real-time as you edit within the customizer on the left.

How free you ask?

This is not your normal free product. This is a quality, well supported offering by a seasoned group of WordPress lovers – the Obox team have been around since the beginning.

… but sustainable?

So you’re probably wondering how they make money and that’s a good question before you commit your next project to Layers – it needs to be sustainable. They offer premium add-ons to Layers as well as pre-designed premium themes that integrate with Layers. Not to mention Obox have a fleet of WordPress themes they’ve built over the past 10 years. So yeah, they’ve got your backs!

Creating a One Pager with Layers

Assuming you’ve setup WordPress already on your own hosting.

Step One: Activate the Layers theme

Go download the Layers theme, upload it to your WordPress theme section, hit Activate.

Step Two: Go through the 1 minute tutorial

layers-welcomeOnce you’ve activated the Layers theme you are automatically taken to their introduction tutorial.

First impressions count and you’ll be so dazzled by how slick their quick setup tutorial is. The layout is clean and the videos are short and on-point.

I can imagine these have been perfected over time, it really is impressive.


Step Three: Choose the One Pager template

Once you’re briefed, you simply section the One Pager template and click the “Start Building” button:


Step Four: Start Customizing

Their tutorial explains it best but here’s a quick breakdown:

  • On the left are your “Widgets” that control the sections of your long scrolling One Page website. You can add, reorder or remove these section (aka Widgets) easily. Examples of Widgets are General Content, Slideshows, Services, Contact Details & Maps
  • When you click a Widget it expands the content into a bigger editable area in the middle. This is where you add your text, links, images and videos.
  • That thin strip on the right is your “Design Bar” where you get to fine tune your widgets. The overall Layers UI is real clean. Usability wise, I’ll be completely honest, it takes a few minutes to fully understand. But once you’ve done it once, you are styling… excuse the pun;)

Step Five: Hit Save & Publish

Your One Page website is live. Obox really has made the most out of the WordPress Widgets functionality. Kudos to them.

FAQ: Can you create a long scrolling One Pager with anchor links?

layers-custom-anchorYes sir, Layers 1.2.11 includes the functionality to easy add ID’s to your sections. This means your top header navigation can sit fixed and your links take you to the relevant sections within the same long page.

They’ve released an in-depth tutorial on exactly this.

Neato, but how does Layers look in action?

Below is a screenshot of a beautiful app One Pager made with Layers. Here is the live demo.


Useful Layers links

Much love,

Twitter: @robhope
Instagram: @rob_hope
Email: [email protected]