One-Page websites are being adopted by some of the world’s largest brands. These websites provide users with a fast, clean, and simple scroll navigation that is both attractive and effective. With Uncode you can create a One-Page scroll website with just a few clicks, using either the Simple Scroll option or the Main Menu Scroll option.

▶  

Simple Scroll (required)

To activate the Simple Scroll (named Section Scroller in Uncode versions prior to 1.7) you just need to navigate to Page Options → Scroll and activate the Simple Scroll method. Behind the scenes, your page is enriched with advanced functionalities dedicated to one-page website navigation, screenshot.

When the Simple Scroll is active you have 2 main options:

• Hide Dots: hide the dots navigation.
• Scroll Snap: add the 'snaps to rows scrolling effect'.

Rows naming (required)

To scroll between sections the Row naming is required. Create an Uncode WPBakery Page Builder Row and open the settings. In the Extra tab, you need to apply a name for the row. Uncode automatically creates a unique Slug reference. Save the Row module. Be careful not to give more than one row the same name, and to not use numbers, screenshot.

Main Menu scrolling

With Uncode you have the possibility to create fully-functional single page scrolling navigation websites:

• Single page or one-page website: if your website is based on a single page and you don’t have any other pages that link to a scrolled section of the page, open the WordPress Appearance → Menus, create Custom Links and insert your Slug reference with the “#” symbol in the URL. Save the menu, screenshot.
• Single page from an external page: if your website is based on multiple pages and you have other pages that link to a scrolled section of the page, open the WordPress Appearance → Menus, create Custom Links and insert your absolute URL with your Slug reference in the URL, so the final Url should be something like this (please take care to not user numbers in your hashtag fragment): http://www.abc.com/#unique-name

Notes on One-Page Scroll

• Hide & Show Rows: it's not possible to use the Row Responsive Settings for the first rows level. You can hide and show content based on responsive breakpoints on inner rows and columns.

Scroll Snap

When this option is active the 'snaps to rows scrolling effect' is added. The page will smoothly snap to sections of your page by simply scrolling the mouse, screenshot.

• Blank Page: Scroll Snap, as Slide Scroll, is supposed to work on a blank page. Breadcrumbs, sidebar, comments, navigation or other page elements must be deactivated. You can do deactivate them from the Theme Options globally or from the Page Options for a single page.
• Hide & Show Rows: it's not possible to use the Row Responsive Settings for the first rows level. You can hide and show content based on responsive breakpoints on inner rows and columns.
• Shrink or Hide: Solid menu (not transparent) with Shrink or Hide animation options are not supported with Scroll Snap due to a plugin limitation.
• Row container: Slides Scroll expects that you use the main Row Container that wraps your contents, then you can place an Inner Row inside, screenshot .