Inserting links with the editor

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

1. 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.

2. 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 in the Using Anchors article to create and link to anchors on your site.

3. Configure the link options. Each type of link shares the same option settings: Open link in a new tab, title, class, and ID.

   

4. 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:

mailto:[RecipientEmailAddress]

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:

1. 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.

2. Click the “Link” button in the editor to bring up the Link Settings window.

3. In the "URL" field, type:

   tel:[phone number]

   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 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.