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 ("page jumps") are special URLs that take you to specific places on a page. Stacked Index Pages have a unique URL structure you can use to create anchor links 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 these template families, clicking an anchor link will scroll to that section of the Index Page.

  • Bedford
  • BrineAjax loading can conflict with anchor link behavior. As an alternative, use the built-in Index navigation.
  • Pacific - You must add -section to the end of the link. See Step 3 below for more information.
Tip: Some grid Indexes support a similar functionality. You can also use custom code to add regular anchor links on any template.

Step 1 - Find the slug

In the Pages panel, hover over the Index section you want to link to. Click the gear icon 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.

The URL Slug field in the Page Settings.

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 link. 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.

Create the link by highlighting text and clicking the link icon.

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 Add Link, then click Save.

Index Page anchor link format to use when the link appears on the Index Page.

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 Page anchor link format to use when the link appears on another page or in navigation.

Step 5 - Save

Click Update in the link editor, then click Save. The link you created in Step 2 will now take visitors to the section you chose in Step 1.

Clicking the link goes to the chosen section.

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.

Examples of anchor links in the Brine template using a Button Block, a text link, and an image clickthrough URL.

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

Examples of anchor links in the Bedford template arranged side by side.

Grid Index Pages and anchor links

These template families with grid Index Pages support a similar functionality:

  • Avenue
  • Flatiron
  • Montauk

You can create an Index Page anchor link in these templates using the following URL format:

/index-page-slug/#/page-slug

This is a good option for linking to pages within the Index from your site navigation or other pages on your site. The page opens with any Index-specific formatting, the same way it would if you clicked its thumbnail image on the Index.

This example uses the Avenue template.

Example of anchor link behavior in a grid Index Page.

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?
37 out of 102 found this helpful
Adding Index Page anchor links