If you surfed a few websites already, chances are you’ve seen a structure one would describe as ’modern’, ’fancy’, ’cool’. Making all of a website’s content on one single page looks minimalistic yet sophisticated, movements after clickig on navigation elements make a dynamic effect. The very well thought question is, how does such a cool website function behind the scenes? That is what will be answered in the following blog post.

 

One-pager: starting point

A modern, interactive, dynamic website is what many business owners want to have, and that is what a one-page website has to offer. No wonder that such websites have risen steadily in numbers. Instead of loading every page from scratch, the navigation works by placing all content beneath each other on the main page and then „scrolling” the page to the respective part. That is exactly what grabs the attention of a visitor, at least from a visual point of view. As is the case frequently, once you see how something works, you’ll be amazed how simple it is in reality – so let’s see if we can come to that point in this topic!

 

The structure of a one-page website

From a structural / contextual point of view, one-pagers are just like any web page. They need to have the same content, structured as separate pages. They all have their own content in the form of text, photos, videos, with their own styling and background. What makes it different in this case is how these pages are handled.

 

The usual case vs. a one-pager

Normally, navigation works by loading the clicked page each time. New page from scratch, load every item new. Whatever that used to be on the screen is gone and changed for the contents of the page that’s being navigated to.

In our case now, this is being handled differently. The contents of all pages are placed beneath each other on the main page. Instead of re-loading  the screen each time, you only scroll to the next part. If there is another page in between, it’ll be scrolled over. The whole movement happens in front of our eyes, what gives it a special feeling one would describe as ’dynamic’, ’modern’.

 

Technical realization

To make all this work is simpler than one might think. All pages are placed on a main page as described above and are given an ID. To give you an example, let it be#page1, #page2, #contact, #aboutus. The next point you’ll do is use these Ids when setting up the navigation. Instead of saving the URLs of your pages for the navigation, you’ll put in these IDs. (This is what’s called a ’custom link’.) This will result in the effect that’s just been described.

Remarks: the realization might work slightly differently in other CMS’ than WordPress. What is not different, however, is how such a web page works, so the logic would be the same, no matter what system you use.