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.

1 page website examples built with Divi

Divi 1 page website example for social media site

Social Good Media

A 1 page Divi website for a web design business in Canada.

divi 1 page website example

SM Graphics

A 1 page Divi website for a web design business in the UK.

Divi theme 1 page photography site

Jasper Van De Gein Photography

A 1 page Divi website for a photography business in the Netherlands.

Divi theme example using dot navigation

Brain Check

A 1 page Divi website using Divi’s dot navigation for Brain Check in Germany.

Divi 1 page web design portfolio

Converge

A 1 page Divi website for a web design business in Uruguay.

Divi 1 page event website

Kingdom Business

A 1 page Divi website for a business event in Australia.

divi 1 page website for fashion blog

Fashion Influentials

A 1 page Divi website using dot navigation for fashion blogger.

Divi 1 page landing page example

Paleo Grubs Book

A 1 page Divi website sales page for the Paleo Grubs book.

Divi 1 page real estate example

Vanishing Point

A 1 page Divi website for the Vanishing Point condo in Belgium.

Divi 1 page branding website example

Clinton Gorham

A 1 page Divi website for branding adviser Clinton Gorham.

Divi Theme 1 page site for App

Blackbox Performance Tracker

A 1 page Divi website for sports tracking App.

Divi 1 page website with full screen video

Align 5

A 1 page Divi website for business offering coaching & planning for entrepreneurs.

Divi 1 page web designer site

Fus & Schuss

A 1 page Divi website for web design business Poland.

Pin It on Pinterest