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

An anchor link ("page jump") is a special URL that takes you to a specific place on a page. Stacked Index Pages have a unique URL structure that allows you to add an anchor link without custom code.

For example, when you click the “View Our Work” button on the Hayden template's demo site, it scrolls down the page to the "Moreau" section.

Note: To add anchor links on other pages and templates with custom code, visit Creating anchor links

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.

Tip: Some grid Indexes support a similar functionality. You can also use custom code to add regular anchor links on any template.
Template Special notes

Bedford family

Anya, Bryant, Bedford, Hayden

 

Brine family

Aria, Basil, Blend, Brine, 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 family

Charlotte, Fulton, Horizon, Naomi, Pacific

You must add -section to the end of the link. See Step 3 below for more information.

Step 1 - Find the slug

In the Pages panel, hover over the Index section you want to link to. Click the to open Page Settings for that section.

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

Tip: The slug may display in the browser bar when visitors navigate to that section. You can change the slug by typing new text in this field.

slug-in-settings.png

Step 2 - Create the link

Add the link that visitors will click. You can use any type of link, but this example shows a Text Block. In a Text Block, highlight the text and click the link icon in the Text Block toolbar.

Tip: Each template's Index has unique options. To learn more, see the guide for your template's family: Bedford, Brine, or Pacific.

index-add-link.gif

Step 3 - Add the page slug

Next, follow these steps:

  1. In the External tab, paste the slug you copied in Step 1.
  2. Add a hashtag symbol (#) to the front of the slug to complete the link. The anchor link in this example is #hours-and-location.
  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-slug-section
  5. Click Save.

section-slug.png

Step 4 - Add the Index slug

If you added your link in Step 2 to a section within the same Index, you can skip this step.

For any other link, include the Index Page's slug before the anchor link. This will ensure your links work from:

  • A different page.
  • Your site's navigation.
  • A subpage's direct URL.
  • Internet Explorer.

To add this:

  1. Copy the slug for your Index Page from its Page Settings.
  2. Re-open the link editor.
  3. Add the page slug before the anchor link between two / symbols, like this:
/indexslug/#pageslug

index-slug.png

Step 5 - Save

Click Save. The link you created in Step 2 will now take visitors to the section you chose in Step 1.

finished-link.gif

Examples

Add anchor links to multiple sections to help visitors navigate around your Index Page. 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. 

 

Grid Index Pages and anchor links

These templates with grid Index Pages support a similar functionality:

  • Avenue
  • Montauk family - Julia, Kent, Montauk, 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.

Troubleshooting

If an anchor link isn't working, these tips may help:

  • Ensure you added the Index Page slug as described in Step 4, including the two / symbols. This is especially important for navigation links, links from other pages, and in Internet Explorer.
  • If you're seeing issues on mobile and your template is in the Brine family, try temporarily disabling Ajax to see if that's causing the issue.
  • Ensure the Index Page slug and section's page slug are accurate. If you changed either of these, you'll need to update the anchor link manually.
Was this article helpful?
27 out of 74 found this helpful
Adding Index Page anchor links