All Collections
Divi Documentation
Customizing Divi
How can I add a link to a specific section of the page?
How can I add a link to a specific section of the page?

Creating in-page navigation using anchor links

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

Usually an  internal anchor link  is used to create some sort of in-page pagination. Clicking on a internal anchor link  will scroll the current content to a specific part of the layout.

How to create an internal anchor link:

  1. Go to Appearance > Menu.

  2. From the left sidebar, choose Custom Links.

  3. In the URL  field, enter the CSS ID of the element you want to scroll to.

  4. In the Link Text field enter the text, the link will show.

Example

Let's assume that we want to have 2 menu items:

  • About Us - will scroll to a section that has the about-us CSS ID set.

  • Our News - will scroll to a section that has the our-news CSS ID set.

Method 1 - Use the WordPress Menu system

  1. Head over to Appearance > Menu and create a new Menu - let's call this one In Page Nav.

Add the links following the information above. The result should look like this:

2. Go to Appearance > Widgets and create a new Custom Widget Area
3. Add the new Custom Widget Area place the Navigation Menu widget
4. Select the Menu created at step 1

Now we are ready to display this menu into our page layout. Edit your page and add the Sidebar module. There are few settings to be done for the Sidebar module:

  1. Content Tab  > Widget Area choose the Custom Widget created previously

  2. Design Tab > Layout - deactivate the Show Border Separator option

The final step is to edit the sections to which we want each of our anchor link  to scroll to and set the appropriate CSS ID.

For each section, edit it's settings and go to Advanced tab > CSS ID and enter:

  • about-us as the CSS ID for the section to which we want to scroll to when the About Us anchor link is clicked

  • our-news as the CSS ID for the section to which we want to scroll to when the Our News anchor link is clicked

In a code module in the same page where the section to which we want to scroll to add the following HTML code:

<ul>
<li>
<a href="#about-us">About Us</a>
</li>
<li>
<a href="#our-news">Our News</a>
</li>
</ul>

Make sure that in your page's layout there are sections with the corresponding CSS ID:

  • about-us 

  • our-news 

In a text module add each text into a separate line like so:

About US

Our News

Select each of the text lines and add a link to each of one of them, entering each CSS ID of the Section to which we need to scroll to:;

  • #about-us 

  • #our-news 

Did this answer your question?