The Finalsite editor gives you options to link to another page on your website, a page on another website, a file or resource, or even another location on the same page.
Creating basic links
Highlight the text (or select the image) you want to make into a link, then click the "Link" button. Choose “Add Link” from the dropdown.Note: Creating a link on an image comes with some accessibility considerations for your end users. Refer to "Creating a linked image" at the end of this article to learn more.
Select a link type.
URL links direct the user to a new website entirely.
Enter the address of the new website in the URL field. You can also enter an email address link into this field, by following the instructions below.
Site Page links direct the user to a different page on your site.
Click the "Browse" button to select from a list of pages on your website.
Site File links allow the user to download a file from your site.
Click the "Browse" button to open up a File Manager window, where you can select the appropriate file.
Media links open content saved in Multimedia Manager in a popup display.
Click the "Browse" button to select a channel, folder, or file from Multimedia Manager. Select “Display Media Title” or “Display Media Description” to show those elements in the popup. For resources, follow the instructions below.
Anchor links jump to a preselected section of the current page.
Follow the instructions below to add an anchor, then choose that anchor from the dropdown list.
Configure the link options. Each type of link shares the same option settings: Open link in a new tab, title, class, and ID.
Click "OK" when finished. Use the "Cancel" button to close the Link window without saving any changes.
Creating links to an email address
The technical name for a link to an email address is a "mailto" link. Create a link just as you would if you were linking to a website. Highlight the text you want to turn into a link, and click the “Link” button in the editor to bring up the Link Settings window:
If you were linking to a website, you'd put its address in the "URL" field (red arrow). To create an email link, erase the "http://" that's in there, and add this text to the URL field instead:
Replace [RecipientEmailAddress] with the email address you're targeting in the link. Don't include the brackets with your address or subject.
Creating links to a telephone number
Similar to email addresses, telephone numbers that are typed into the content area of a page are not automatically converted to tappable links that would prompt a call to the listed number -- you must manually turn that phone number text into a link. Here's how you can do that:
Highlight the text you would like to make into a phone link. Usually this will be the phone number that's to be dialed, but it can be whatever text you like, or even an image.
Click the “Link” button in the editor to bring up the Link Settings window.
In the "URL" field, type:
Don't include the brackets, just type the phone number without any hyphens or special characters (for example, tel:8005551212).
Creating a link to a resource
To link to a file saved in Resources, use “Add Link to Resource” option in the “Link” button menu. Highlight the text you want to display, and open the Resources modal with “Add Link to Resource.” Select the resource you want to link. From this window, you can also upload a new public resource or import a file from File Manager or Multimedia Manager.
Creating anchor links
Anchor links allow you to create a link that points to a different location on the current page. Creating anchor links is a two-step process:
Create a “target” location in the page where the user will end up.
Create a link that points to that anchor.
The target location on the landing page is really just a spot on the page that's been given a specific name. This is done in the text editor inside a Content element.
Note: Anchor links created using the method below only work within the same content element. An anchor link can only be placed in one element and linked to another manually.
Open the text element, place your cursor in the location where you want users to end up, and click the “Link” button. Select "Add Anchor" from the Link button menu. You'll be prompted to give your anchor a name.
If you're only adding one anchor, the name can be completely arbitrary. If you're editing a document with an intricate structure that may require multiple anchors, take a moment to think about how you should name them. Each anchor on the page must have a unique name. Avoid spaces in anchor names, as they can introduce some unwanted complexity.
Creating a link to your target
Now that you've established an anchor, you can create a link to it from somewhere else on the page. Highlight the text, image, or other resource that will link to the anchor and click the "Link" button again. This time, select "Add Link."
In the Link Settings window that pops up, select the "Anchor" link type, then use the "Anchor" dropdown menu to choose the target for this link. Any anchors that you've created on the page will appear in the dropdown.
Click the blue OK button, and you're done. The text you highlighted will now become a link that takes users to the anchor that you created.
Creating a linked image
Please note that linking an image may create accessibility issues if the image has complex text within it or if it is not clear that the image is a link. Please refer to the W3C Web Accessibility Tutorial about Functional Images to understand the standards.
To link an image, click on the image so that it is highlighted in the editor. Next, click the Hyperlink icon and insert the URL of the link.
After setting the link around the image, you will then need to update the alternative text of the image so that your end users who are using assistive technology will know what the image's function is.
To update the alternative text of the image, right-click the image, select "Image Properties," and add the appropriate alternative text in the Alternative Text field. If the linked image has text, be sure to write the exact wording of the text of the image into the alternative text field.
More on effective alternative text can be found at: Alt Decision Tree.