How to build a 1 page website with Divi + 12 examples

Building a 1 page website with Divi

1 page websites can be a great solution for a business that doesn’t have too much content to include on their website, for providing a better mobile user experience, gaining more control on how the user processes the content or simply when time and/or budget don’t allow for a full scale website to be built. A 1 pager Divi site also makes a great landing or sales page too. Setting Divi up for a 1 page site easy to do and with a little imagination you can get a really awesome results.

Setting up your 1 page Divi website

The process for setting up a 1 page website is very much like any other page but for a 1 page site you should be thinking in terms of defined sections stacked on top of each other rather than being individual pages. These sections can then be linked to via sidebar dot navigation (activated in the page settings) or header navigation (via the use of CSS anchor links).

Adding sidebar dot navigation

You can activate the sidebar dot navigation option in the setting at the top right of the page (Divi builder must be activated). Simply turn it on and the sidebar dot navigation is automatically added and a new dot is created for each of your Divi builder sections on the page. This may cause issues if you have created multiple sections in the builder for what is essentially just 1 content section of the page, so be aware of how you are creating the sections in the builder.

Divi 1 page dot navigation

Adding Divi header navigation.

In order to set up the main Divi navigation so the that links take you to the different sections of the page, you will need to use #anchorlinks which can then be added as menu link URL’s.

Step 1. Add a unique CSS ID into each of the sections (or row or module) on the page that you want to link to.

divi 1 page anchor links

Step 2. Go to Appearance> Menus > Custom Links and add /#thisismysectionid (where thisismysectionid is what you added in step 1) as the URL, then add the link text and click add to menu. Repeat this for each of your sections and save the menu.

Divi 2 page navigation

That’s it! You have set up a 1 page Divi website

Download pre-made Divi layouts for 1 page sites.

Using pre-made Divi layouts can make the whole 1 page website process even faster, and with a huge number of Divi layouts for 1 page websites already released to the community the chances are you will find a layout that fits your niche.

You can search the Divi Layout Directory to find all the 1 page Divi layouts available and what’s even better is that many of them are completely free! All you need to do is find a layout you like, download and import into your Divi library, then load into your page and edit with your own content. Then follow the steps above to add a sidebar dot navigation or main navigation menu to the page.