One page sites are a cool way to present your business or personal resume or portfolio in a concise and friendly way. Your visitor doesn’t need to leave the page at all and he or she can easily navigate between sections so it doesn’t matter if the page gets a little longer than usual.
So today I’m going to show you how easy it is to create a one page site using CloudPress, the ultimate WordPress theme builder.
Here is the site I’m going to build in a few easy steps and this won’t take longer than 10 minutes:
So, without further ado, let’s get started!
Step 1 – Add a header and a footer
I created a new blank project on CloudPress and I have the home page open.
In the “Add blocks” panel I will select the “Header” category and I’ll select one of the headers – I picked the one with a video background and top menu.
Now we have a header.
In the same “Add blocks” panel I will select the “Footer” category and I’ll select a footer – I picked a simple one, just a footer menu and a logo.
Now our project looks like this:
Step 2 – Define the sections I want in my onepager
Next I will create the content sections for our onepager. Let’s say we want the following sections:
- About Us
These are just a few examples. Of course you can create any other section that you find useful for your site – the process is the same.
For the sake of keeping this short I will use some of the predefined content sections that are available in the CloudPress theme builder app in the “Add blocks” panel.
For the “About Us” section I will add a simple block with some text and an image.
You don’t necessarily have to use only one block for one section – you can add as much content as you like – for example I’ll add another block with an image in the center and some text around it.
We’re done with the “About us” section.
For the “Services” section I’ll add a block with some text and images organised in columns.
For the blog section I will use a “Blog Posts” component, not a predefined block. So first I will add a blank section using the “+” sign on the left side of the canvas.
I’ll leave the default layout settings – one column, centered.
Now I’ll go to the “Add Elements” panel, “Blog Posts” section and I will drag the “Blog Posts” component
A popup will appear asking me how would I like the blog posts to be displayed – for this example I will choose the “grid” option
Now I have my blog section ready, too. By default it will display the latest blog posts but in the Options panel you can configure it to display any posts you want. For example you can display the posts that have a tag or a category, etc
Here is how my blog section looks like.
For my Contact section I will use one of the blocks again – one from the Contact category.
Now the project should look like this:
We have all the content in place – now all we need to do is link it to the menu.
Which takes us to the third and last step.
Step 3 – Link the menu items to the sections
To link a menu button to a page section we need to be able to identify that section – so we need to give it an ID.
We can easily to that by selecting the section (or the first element in that section) and setting the ID in the Options panel.
For “About Us” I will select this section, choose “section options” in the settings menu and the Options panel will appear
In the options panel I will set the ID parameter (which by default is empty) to “about”.
Now that I have an ID for the section I will select the “About” button in the menu and I will link it to the “about” section.
Double-click the menu button or choose “edit menu item” in the settings menu to open the Options panel. The panel will automatically add open a small popup to edit that specific menu item.
Choose “Page Section” in the “Link Type” parameter and in the “Section ID” parameter type “#about”. Also check the “use smooth scroll” checkbox so we’ll have a nice scrolling effect instead of just jumping to the section.
So now we have our first section set up – let’s save and preview. The project should look like this:
Next we’ll have to do the same thing for “Services”, “Blog” and “Contact”. The process is exactly the same:
- Select the section
- Set the ID (let’s say “services”, “blog” and “contact”)
- Select the respective menu button and link it to the section
I will also remove the submenu items for services as we don’t need them in this example. This can easily be done by selecting the item in the menu structure list and using the “-” button:
Now our one page website is ready. If you followed the instructions your project should look like this:
This is just the first of a series of practical tutorials that we’ll be posting on our blog. Would like to see a tutorial on a specific aspect of using CloudPress? Let us know and we’ll add it to our list.