Blocksy Tutorial: Anchor Navigation Effects and Menu Highlighting

Single page websites are becoming more and more popular, there is no need to switch pages and all information is presented in one page. However, when the page content becomes longer, it is difficult for visitors to quickly jump to a specific area. This is where the use ofAnchor Navigationto enhance the browsing experience.

This article describes the use of Blocksy Topics + Gutenberg editor (software) Implement a method for page anchor jumps and menu highlighting via a plugin.

I. What is anchor point navigation?

Anchor navigation is a technique that smoothly scrolls the page to a specific content area after clicking on a menu and is commonly used:

• Single page website (One Page Layout)
• Campaign or product landing pages
• Long content display page (e.g. service flow, company profile)

Second, the basic operation: the rapid realization of anchor jumps

1. Creating pages and blocks

exist Gutenberg Creates a new page in the "About Us" section and adds several content blocks to simulate the structure of the page (e.g. "About Us", "Services", "Contact Us", etc.).

2. Setting anchor markers

Click on each title or block, right sidebar > Advanced > Fill in HTML Anchor fields (for example:about-us,services).

3. Creating navigation menus

Go to the backstage:Appearance > Menu, perform the following operations:

• Create a new menu

• Add a "custom link" in the format of # Anchor Name(e.g. #about-us)

• Name the link title (e.g. "About Us")

• Save and set menu as header navigation

4. Test the page jump effect

Visit the front page and click on a menu item and the page will smoothly jump to the corresponding content area.

Third, advanced features: the realization of the menu highlighting effect

Description of the problem

WordPress Native does not support "current item highlighting" for anchored menu items, and the navigation does not automatically follow the user when scrolling the page.

Solution: Use the Page scroll to id plugin

Step 1: Install the plug-in

Go to the backstage:Plugins > Install Plugins
Search and install Page scroll to id Plugin, activated and enabled

Step 2: Configure Plug-in Parameters

Go to the plugin setup page and recommend the following configuration:

• Highlighted class Set to:ct-highlight(Blocksy (support for this style class)

• Enable:
  • "Allow only one highlighted menu item"
  • "Keep the current item highlighted until the next one appears."

Save the settings.

IV. Verification of final results

Refresh the front page to test:

• Click on the navigation menu and the page smoothly jumps to the designated area

• When scrolling, the menu item corresponding to the current content block is automatically highlighted.

This feature is particularly suitable for creating one-page websites or promotional pages with a high level of sophistication and interactivity.

V. Summary

leverage Blocksy respond in singing Gutenberg editor, combined with the Page scroll to id plugin that can be easily implemented:

• Page Anchor Jump
• Customize navigation menu links
• Scroll to highlight the current menu item

Without any code, it quickly improves page interaction experience and professionalism, which is very suitable for service introduction page, work display page or marketing landing page.

Recent Updates

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: [email protected]
④ Working hours: Monday to Friday, 9:30-18:30, holidays off