Compatibility:

WebSite X5 Evo and Pro

A website does not necessarily need to consist of many pages. In some cases, a simple and immediate structure designed to guide visitors along a single path can be much more effective.


“One page” or single-page websites were created precisely with this goal in mind: gathering all the main content into a single page divided into sections that can easily be reached through the navigation menu.


This solution is particularly suitable for:

  • simple showcase websites;
  • landing pages;
  • portfolios;
  • company presentations;
  • events;
  • local businesses;
  • professionals and freelancers.


Thanks to scrolling navigation, visitors can quickly move from one section to another without changing page, improving the smoothness and immediacy of the browsing experience.


With WebSite X5, you can also easily create a one-page website using anchor menus and an internal page navigation structure.


Several WebSite X5 templates already use this approach, such as GeenoPanino, PetsVet, or CV Power. 


The main steps are:


#tip - A one-page website can be a very effective solution when you want to present a limited amount of information in a clear, fast, and easy-to-consult way, even on smartphones.


How to create a one-page website step by step

The first step is to prepare a structure suitable for a single-page website. 


In this type of project, there is only one real page: the Home Page. The menu items are instead used to move between the different sections of the same page.


To set up the structure:

  • Open a new project and go to Step 3 - Sitemap Creation.
  • Delete all the default pages, leaving only the Home Page.
  • Use Levels to create the navigation menu items.


For example, you can create a website with these sections:

  • Welcome
  • Services
  • Contacts


To do this:

  • Click the New Level button.
  • Rename the Level with the name of the section you want to create (“Welcome”).
  • Repeat the operation for all the menu items.

In this way, you build the navigation structure of the one-page website.


Once the structure is complete:

  • Select the Home Page.
  • Click Next to move to Step 4 - Page Creation.


#tip - For one-page websites, it is recommended to keep the menu simple and with only a few items, so that navigation remains more immediate.


2. Create the page sections

At this point, you can build the content of your single page. 


In our example: 

  • “Welcome” will be an introductory section; 
  • “Services” will describe what you offer; 
  • “Contacts” will include contact details and a contact form.  


With WebSite X5, you can create these sections by working normally within the Home Page, using Text Objects, Images, Galleries, Contact Forms, etc. The most important part, however, is inserting the Anchors.


Anchors are internal references that identify specific points on the page and allow the menu to automatically bring visitors to the correct section while scrolling.


You therefore need to create one Anchor for each website section.


To insert the first Anchor:

  • Select the first Object in the section.
  • Click Anchor > Insert Anchor.
  • Assign a name to the Anchor, for example “Welcome”.
  • Repeat the same operation for the “Services” and “Contacts” sections.


At the end, you will have a single page divided into multiple sections that can be navigated through Anchors.


Try to create visually distinct sections using different colors, spacing, and images: this will help visitors orient themselves better while scrolling.


#tip - You can discover everything there is to know about creating and managing Anchors by reading the guide How do you set a link to an anchor?


Now you need to link the menu items to their respective Anchors.


This step allows the menu to automatically bring visitors to the correct section of the page.


To link a menu item:

  • Go back to Step 3 - Sitemap Creation.
  • Select the “Welcome” Level.
  • Click the Properties button.
  • In the Level Properties window, click the Link icon. 
  • In the Link window, select the Website Page option.
  • To complete the link setup, first choose the Home Page, then set the Internal Anchor of the Page by selecting “Welcome”.
  • Confirm by clicking Ok.
  • Repeat the same operations to also link the “Services” and “Contacts” Levels to the corresponding Anchors.


Your one-page website is now ready. When visitors click a menu item, the page will automatically scroll and immediately reach the correct section. This makes navigation smooth and immediate.


#tip - If the website is particularly long, you can further improve the navigation experience by using a Sticky Bar to keep the menu always visible while scrolling (see: Sticky Bar. How do you create a navigation bar that is always visible while scrolling?). 


#tip -  To create more modern and engaging scrolling effects, you can also use the Full Height feature (see: How do you use the Full Height property to create tabbed page scrolling?).


Practical tips

A one-page website works well when the content is organized in a clear, concise, and easy-to-consult way.


To achieve better results:

  • limit the number of sections;
  • use short and easily recognizable titles;
  • keep the menu simple;
  • include clearly visible call-to-actions;
  • use lightweight and optimized images;
  • always check the behavior on smartphones;
  • create smooth and well-organized scrolling;
  • organize content following a logical sequence.


In general, a one-page website is particularly effective when visitors need to quickly achieve a specific goal, such as:

  • contacting you;
  • requesting information;
  • booking a service;
  • discovering a business or a product.


In summary

With WebSite X5, you can easily create a one-page website using a single page divided into sections connected through Anchors.


Thanks to scrolling navigation, visitors can quickly move between contents without changing page, obtaining a simple, modern, and immediate browsing experience.


This type of structure is ideal for landing pages, portfolios, small business websites, and projects that want to communicate a limited amount of information quickly and effectively.