Build a one-page site
Turn a single page into a scrolling one-page site with anchor navigation and an automatic dot menu.
A one-page site puts everything (intro, features, work, contact) on a single page, with the main menu scrolling smoothly to each section instead of loading new pages. Highend builds this from ordinary rows, a dedicated menu location, and a couple of page-level toggles.
Turning on One Page doesn't remove the page's sidebar by itself. Since one-page sections are meant to scroll edge-to-edge, also set Sidebar Layout to Fullwidth in the Layout tab of the page's Highend Settings box. See Page settings.
Turn on One Page for the page
Edit the page. In its Highend Settings box, open the Header tab and turn on One Page. To use the one-page menu as the mobile menu too, also turn on One Page Mobile Menu. See Page settings.
Give each section a row with a Section ID
Build the page from ordinary WPBakery rows: one row (or group of rows) per "page" of content. On each row you want as a navigable section, open its One Page Section tab and set a Section ID (for example intro, features, contact) and a Section Title, which becomes that section's label in the automatic dot navigation. See Rows and columns.
An older, standalone One Page Section element exists too, but it's marked deprecated in the Add Element dialog. Use a regular row's Section ID and Section Title fields instead: they produce the same scrollable, navigable section.
Build the one-page menu
Go to AppearanceMenus, create or edit a menu, and assign it to the One Page Menu location. For each item, link to # followed by the section's ID: a Features item pointing at a section with Section ID features gets the URL #features.
Highend automatically shows this One Page Menu location instead of your Main Menu on any page with One Page turned on, including on the Side Navigation header layout, if you use it. See Menus for more on the menu location and linking to sections.
What you get automatically
- Smooth scrolling. Clicking a one-page menu link, or a link in the side navigation, scrolls to the target section instead of jumping, offset to clear the sticky header, so the section title doesn't end up hidden underneath it.
- Dot navigation. A small circular navigation appears near the edge of the screen, one dot per section, built from each row's Section Title. Turning on Hide Main Menu in the page's Header tab also hides this dot navigation.
Anchor menu items across the top, automatic dot navigation on the left.
See it in the demo
The Main Demo includes a One Page showcase page built this way. Highend's Corporate / One Page demo goes further and builds an entire site as a single one-page layout, worth importing as a reference if you're planning a one-page site of your own. See Import a demo.