Special Birthday Discount. Get 20% OFF on all purchases & upgrades. Use HBD20 coupon code.

[How To] Build a One Page Website with Beaver Builder

Last updated October 13, 2016 · Puneet

One page websites are in-demand these days. A great advantage of  a one-page site is that you can  keep it to the point. It’s good if you offer services where you don’t want to confuse the users with various options.

In this tutorial, I am going to share how you can build a one-page site with Beaver Builder & PowerPack addon.

One Page Website with Beaver Builder

Beaver Builder comes with a bunch of modules to help you speed up your development process. One module that we found missing was a One Page Navigation or a Dot Navigation module. Coincidentally, we also received a feature request from one of our users – Larry Shinagawa for this module.

Laying out the page structure

To build one-page site, you will need to first add all the rows and content blocks to your home page. This can be done by using Row Modules that Beaver Builder provides under Row Layouts.

After adding the row, navigate to the Advanced Tab and add a unique ID to the CSS Selectors section. I usually prefer to keep this easy by using a sequential ID. On our demo page, we are using ID row-1 

Using a number for the ID also makes it easier to figure out the row’s location on the page. It’s best to use small letters and avoid any blank spaces.

Each Row on the page needs a unique CSS ID. This Row ID will be later used to link the dot navigation module with the Row.

Adding a CSS ID to the Row

Adding the Dot Navigation Module

So, we are done with adding rows to the page and setting a unique CSS ID for each row. Now we can add the dot navigation module to the page and set it up to work with our rows. You can drag the Dot Nav module from the list of Beaver Builder Modules and place it any row of your choice. In our demo, we have added it to the first row.

Whenever you edit the page with Beaver Builder, you will see a placeholder text shown in the image below. This placeholder text allows you to locate the dot navigation module and edit it.

beaver-builder-dot-nav-placeholder

Setting up the Dot Navigation Module

Dot Navigation module has tons of options for styling & customization. Here’s a screenshot of the General Settings Tab.

beaver-builder-dot-nav-settings

Row IDs

This is where we need to add all the IDs of rows on the page. This will generate the output for dot navigation and link each navigation item / menu item with respective Row.

Row Top Offset

You can use this option if you have a sticky header on the page. This value should be equal to or greater than the height of the sticky header. It prevents the header from overlapping the row content.

Scroll Speed

This option is used to control the transition speed when moving from one row to another.

Scroll Keys

If you want to allow users to navigate from one row / section to another row / section using up and down arrow keys, you can use this feature.

Labels

The text that appears after the colon in Row IDs box is used to display Labels for Navigation Items. The labels appear on hover.

Styling the Dot Navigation Module

After setting up the navigation, let’s move to the Style Tab. It allows you to customize the colors for navigation dots and change the color for label text and background. You can also change the size of navigation dots.

Styling options for Dot Nav Module

Save & Publish

Once you are done with setting up the module and styling it, click the Save Button. Finally, publish the page.

Demo

Click here to view the demo for dot navigation module.

Posted in

A few more interesting posts →

10 Comments

  1. Miriam Ramos-Warth on November 3, 2016 at 5:21 am

    Hi!
    why the dot navigation is not responsive? I would love to use it but I can’t see it in my phone. Would you make the dot navigation responsive?

    • Puneet on November 3, 2016 at 11:04 pm

      Hi Miriam,
      The dot navigation gets turned off on mobile because of the lack of space on small screens.
      Also, the dot navigation is used for scrolling on the same page which is a natural way of browsing websites on mobile devices.
      Instead of auto-disabling this, we will add an option to manually enable / disable the dot navigation on mobile devices. 🙂

  2. Gerry King on November 11, 2016 at 12:41 am

    I’ve just done a trial set up of this module after a feature request from a client that I didn’t think I was able to deliver. Now I can!

    Thank you Puneet and the team, it work great. I love it 🙂

    Gerry

  3. René on May 5, 2017 at 10:57 pm

    Is it possible to scroll to next row automatically using the mousewheel and not clicking on the dots? So that when scrolling with the mouse you scroll completely to the next row.

    • Puneet on May 5, 2017 at 11:15 pm

      Hi Rene,
      It’s not possible at the moment. But, we will add that functionality soon.

      • Puneet on September 22, 2017 at 11:10 am

        UPDATE: Complete Row Scroll functionality is now available with the Dot Navigation module.

  4. Travis on December 1, 2017 at 11:48 pm

    Hi,

    I noticed that under Row>Advanced, there is no CSS Selectors. May I know how can I make it appear? Thank you.

    • Puneet on December 4, 2017 at 12:14 am

      Hi Travis,

      If you check “Advanced” tab, you will see two input fields for CSS Class and CSS ID. You will need to add a custom CSS class there.

  5. Urvi on February 16, 2019 at 12:45 am

    Hi, i checked your link https://wpbeaveraddons.com/demo/dot-navigation/. But did not find this module in my modules list. I have purchased UABB modules.

    please help.

Leave a Comment





PowerPack Beaver Addons

PowerPack Beaver Addons

Start creating beautiful websites with 50+ modules and 350+ templates for Beaver Builder.

Join 4000+ Subscribers.

Get latest Beaver Builder Tips and Updates in your Inbox. 

Please enter your name.
Please enter a valid email address.
Something went wrong. Please check your entries and try again.
×