An anchor link is a web link that allows you to leap from one section of your event site to a specific section on your event site. To work, an anchor link has two parts that need to exist on your page:
- The link itself, as a text link. For example, a "FAQs" text link in the header that intends to take a guest further down on the page to the "FAQs" section.
- The destination element. This is where you want the link to take your visitor. Clicking on the link will direct the guest to the top of this element, and align the top of the element with the top of the visitor's browser window. (Note: if your element is very close to the bottom of your page, clicking your anchor link will scroll to the bottom of the page to get the destination element as close to the top of the browser as possible.)
Creating text anchor links
- Select the destination text on your event site
- Go to Settings > ID, and type a unique name for the element. The name must start with a letter, and contain only letters and numbers with no special characters (dashes and underscores are permitted but not recommended). Example: faqssection
- Go to the text that will link to the destination part (Note: if you haven't created this text as a link, double click and select the link icon
from the menu or select the elements menu
and under Basic, drag in the Link element to desired section of the page).
- In Settings > Href, type # followed by the name of the destination element. Example: #faqssection
- Target should be set to: This Window
- Save
- To test, select View Event Page and select the anchor link to ensure it takes you to the desired destination on your event page.
Notes:
- If you delete your destination element from your event site, the anchor link will no longer work.
- While creating anchor links can be achieved following the steps in this article, it is an advanced feature to style and create navigation bar using columns in Canvas. It's recommended that you choose a template that matches your desired layout format, while considering your experience level working with web design editors.