Adding index page anchor links in version 7.0

In version 7.0, stacked index pages have a unique URL structure you can use to create anchor links (or "page jumps") without custom code. These anchor links take you to specific places on the index page. 

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.

This guide is for index pages on version 7.0. For adding anchor links on version 7.1, or on other types of pages on version 7.0, 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
• Brine - Ajax 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 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.

Step 2 - Create the link

Add the link that visitors will click. You can use any type of link, but these steps use a text link as an example. 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.

Step 3 - Add the page slug

Next, follow these steps:

1. In the Link field, 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. Click to open the settings and ensure Open in new window is disabled.
4. For the Pacific, Charlotte, Horizon, and Naomi templates only, add -section to the end of your anchor link, like this: #hours-and-location-section
5. Click Save.

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, like navigation links or links on other pages, 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.

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:

https://examplesite.com/indexslug/#pageslug

4. Click Save.

Note: If your primary domain includes www. before your domain name, include that in your anchor link URL too.

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.

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

Grid index page 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 featured image on the index.

This example uses the Avenue template.

Troubleshooting

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

• If necessary, ensure you added the index page slug as described in Step 4, including the two / symbols. This is required for navigation links and links from other pages.
• 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.