wordpress related posts

One-Page Scrolling Website Tutorial

Posted On February 25, 2018 at 10:46 am by / No Comments


This is a quick and dirty tutorial for a one-page scrolling website. It’s meant to give you very basic information so you can go out and build one much, much better!

Scrolling websites are made through anchoring and jquery, but, Beaver Builder handles the easing (smoothness) of it very nicely (without the jquery!)

You will need to identify the anchors yourself and make your own Custom menu links.

Make a blank page/site.

A quick way to try this out is this: If you’ve used the Tesseract 2 theme, you’ll notice when you open Page Builder, the Content Blocks button available only with the Tesseract theme.

Each content block is like a section of your page. So, you could randomly pick a number of these blocks but for the sake of clarity, just pick these:
1 – Hero Music
2 – CTA Simple Tour
3 – “Small Lion” Info
4 – Simple Quote Quote
5 – Four Square Services
6 – Google Map Map

You’ll have to simply click on one, wait a sec for it to load, click Content Blocks again…you get the picture. Now you have page ripe for scrolling.

Each block you chose is built in a row from Beaver Builder, just like you would do if you built them yourself. The point is, the anchoring will work the same whether you’ve built the block/section yourself or not.

Start with the first block, Hero Music and go into Row Settings by clicking on the wrench. When you hover over the row, the wrench will either appear in the top left or bottom left of the row.

Inside the dialogue box click the Advanced tab. Scroll down to the bottom where you’ll see a box to input an ID name. Type “top” (without the quotes, lower case) in the box and click save. You’ve just made your first anchor!

For this example, we’ll add an ID name to each content block, but you may find that you can leave out an anchor if appropriate to your design.

Enter the Row Settings dialogue of the CTA Simple block by clicking on the wrench. As before, click the Advanced tab, scroll to the bottom and, this time, we’ll name the ID “tour”. This will coincide with the menu item you make later.

Do the same for Simple Quote, naming the ID “quote.”

Next the Four Square, name the ID. Maybe this is your “services” section.

Last the Google Map. Name the ID “map.” Click Save. Click Done. Click Publish Changes.

Now we’ll make the menu. Open Customizer and click on Menus.

Click Add a Menu. Type in a name for the menu and click Make Menu. Click Add Items. This will give you many options but for the purposes of a scrolling page choose Custom Links.

Here you will make the menu items for each of the anchors you made. For URL type in #tour (leave out the http://) and for Link Text type Tour. Click Add to Menu.

Repeat the process for each of the anchors you made, naming them accordingly.

Choose Header as the Menu Location. Click Save and Publish, click the back arrow (not the browser) then exit out of Customizer.

Back to Top:
To make the Back to Top button, open the Page Builder and scroll to the bottom above the map. Open the Basic Modules and drag out the Link Button to its own row above the map and below the services section.

In the settings dialogue for the Link Button:
– Leave the Button Text blank
– Button Link is #top
– For Add icon? select Font Awesome
– Icon is Angle Double Up
– Under Show; Alignment is Center
– Left padding 15px
– Right padding 15px

Under the Advanced tab, zero all margins except the Left. Set it to 1100px to push button all the way to the right. Click save.

Open the Row Settings:
– Set Width to Full Width
– Content Width, Fixed
– Background Type, Color
– Color is a blue
– 5% Opacity

Under the Advanced tab, zero all margins and padding. Click Save.

Duplicate the Row twice by clicking on the pages icon. Drag one row up under the Quote section. Drag the second row up under the Services section.

Click Done to exit Beaver Builder. Click Publish Changes. Now you have a one-page scrolling website. Try it out.

Tesseract theme: http://tesseracttheme.com/
Unbranding plugin: http://tesseracttheme.com/unbranding-plugin/
Get Beaver Builder:

Drag and Drop WordPress Page Builder


Leave a Reply

Your email address will not be published. Required fields are marked *

Translate ยป