Then we add the the anchor to the CSS ID field in the Advanced tab of the section, row or module we want to link to, without the preceding hash (#). You don’t have to be using a button module, you can add the anchor to a button within any other module too, such as a fullwidth header, or a CTA etc. The principle is the same, but we add the anchor to the button URL field with the preceding hash (#).

Now lets take a look at creating an anchor on a button. Now once you save and refresh your page, your new anchor will link to the section, row or module you have defined. Next, select the section, row or module you want your anchor link to scroll to when clicked, hit the Advanced tab and in the CSS ID section enter the unique anchor you chose without the preceding hash (#). You will then see the new item added to your menu with the URL as the anchor. Add the title you want displayed for your link in the link lext field and then click Add to Menu. Decide on a unique name for your anchor link (anchors use IDs and unlike classes, IDs must appear only once per page) and then place it in the URL field of the custom link and precede it with a hash (#). In Appearance > Menus, select the menu you want to add the anchor link to and then click on the custom links dropdown on the left.

We will start with an anchor link from the primary menu. Primary Menu Anchors | Button Anchors | Text Anchors

Use the anchor links below to navigate to the section you need 😉 Mastering anchor links in Divi is actually very simple. There are many uses for anchor links, such as one page sites, and sales and landing pages.įor instance, if you had a long form sales page describing your product you may want to place a ‘Buy’ button in various places on the page, which all link to the bottom of the page where the user can actually purchase your product. Anchor links are used to navigate to specific content on a page rather than simply between pages themselves.

Divi anchor