Anchor links (sometimes referred to as page jumps) are commonly used for navigation on one-page website, or to create a menu item that will allow viewers to jump to a specific section without having to manually scroll through the entire page. They can be used on a multi-page website also, however, the process is slightly different, as we will demonstrate below.
ANCHOR LINKS FOR A ONE PAGE DIVI WEBSITE
STEP 1: The first thing you’ll need to do is to create the “anchor”. This is done by adding a custom CSS ID in the ROW settings (green bar). It is simplest to use all lowercase letters. The name that you create will become part of the URL that is displayed in the browser when a viewer visits this section, so it should be relevant to the section to which it is applied, but it needn’t be an overly long or complicated description. A single word will typically suffice, but if your custom ID is more than one word, you’ll need a hyphen between the words. We’re naming our jump simply “anchor”.
STEP 2: Once you have saved your module and updated the page, next we’ll go to Appearance > Menus. Click on the “Custom Link” field. The URL field is simply the # sign immediately followed by the custom ID name that you created in Step 1 above. So for our example, it would be #anchor (no space between). Your’s will be #your-custom-ID. The “link text” field is what will be displayed on the actual menu tab and does not need to match the custom ID name. Once you have completed these 2 fields, click Add To Menu and Save Menu. That’s all there is to it!
ANCHOR LINKS FOR MULTI-PAGE DIVI WEBSITES
If your website is multiple pages, or has internal links that direct a viewer off of the page for any reason, you will need to make 1 small adjustment in order for the anchor links to work properly from all pages. You will follow STEP 1 from above and create your anchor using a custom ID in the ROW settings.
The difference is in how we will name our custom link in the Appearance > Menu step. For your URL field, you will need to use the full URL rather than just the anchor name. In our example, this would be https://divihelp.com/development-page/#anchor (This is www.domainname.com/page-name/#anchor-name). If you are not sure how to find this, simply view the page on which the anchor jump resides in your browser and copy (control-C) the URL from the browser’s address bar. This will give you the www.domainname.com/page-name/ portion of the link. To this you will add a pound sign and your custom anchor name, or #anchor-name. The “Link Text” will be whatever you want to have displayed in the menu tab. Click Add to menu and save.
Now this link will work whether a viewer is on the same page as the anchor link, or on any other page of your website.