Links and Buttons

[ User Guide Navigation]

Formatting Text & Media Links and Buttons

In DesignPLUS, you have the choice of styling hyperlinks as underlined text or as buttons. You can also add icons to links and buttons.

Tip for Links and Buttons

Links should make sense out of context. Avoid using text like "click here," "more," "click for details," "this link," or any other text that does not make sense when read without the text before or after the link.

Instructions

Add a link

Select existing text or place your cursor in the editor where you want the link to appear.
Open the Add New Elements ( ) tab in the sidebar.
Select the Link tool. The Edit Current Element ( ) tab opens with Link selected as the active tool.
In the Content panel...
1. Set the destination for the link by either typing/pasting a URL or using the Course Links tool to link to existing course content.
2. To add an icon, click the Icon Picker and select the desired icon.
3. Check the Open in New Tab box to open the link in a new browser tab.
To change the link behavior and colors from the Canvas defaults, open the Style panel:
1. To change the color when users hover over the link text, under Hover/Focus, click Text and select from the available color options.
2. To add a background color when users hover over the link, under Hover/Focus, click BG and select from the available color options.
3. You can use the BG and Text options under the Visited (Optional) heading to set different background and text colors for visited links.

Add a button

Select existing text or place your cursor in the editor where you want the link to appear.
Open the Add New Elements ( ) tab in the sidebar.
Select the Button tool. The Edit Current Element ( ) tab opens with Button selected as the active tool.
In the Content panel...
1. Set the destination for the button by either typing/pasting a URL or using the Course Links tool to link to existing course content.
2. To add an icon, click the Icon Picker and select the desired icon.
3. Check the Open in New Tab box to open the button's link in a new browser tab.
To change the button colors and size, open the Style panel and under Button Styles...
- For a button with a solid background color, click Solid and select the desired color combination.
- For a button with a white background and colored outline, click Outline and choose the desired color combination.
- To set hover and visited colors for the button, use the color controls under Links Styles > Hover/Focus and Link Styles > Visited (Optional).
- To set the size of the button, under Size, choose Sm, Med, Lg, or check Fill Width to use the available width of the page.

Edit a link or button

Select the Edit Current Element ( ) tab in the sidebar.
Select or place your cursor within the link or button you want to modify.
Choose Link as the active tool for text links or Button as the active tool for button links.
Use the options available in the Content and Style panels to make the desired changes.

Learn More

Cidi Labs DesignPLUS User Guide: Links and Buttons