Inserting links with the editor

In this Article

• Creating basic links
• Creating a link to an email addresses
• Creating links to a telephone number
• Add Link to Resource
• Creating a linked image
• Creating linked pages in your page tree

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.
   

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: (The majority of Finalsite clients use Resources. The only time you'd need to use the Media tab is if you are one of the remaining few on Multimedia Manager.) Media links to 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 article, "Use anchor links on a page" to create and link to anchors on your site.

3. Configure the link options. Each type of link shares the same option settings: URL/Email, Open link in a new tab, Title, Class, and ID.
   

   • URL/Email: Insert the URL or email address you'd like the visitor to redirect to when clicking here.
   • Open link in a new tab: Check this box if you'd like the link to open in a new tab. Leaving it unchecked means the new link will open in the same browser window.
   • Title: This is what will display on the page as hyperlinked text or a button label.
   • Class: Open the dropdown to see what Class styles you have available for creating beautiful button styles and so much more to your link! Learn more in the article, "How to make a button in Composer."
   • ID: Here is where you can set the ID as the HTML attribute of the link. This can also be another way to set anchor links on a page. 

4. Click OK when finished. Use the Cancel button to close the Link window without saving any changes.

Creating a link 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. 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).

Add Link to Resource

Sometimes it's helpful to be able to link directly to a file in Resources. The Add Link to Resource button comes in handy just for this purpose! 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.

The Resource Picker window will open up and you can select the resource you would like to link to, or click the green Public Resource button to upload one if you haven't done so yet.

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.

Creating linked pages in your page tree

Linked pages are used to redirect users from one URL to another, either another page on your site, or to a page on a different site entirely. This is often done in order to create an easy-to-remember URL that can be given out to parents, students, etc., that points to a page that's much deeper in the site navigation. For more information about creating custom URLs, refer to Customize page addresses and URLs.