 |
| One-Page Scrolling Website Tutorial |
Title : One-Page Scrolling Website Tutorial
Duration : 19:02
Channel : GateWood Digital, LLC
Label : Beaver Builder, Tesseract theme, Tyler Moore, WordPress, web design, web tutorial
Duration : 19:02
Channel : GateWood Digital, LLC
Label : Beaver Builder, Tesseract theme, Tyler Moore, WordPress, web design, web tutorial
 |
 |
 |
| One-Page Scrolling Website Tutorial |
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! Links... Tesseract theme: http://tesseracttheme.com/ Unbranding plugin: http://tesseracttheme.com/unbranding-plugin/ Get Beaver Builder: https://www.wpbeaverbuilder.com/?fla=270&campaign=gatewood Scrolling websites are created through anchoring and jquery, however, Beaver Builder handles the easing (smoothness) of it very nicely (without the jquery!) You will need to identify the anchors yourself and create your own Custom menu links. Create 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 - "Little 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 created your first anchor! For this example, we'll add an ID name to each content block, however 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 create 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 create the menu. Open Customizer and click on Menus. Click Add a Menu. Type in a name for the menu and click Create Menu. Click Add Items. This will give you many options but for the purposes of a scrolling page choose Custom Links. Here you will create the menu items for each of the anchors you created. 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 created, 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 create 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 Display; 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.