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.
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.
Anya, Bryant, Bedford, Hayden
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.
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.
Step 2 - Create the link
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:
- In the External tab, paste the slug you copied in Step 1.
- Add a hashtag symbol (#) to the front of the slug to complete the link. The anchor link in this example is #hours-and-location.
- Ensure Open in New Window is unchecked.
- For the Pacific, Charlotte, Fulton, Horizon, and Naomi templates only, add -section to the end of your anchor link, like this: #page-slug-section
- 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, 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:
- Copy the slug for your Index Page from its Page Settings.
- Re-open the link editor.
- Add the page slug before the anchor link between two / symbols, like this:
Step 5 - Save
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 Pages and anchor links
These templates with grid Index Pages support a similar functionality:
- 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.
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.