Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Adding Index Page anchor links

Anchor links, or “page jumps,” take visitors to specific areas within a page. You can add this type of link to any page using custom code, but you can also add this to some Index Pages without using code.

For example, when you click the “View Our Work” button on the Hayden Index Page demo content, it scrolls down the page to the linked Moreau section. The URL changes to include the page slug at the end: #moreau-hayden.

Supported templates

Index Page anchor links work best on templates with stacked Index Pages. In the following templates, clicking an anchor link will scroll to that section of the Index Page. Templates are grouped by family.

Note: Some grid Indexes support a similar functionality.
Template Special notes
Bedford, Anya, Bryant, Hayden  
Brine, Aria, Basil, Blend, Burke, Cacao, Clay, Ethan, Fairfield, Feed, Foster, Greenwich, Hatch, Heights, Hunter, Hyde, Impact, Jaunt, Juke, Keene, Kin, Maple, Margot, Marta, Mentor, Mercer, Miller, Mojave, Moksha, Motto, Nueva, Pedro, Polaris, Pursuit, Rally, Rover, Royce, Sofia, Sonny, Sonora, Stella, Thorne, Vow, Wav, West

When using Index Page anchor links with these templates, you may want to disable Ajax loading, as it can conflict with anchor link behavior.

As an alternative, use the built-in Index navigation.

Pacific, Charlotte, Fulton, Horizon, Naomi You must add -section to the end of the link. See Step 4 below for more information.

Creating and adding the anchor link

In the Pages panel, hover over the page and click the to open Page Settings for the page in the Index you want to link to.

Copy the slug from the URL Slug field. You'll use this slug to create an anchor link.

Open a page in your Index and add a link. In the Hayden demo content, the link was added to a special banner button, but any type of link can work. Visit Adding links to your site to learn more about different link options.

Then follow these steps:

  1. Paste the slug you copied above in the External tab.
  2. Add a hashtag symbol (#) to the front of the slug. The anchor link in this example would be #el-panamericano-hayden. You don't need any other part of the URL.
  3. Ensure Open in New Window is unchecked.
  4. For the Pacific, Charlotte, Fulton, Horizon, and Naomi templates only, add -section to the end of your anchor link, like this: #page-name-section
  5. Click Save.
Note: Links outside the Index Page (such as navigation links) will need extra formatting.

The link now scrolls to that section of your Index Page.

See it in action

Navigate around your Index Page with anchor links in different sections. This example uses the Brine template and three different link types: Button Block, text link, and image clickthrough URL.

Index_Anchor_2.gif

Create a navigation by arranging anchor links side by side. This example uses the Bedford template and text links. 

Link from outside the Index

You can use a similar method to jump to Index sections from:

  • Pages outside the Index
  • An Index subpage's direct URL
  • Your site navigation

To do this, format the link so it includes the Index, using this structure:

/indexpageslug/#subpageslug

For example, if your Index Page's slug is Home, and your subpage's slug is Contact, the link will be:

/home/#contact

If you're having trouble:

  • You can see the Index Page's slug in Index Page Settings
  • If your template supports Ajax, you may need to disable it in the Style Editor to get these anchor links to work.
  • If your links aren't working, try using the full URL for the link instead, for example: https://www.yoursitename.com/indexslug/#subpageslug

Index Page anchor links in other templates

These templates with grid Index Pages support a similar functionality:

  • Avenue
  • Montauk, Julia, Kent, Om

However, in these templates, the links don’t function any differently than clicking the thumbnail image for the page. This example uses the Avenue template.

Tip: You can add anchor links on any page by creating custom code and adding it to a Code Block. The Code Block is a premium feature available on certain plans. For more information, visit Creating anchor links.

Was this article helpful?
22 out of 55 found this helpful
Adding Index Page anchor links