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.
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.
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.
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.
1 page website examples built with Divi
Social Good Media
A 1 page Divi website for a web design business in Canada.
A 1 page Divi website for a web design business in the UK.
Jasper Van De Gein Photography
A 1 page Divi website for a photography business in the Netherlands.
A 1 page Divi website using Divi’s dot navigation for Brain Check in Germany.
A 1 page Divi website for a web design business in Uruguay.
A 1 page Divi website for a business event in Australia.
A 1 page Divi website using dot navigation for fashion blogger.
Paleo Grubs Book
A 1 page Divi website sales page for the Paleo Grubs book.
A 1 page Divi website for the Vanishing Point condo in Belgium.
A 1 page Divi website for branding adviser Clinton Gorham.
Blackbox Performance Tracker
A 1 page Divi website for sports tracking App.
A 1 page Divi website for business offering coaching & planning for entrepreneurs.
Fus & Schuss
A 1 page Divi website for web design business Poland.