Set ID for Sections, Rows or Inner sections/rows
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_section“and which represents the content.
- e.g. for a Features section/row “pix_section_features” would be a perfect ID!
Section Settings
Row or Inner Row Settings
Example of adding Section ID
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_section“and which represents the content.
- e.g. for a Features section/row “pix_section_features” would be a perfect ID!
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_section“and which represents the content.
- e.g. for a Features section/row “pix_section_features” would be a perfect ID!
Example of adding anchor to a block
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 😀
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“.
The result 🤩👌🏻
You can see a live example in the Landing Demo.
