Working with Links and Anchors

Websites will often use links, either in main and sidebar navigation, linked text or from buttons, to help visitors navigate the website. Read below for instructions on how to work with the various types of linking within Sitecore XM Cloud.

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

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 XM Cloud that 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 XM Cloud that you have access to, 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 Sitecore XM Cloud. These could include links to campus websites in Sitecore XP, Cascade or 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.) Right now PDFs should be linked using Content Editor. 

Begin in Pages:

1. Locate the nine-dot cube icon in the upper left.  
2. Select the environment.  
3. Select Content Editor.  

In Content Editor:

4. Locate the page in the Content Tree. 
5. Locate the component containing the text or call-to-action to be linked. 
6. To link a CTA to media: On the data panel, use the link setting tools to add a link to the CTA field.
7. To link text to media: On the data panel, click "Show editor" to open the edit window. Highlight the text to be linked and use the link setting tools to add a media link.
8. Click Save. 
9. Return to Pages. Refresh the canvas to view 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 Pages:

Before linking to an anchor, the anchor must be placed on a page. Sitecore XM Cloud 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.

   

    

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 using the CTA element properties panel, add the anchor to the anchor field in the Optional parameters panel for internal link types. 

Documentation updated: Sept. 13, 2024