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:

http://tutorialonepage.horea-work.cloud-press.net/

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.

1_add_header

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.

2_add_footer

Now our project looks like this:

http://tutorialonepagestep1.horea-work.cloud-press.net/

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
  • Services
  • Blog
  • Contact

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.

3_add_about_us

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.

4_add_about2

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.

5_add_features

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.

6_add_blank_section

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

7_add_blog_posts

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

8_use_grid_layout

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.

9_blog_options

For my Contact section I will use one of the blocks again – one from the Contact category.

10_add_contact_form

Now the project should look like this:

http://tutorialonepagestep1.horea-work.cloud-press.net/

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

11_section_settings

In the options panel I will set the ID parameter (which by default is empty) to “about”.

12_section_id

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.

13_menu_item_popup

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.

14_link_type

So now we have our first section set up – let’s save and preview. The project should look like this:

http://tutorialonepagestep3.horea-work.cloud-press.net/

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:

15_remove_menu_items

Now our one page website is ready. If you followed the instructions your project should look like this:

http://tutorialonepage.horea-work.cloud-press.net/

So this is how easy you can create a one page site in CloudPress. If you have any questions or suggestions feel free to comment or contact our support staff.

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.

Happy designing!

 

No tags.