The Links component lets you link to relevant external materials or allow learners to jump quickly to a piece of content elsewhere in an Evolve course.
This article provides an overview of the Links component, component setup and behavior, and examples of Links component configurations.
The Links component is an interactive component and the actual link can be displayed as an image, text, or button.
The Links component is flexible and could be set up to open in a new window or set up to be completed either when the Links component comes in view on the page or when the component link is clicked.
Component set up
Follow these steps to add the Links component to a Block:
- Click Add Component.
- Use the component search or scroll to find the Links component.
- Click the Links component and select Add Left, Add Full, or Add Right .
Click the Edit Component icon on the newly added Links component to begin set up.
In the General section:
Add Link Title, or a Link Display Title, as needed. Link Display Title is seen by learners.
Scroll down and add your Link Body. Use the text editor to style and format your text, as needed.
- Add Link Instruction Text that tells users how to use the component.
- Include an Aria Label for screen readers, as needed.
Interaction Label section
In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Links component that can display an icon and label prior to the Links component completion, which changes to a different icon and label once the Links component is completed.
In the Appearance section, you set Columns by device size, as needed. By default, the Links component is set to 1 column for desktops, tablets, and smartphones.
In the Behaviour section, you Set completion status on either Inview or Click. By default, the Links component is set to completion status on Inview.
In the Animations section, you set what animations to run when the Links component first comes into view on the page. Toggle to enable specific animation settings.
Add Link Items
In the Items section, you add Items to your Links component.
For Link Items displaying an image:
Toggle Image Link if your link should display an image. Select Link Image and Set Image Per Device Size, as needed. Select Disabled Link Image to be displayed if the link is disabled. Set Image Per Device Size for the selected Disabled Link Image, as needed, and enter Link Image Alt Text.
For All Link Items:
Add Link Title and Link Body. Use the text editor to style and format your text, as needed.
A Link Title is only available for Link items displayed as text or a button.
Set Link Target. That is where the link will open. Select New window, Same window, or Parent iframe from the drop-down list.
- Toggle Should close the window as needed.
- Toggle Internal link if the link is somewhere inside your course. Select Internal Link.
- Toggle to Enable item on components completion and Select components to watch.
Enter the Link item Url and toggle to Display as button. Set the Link Item Position relative to the Body text. Select Left, Top, Right, or Bottom. By default, the position is set to Top. Set Link Item Alignment.
Add, Duplicate, or Delete Items as needed.
The Links component gives you a lot of flexibility. Below are examples that illustrate different Link component setups:
- Example 1 – Link component with internal link. Link item position set to the right.
- Example 2 – Link component with image link. Link item position set to left.
- Example 3 – Link component with link displayed as a button. Link item position set to bottom.
Internal link items can be displayed as text, an image, or a button.
Did this article help?
Let us know by leaving a star rating or review at the top of this article.