Working with Links and Anchors

Internal links are links to another page within the same website, or to a page on another website that is also in MSU’s SitecoreAI.

Add an internal link using the text editing toolbar:

1. Highlight to select the text to be linked.
2. Click the Insert internal link icon in the editing toolbar.

3. Navigate to the page in the Internal link window and click to select.

   Note: To link to another MSU website in the same environment as the current site you have access to, click the Context site dropdown to choose the site and then locate the page.

   

4. Click Add link.

Add an internal link using CTA element properties:

1. Click on the CTA field in a component.
2. In the element options panel on the right-side CTA menu, select Internal under Link type.
3. Click Browse.

4. Navigate to the page in the Internal link window and click to select.

   Note: To link to another MSU website in the same environment as the current site, click the Context site dropdown to choose the site and then locate the page. (See Figure 2.)

5. Click Add link.
6. Enter text in the Link text box. This will display as the CTA button label.
7. Optional: Set additional parameters. See Anchor Links, below, for additional information on linking to an internal anchor.

External links are links to a page on a website that is not in MSU’s SitecoreAI. These could include links to campus websites in another content management system, or off-campus websites, such as social media platforms. 

Add an external link using the text editing toolbar:

1. Highlight to select the text to be linked.

2. Click the Link icon in the editing toolbar.

   

3. Enter the full URL in the Link URL box.
4. Click the green checkmark.

Add an external link using CTA element properties:

1. Click on the CTA field in a component.
2. In the element options panel on the right-side CTA menu, select External under Link type.
3. Enter the full URL (including http:// or https://) in the Link URL box.
4. Enter text in the Link text box. This will display as the CTA button label.
5. Optional: Set additional parameters. See Anchor Links, below, for additional information on linking to an internal anchor.

Media links are links to assets, including image files or document files (i.e., PDFs).

Begin in Page Builder:

1. Click the dropdown arrow to the right of the SitecoreAI icon in the upper left.  
2. Select Content Editor.  

In Content Editor:

3. Locate the page in the Content Tree.
4. Locate the component containing the text or call-to-action to be linked.
5. To link a CTA to media: On the data panel, use the link setting tools to add a link to the CTA field.
6. To link text to media:
   1. Click the Show editor link.
   2. Locate and highlight the text to be linked.
   3. Click the Insert Sitecore link icon.
   4. Use the Media Items tab to display the Media Library content tree.
   5. Use the Media Library content tree to locate and click on the file.
   6. Click Insert button to return to the editing window.
   7. Click Accept to lock the changes.
7. Click Save on the Content Editor navigation ribbon.
8. Return to Page Builder and refresh the canvas to display the changes. 

Anchor links are links to a specific section on a webpage. The anchor can be on the same page or a different page within a website. Anchor links must be added to the website code, so it’s best to use them when linking within the same website so the content author can control the code and ensure it is not inadvertently deleted, which would break any other site’s link to that anchor. 

Add an anchor to a component in Page Builder:

Before linking to an anchor, the anchor must be placed on a page. SitecoreAI makes this easy. 

1. Select the component that needs an anchor.

   Quick tip: To account for parallax scrolling effects on a page, it is recommended to place the anchor slightly above the text that needs the anchor. Adding an anchor to a subheading component above the content works well. 

2. Expand the Advanced styling panel in the Component options menu on the right side of the screen.

3. Enter the desired anchor text in the Page Anchor ID field.

   Requirements: Keep the anchor text brief, all lowercase with no spaces and be sure the anchor is unique within the website.

   

    

   4. Save and Publish.

Link to an anchor:

1. Identify the anchor to be used for the anchor link. This is the anchor text added using the Page Anchor ID field, described above.
2. To link to an anchor on the same page, use the external link option and add the anchor text only, preceded by #.
   1. Example: #anchor-here
3. To link to an anchor on another page using a full URL, add the anchor to the end of the URL following a “#” symbol.
   1. Example: https://brand.msu.edu/logos#anchor-here
4. To link to an anchor on another page, use the insert link option. Then edit the link to add the anchor text, preceded by #, to the end of the character string.
5. To link to an anchor on another page using the component properties panel, add the anchor to the anchor field in the Optional parameters panel for internal link types. 

Documentation updated: May 28, 2026