Skip to Main Content

How to create a one page site with Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Activation of single-page navigation is easy and can be done on an individual basis. Whenever you create or edit a page, look for the "Divi Settings" box to the right of your text editor. In this box you will see the option Navigation by points. Select "On" from the drop-down menu and save the page. You will now notice that a floating navigation bar has been added to the right side of your page.

The point navigation bar automatically adds a clickable link to each section of your page. When you add a new section, a new link (or point) will automatically be added to your floating side navigation.

Users can click on the points to access different sections of the page. It also makes it easier to identify the visitor's location on the page, making it easier to understand and navigate long pages.

dot navigation divi.png

Create custom menu links for one-page websites

In addition to side navigation, it is also possible to turn the navigation of your main heading into one-page navigation. If you are creating a one-page website, you do not want your menu links to point to separate pages. Instead, these links can point to relevant sections on the same page.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

When you click on them, they can take you to the corresponding section of the page using a regular scrolling effect. This can be accomplished by using custom identifiers. Any element of the page built with the generator can be assigned an ID.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

You can assign an identifier to a section by clicking on the section's settings icon and searching for the "CSS ID" parameter. Once an ID has been assigned, you can access it from the navigation menu.

For example, say you have a section called "About Us" and you want it to connect to the part of your page that describes your business.

about us divi.png

Pointing a menu link to an identifier

To create a custom menu link, you will need to add a new link to your menu using the "Appearance> Menus" tab of your WordPress dashboard. If you are not familiar with the menu system, consult this awesome tutorial. Once you have created a new menu and assigned it to the main navigation location, you can start adding links to your header.

In this case, we will create a custom link by clicking the "Link" tab on the left side of the page. Once clicked, you will receive two fields (URL and link text). For "link text," simply enter the text you want to display in your menu (for example, "About Us").

For the URL, we need to link to the ID we previously assigned to our section. In this case, we have added the id "aproposdenous" but you can add any name of ID that you like. Since we have used the "aproposdenous" ID, we can link to this id by creating a URL pointing to "/ #aboutusous".

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

You can use this same method to create as many custom links as you want. Just enter the URL "/ #" followed by the ID you want to target.

about us divi menu.png

That's all for this tutorial, I hope it will allow you to create a site "Single Page".

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top