How to Easily Build a Neat One Page WordPress Website with Elementor
Ease of use is the principal reason why WordPress is the most popular content management system. Even people without a strong technical background can easily create and maintain websites on their own. With this tutorial, we will demonstrate just that, using the Elementor page builder to build a one page WordPress website.
Let us begin with explaining what a one page website actually is. Contrary to what the name suggests, it may not be confined to a single page. You may want, say, to create a front page with sections such as Home, About, Contact and the like, and link to a gallery, portfolio or blog from there.
Navigating between sections of your main page without having to scroll through all the sections can be easily done using on-page links, or anchors. Elementor has a ready-made element for setting up an anchor, too, and it is very easy to use.
Of course, you can use anchors to connect various sections on a page using the Menu Anchor element in conjunction with various linkable elements, but in this tutorial we will discuss how to do it using a menu.
Let’s Get Started
We will create a page with four sections and use a menu to link to each of these. Since the Home section will be on the top of our page anyway, there is no need for an anchor. The link to your page will take you to the top of the page, so you can just use that for the Home option in the menu.
That means we need three other anchors, one for each of the other sections: About Us, Our Menu, and Contact.
To place the anchor, simply find the Menu Anchor element in Elementor’s sidebar menu and drag-and-drop it to where you want to link, say, just above each section.
Note that an anchor is only there to assist in navigation, and is therefore not visible to the visitor in any way, it only appears in the editor so that we may see where it is as we build our website.
The next thing we need to do is name each of the anchors, give them their unique IDs. These have to be a single string, using upper and lower case letters, digits, dashes, and underscores, but no spaces.
How to Link From the Menu
Next up, we are going to build a custom menu using WordPress’s default editor and following these easy steps.
We are then going to create three custom links within the menu. In the URL field, we input our anchor name, prefaced by #, as in #anchor_name. The link text field is the text of the menu option. In this case, as we want the anchor link to take us to the About Us section, this is what we input. We will repeat this for Our Menu and Contact sections, too: add the anchor, then link through the menu.
Note that these anchor links only work for the same page the anchors are on. In case you have another page with the same menu, the anchor link will not function. Anchor links only go after their target anchors on the page the linked elements are on.
In order to link to an anchor on a different page, we need to further specify the link by prefacing it also with the page URL. For instance, if the anchor we want to link to is located on the page https://yourwebsite.com/, the URL which links to it is https://yourwebsite.com/#anchor_name.
When specified like this, the anchor link works for any anchor, irrespective of the page the link is on.
As you have seen, you can have a fully functioning, easily navigable one page WordPress website within minutes, quickly and easily, with nearly zero effort and exactly zero coding knowledge. All you need is the Elementor page builder and this handy tutorial, and you’re all set.