Compatibility:

WebSite X5 Evo and Pro

Websites aren't all the same: apart from being different for contents and graphic style, they also have their own peculiar structure, including more or less pages according to the topic they are referred to. There's a kind of websites, however, which is very often used precisely because of how simple and immediate their structure is: the one page websites. 


As the name suggests, they are websites consisting of a single page divided into sections. In this case, the navigation menu entries don't lead to different pages, but rather to a specific part of the page itself. This solution brings many advantages: first of all, the reduced size of the website, of course, but also the user-friendliness linked to the possibility for the visitor to quickly switch from one section to the other, who thus find the needed information more quickly.


You can use WebSite X5 to create a one page website too. We used this structure on many templates, for instance GeenoPanino, PetsVet or CV Power. Let's see how to organize the sitemap and the page contents if you want to create the perfect one page website.


Sitemap organization

The first step is the easiest, for sure: your website needs to have one single page.

  • Open a new project and go to Step 3 - Sitemap Creation: select and remove all the default pages but the Home Page.
  • Use the Levels to set up your navigation menu. Let's assume you want to create a one page websites which includes 3 sections: "Welcome", "Services" and "Contacts": you need to create a new level for each entry. Click on the New Level button and rename it as "Welcome", then repeat these steps for the other two entries.
  • Now that the basic structure of your website is ready, you can move on and add its contents: select the Home Page and click on Next to access Step 4 - Page Creation.


Contents organization

Proceeding with our example, you need to create a single page divided into 3 sections: "Welcome" will be an introductory section presenting your business or company; "Services" will introduce what you can offer to your customers and visitors; "Contacts" will report all the useful contact details for you to be always easy to contact. Develop your page by ideally dividing it into 3 sections and adding the necessary Objects for each. 


Now, add the so-called "Anchors". Anchors are references that help identify the position of an object within a page: it is used to set up links directly to the page section it is referred. You need to add 3 anchors, i.e. one for each section of your one-page website:

  • Select the first Object in the first section you want to associate the Anchor to and click on Anchor> Insert Anchor.
  • Report the name for the first Anchor, such as "Welcome".
  • Now, select the first Object in the second section you want to associate the Anchor to and repeat the mentioned steps. This time, the name could be "Services". 
  • Do the same with the "Contacts" anchor ion the third section.


Now you have a page with 3 anchors on, each referred to section you also reported on the Map on Step 3. Now you just have to connect these Anchors to the menu items for your website to be easily browsable.


#tip - You can find out more about how to create and manage the Anchors on the following guide How to set a link on anchors


Setting up the menu

The last step you need to take is to then set up a link between the menu item and the page section, which is pretty simple:

  • Go back to Step 3 - Sitemap creation, select the "Welcome" menu item and click on Properties.
  • In the Level Properties window, click on to set a Link to be executed on item click.
  • In the Link window, select the Website Page option, which will be the Home Page.
  • Set the Internal Page Anchor by selecting the "Welcome" Anchor, then click OK to confirm.
  • Repeat the same steps to connect the "Services" and "Contents" menu items to the relative Anchors.


Your one-page website is now complete: the visitor will be led to the correct page section simply by clicking on the relative menu item. You can now carry on and export your website online, so to present your products or services to the whole world!


#tip - Sticky Bar. If your page is pretty long and full of contents, you can make the browsing even easier by reporting the menu on the Sticky Bar (see: How to make a menu bar always visible when scrolling down the page). 


#tip -  Full Height. Create a catchy vertical scrolling slides  effect by activating the Full height function (see: How to use the Full Height option to create scrolling slides on your pages).