Anchor links are powerful tools for improving navigation and user experience. They allow visitors to jump to specific sections within the same page.
In this article, we will guide you through the process of adding anchor links to specific sections inside the same page layout using Divi.
Example
Considering the following two Menu items:
About Us - will scroll to a section with the about-us CSS ID set.
Our News - will scroll to a section with the our-news CSS ID set.
Add the Anchor links to your WordPress menu
Go to Appearance → Menus
Select the menu to which you want to add anchor links
From the left sidebar, choose Custom Links
In the URL field, enter the CSS ID of the element you want to scroll to
Enter the text in the Link Text field
Save your changes by clicking on the Save Menu button
Examples:
About us menu items:
URL will be #about-us
Link Text will be About us
Our News menu item:
URL will be #our-news
Link Text will be Our News
Create the WordPress Widget
Go to Appearance → Widgets
Create a new Custom Widget Area
Add the Navigation Menu widget to this new Widget Area
Display the Navigation Menu widget on your page
Edit the page to where you want to add the Anchor Links
Add the Sidebar Module
In the Sidebar's module Content Tab → Content → Widget Area, select the WordPress Widget area created previously
Go to Design Tab → Layout and deactivate the Show Border Separator option
Add the CSS ID to your section
For each section, the Anchor links need to scroll open their settings by clicking on the Gear icon
Go to Advanced Tab → CSS ID & Classes → CSS ID
Type in each ID
Note: Considering the example above, each of those two sections related to the About Us and Our News will have the following CSS IDs:
About Us section → about-us
Our News section → our-news
Alternative methods
Use the Code module and custom HTML code
On your page, add the Code module
Inside the Code module's Content Tab → Text → Code using this HTML code
<ul>
<li> <a href="#about-us">About Us</a> </li>
<li> <a href="#our-news">Our News</a> </li>
</ul>
Use the Text Module to create anchor links
On your page, add the Text module
Inside the Text module's Content Tab → Text → Body, add the Anchor links' text
Select each of those text and click on the Link icon
For each link, type in the section's CSS ID to which you want to scroll
