{"id":2318,"date":"2016-07-25T06:21:43","date_gmt":"2016-07-25T06:21:43","guid":{"rendered":"http:\/\/wpbeaveraddons.com\/?p=2318"},"modified":"2016-10-13T12:35:59","modified_gmt":"2016-10-13T19:35:59","slug":"one-page-website-beaver-builder","status":"publish","type":"post","link":"https:\/\/wpbeaveraddons.com\/one-page-website-beaver-builder\/","title":{"rendered":"[How To] Build a One Page Website with Beaver Builder"},"content":{"rendered":"

One page websites are in-demand these days. A great advantage of \u00a0a\u00a0one-page site is that you can \u00a0keep it to the point. It’s good if you offer services where you don’t want to confuse the users with various options.<\/p>\n

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

One Page Website with Beaver Builder<\/h2>\n

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<\/a><\/strong>\u00a0or a Dot Navigation<\/a><\/strong>\u00a0module. Coincidentally, we also received a feature request from one of our users – Larry Shinagawa for this module.<\/p>\n

Laying out the page structure<\/h3>\n

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\u00a0Row Layouts.<\/strong><\/p>\n

After adding the row, navigate to the\u00a0Advanced Tab\u00a0<\/strong>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\u00a0<\/strong><\/p>\n

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.<\/p>\n

Each Row on the page needs a unique\u00a0CSS ID. <\/strong>This Row ID will be later used to link the dot navigation module with the Row.<\/p>\n

\"Adding<\/p>\n

Adding the Dot Navigation Module<\/h3>\n

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\u00a0Beaver Builder\u00a0Modules\u00a0<\/strong>and place it any row of your choice. In our demo, we have added it to the first row.<\/p>\n

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.<\/p>\n

\"beaver-builder-dot-nav-placeholder\"<\/p>\n

Setting up the Dot Navigation Module<\/h3>\n

Dot Navigation module has tons of options for styling & customization. Here’s a screenshot of the General Settings Tab.<\/p>\n

\"beaver-builder-dot-nav-settings\"<\/p>\n

Row IDs<\/h4>\n

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\u00a0respective Row.<\/p>\n

Row Top Offset<\/h4>\n

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\u00a0sticky header. It prevents the header from overlapping the row content.<\/p>\n

Scroll Speed<\/h4>\n

This option is used to control the transition speed when moving from one row to another.<\/p>\n

Scroll Keys<\/h4>\n

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.<\/p>\n

Labels<\/h4>\n

The text that appears after the colon in Row IDs\u00a0<\/strong>box is used to display Labels for Navigation Items. The labels\u00a0appear on hover.<\/p>\n

Styling the Dot Navigation Module<\/h3>\n

After setting up the navigation, let’s move to the\u00a0Style\u00a0Tab. <\/strong>It allows you to customize the colors for navigation dots and change the color for label\u00a0text and background. You can also change the size\u00a0of navigation dots.<\/p>\n

\"Styling<\/p>\n

Save & Publish<\/h3>\n

Once you are done with setting up the module and styling it, click the Save Button. <\/strong>Finally, publish the page.<\/p>\n

Demo<\/h3>\n

Click here<\/a> to view the demo for dot navigation module.<\/p>\n","protected":false},"excerpt":{"rendered":"

One page websites are in-demand these days. A great advantage of \u00a0a\u00a0one-page site is that you can \u00a0keep 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…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-2318","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"acf":[],"_links":{"self":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/2318"}],"collection":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/comments?post=2318"}],"version-history":[{"count":0,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/posts\/2318\/revisions"}],"wp:attachment":[{"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/media?parent=2318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/categories?post=2318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpbeaveraddons.com\/wp-json\/wp\/v2\/tags?post=2318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}