Create one page scroll Menu

Create one page scroll Menu
1
Set ID for Sections, Rows or Inner sections/rows
In WPBakery
In WPBakery

You need to set an ID for each Section or Row you want to scroll to using the menu.
To do this open the Settings panel of the Section or Row and choose a Unique Section ID or Row ID that begins with pix_sectionand which represents the content.

  • e.g. for a Features section/row “pix_section_features” would be a perfect ID!
Image link

Section Settings

Image link

Row or Inner Row Settings

Image link

Example of adding Section ID

In Elementor
In Elementor

You need to set an ID for each Section or Inner Section you want to scroll to using the menu.
To do this open the Section Settings to the Advanced tab and choose a Unique CSS ID that begins with pix_sectionand which represents the content.

  • e.g. for a Features section/row “pix_section_features” would be a perfect ID!
Image link

Example of adding Section ID

In WordPress Gutenberg Editor

You need to set an Anchor for the Block you want to scroll to.

To do this open the Block  Settings to the Advanced tab and choose a Unique Anchor that starts with pix_sectionand which represents the content.

  • e.g. for a Features section/row “pix_section_features” would be a perfect ID!
Image link

Example of adding anchor to a block

2
Add Link to your website Menu

If you want to add Anchor links to your page instead of the menu check the Note below

After setting the ID for the Sections/Rows, you just need add links to your Menu.

To do this, from your WordPress website dashboard open Appearance > Menus

and then for each Section/Row with an ID you can add a Custom Link as following:

  • URL: the ID of Section/Row starting with “#“.
  • Link Text: any link text you want 😀
Image link

Example of adding Link to Menu

  • Want to use buttons and links to scroll to sections instead of the menu?
    For the step 2 in the article, instead of adding links to the menu you can do the same for the buttons/links in your page to scroll to other sections (add the ID of Section/Row you want to scroll to starting with “#“ in the Button Link field)

  • Note: if you to make the anchor links accessible from other pages in your website (this means when you click on an anchor link in the menu in other pages, the page that contains the section will open and scroll to that specific section), please add the full page URL before the anchor links in the menu.

    For example, if your page URL that has the section is “https://site.com/” and to add to the menu an anchor link to a section in that page (with Section ID as “pix_section_features”) that is accessible from other pages, the link in your menu should be “https://site.com/#pix_section_features“.

3
The result 🤩👌🏻

You can see a live example in the Landing Demo.

pixfort
pixfort
Essentials support team
hub.pixfort.com

Hey, this is pixfort support team, if you still need help you can always reach us via the chat messenger in your account on pixfort hub

Related Posts