Add hyperlinks in the WYSIWYG Editor

Hyperlinks are text (or sometimes images) that site visitors use to go to other content. They are more simply known as links. They can link to other internal pages on your site or external pages on the broader web.

Links make it easier to navigate websites and find additional information. They can also act as key points for different page sections; as hyperlinks visually stand out from the standard text, readers will often scan a page using the links to find what they're looking for.

There are a few different ways you can insert links using the WYSIWYG Editor:

• Internal links
  • Internal document links
• External links
  • Call to action button links
• Anchor links
  • Create an anchor tag
  • Link to an anchor tag
• Email links
• Phone number links
• Remove a hyperlink

You can also use the WYSIWYG Editor to remove hyperlinks.

Before you start adding links, you may want to check out our best practice tips for hyperlinks, including information about the different kinds of styled links.

Internal links

Internal links let you create links between pages on your site. You do this through the Hyperlink Manager in the WYSIWYG Editor, which ensures that the link will still work even if you update the linked page's title, URL, or site location.

To add an internal link:

1. Open the WYSIWYG Editor of your page. If the page has previously been published, you will need to Update it first.
2. Select the text you want to use for the link or place your cursor where you're creating the link.
3. Select the Hyperlink Manager icon in the WYSIWYG Toolbar, or use the CTRL+K keyboard shortcut.
   
4. Go to the InternalLink tab, and your site tree will appear.
5. Navigate through your site tree and click on the page you want to link to. The site tree for the site you're working on expands below 'Current Group Links'. If you need to create an internal link to a page on a subsite, you will find those site tree(s) below 'Other Group Link'.
   
6. Once you select a page, the Hyperlink tab will reopen and show the details of the new link. If you have not selected any text to link, the name of the linked page will show in the Link Text field.
   
7. Change any details you need here, including changing the CSS Class if you're creating a Call to action button. We recommend adding a brief description of the linked page to the Tooltip field. This text will appear when a user hovers over the link on the live site.
8. When you're finished, select OK to insert the link.
9. Save your content, then Publish your page.

Internal document links

Internal links can also link to documents that you've uploaded to your files library. The process for doing so is very similar to creating an internal link to a page.

1. Open the WYSIWYG Editor of your page. If the page has previously been published, you will need to Update it first.
2. Select the text you want to use for the link or place your cursor where you're creating the link.
3. Select the Document Manager icon from the WYSIWYG Toolbar. A window containing your files library will appear.
   
4. Navigate through your files library and select the document you want to link. You can also upload documents here using the Upload Files icon. You can find any documents you've previously uploaded to your files library under Group Files or Shared files.
5. Once you've selected a document, you'll have the option to change the Link text, Target, and Tooltip. 
   
6. When you're finished, select Insert to put the link into your content.
7. Save your content, then Publish your page.

External links

External links can go to any page on the internet, outside of your site.

1. Open the WYSIWYG Editor of your page. If the page has previously been published, you will need to Update it first.
2. Select a piece of text in your WYSIWYG Editor that you want to link, or place the cursor where you want to insert the link.
3. Select the Hyperlink Manager icon in the WYSIWYG Toolbar, or use the CTRL+K keyboard shortcut.
   
4. In the Hyperlink tab, paste the URL of the external page you want to link to into the URL field.
5. Change any other details you want. We recommend adding some text to the Tooltip field – this text will display when you hover over the link. 
   
6. Click OK to create the link.
7. Save your content, and Publish your page when you're done.

It's best practice to set external links to open in a New Window and make the Link text descriptive, so your community knows where the link will take them. 

It's likely that if you're directing site visitors away from your site, you want them to complete a task or find specific information. An excellent way to emphasize this is to set your link as a Call to action button. 

Call to action button links

Call to action button links encourage your community to complete a task. They function as regular links but are emphasized and use link text that specifically calls out an action.

They're helpful for linking out to registration forms such as the "Register my pet now" call to action button on Point Russell's Animal Registration page.

1. Select a piece of text in your WYSIWYG Editor that you want to link, or place the cursor where you want to insert the link.
2. Create your link as usual – they can be internal or external links, but we do not recommend using a call to action button with documents. Document links automatically get a file type icon and file size around them, which can interfere with the theming of a button.
3. Change any other details you want. We recommend adding some text to the Tooltip field – this text will display when you hover over the link.
4. From the CSS Class dropdown, select Call to action Button or Styled button.
   
5. Click OK to create the link.
6. Save your content, and Publish your page when you're done.

Anchor links

Anchor links allow you to 'tag' specific points on a page and link directly to them. They help create a table of contents for long pages or linking to a particular section of one page from another. The table of contents at the start of this article is an example of anchor links.

Before you can start creating anchor links, you need to build the anchor tag.

Create an anchor tag

1. Place your cursor in the text where you want to create the anchor tag.
2. Select the Hyperlink Manager icon in the WYSIWYG Toolbar, or use the CTRL+K keyboard shortcut.
   
3. Go to the Anchor tab and enter a tag in the ID field, or use the Generate ID icon to create one for you. The tag must be 1 word with no spaces; phrases such as 'link1', 'link2', etc., will work well.
4. Enter an anchor name in the Name field. This can be whatever you want but should be descriptive so you can find it easily when you're linking to it.
   
5. Select OK to create the anchor tag. It will be indicated by an anchor icon in your WYSIWYG Editor but will not display on the published page. 
6. Save your content and Publish your page when you've finished.

Now that you've created an anchor tag, you need to create a link to the anchor.

Link to an anchor tag

1. Select a piece of text in your WYSIWYG Editor that you want to link out, or place the cursor where you want to insert the link.
2. Open the Hyperlink Manager.
3. If you're linking to an anchor on the same page, choose an anchor tag from the Existing Anchor dropdown menu in the Hyperlink tab.
4. If you're linking to an anchor on a different page, first, you have to create an internal link to the page. After selecting the page, you can choose an anchor tag from the Existing Anchor dropdown menu in the Hyperlink tab.
5. Change any other details you want. We recommend adding some text to the Tooltip field – this text will display when you hover over the link.
6. Click OK to create the link.
7. Save your content, and Publish your page when you're done.

Email links

When clicked on, email links will automatically open a new email in the user's email client. You can set them to open with a particular recipient email and a specific subject line. You should add an email link whenever you provide contact information or instruct your community to send an email. 

1. Select a piece of text in your WYSIWYG Editor that you want to link, or place the cursor where you want to insert the link.
2. Select the Hyperlink Manager icon in the WYSIWYG Toolbar, or use the CTRL+K keyboard shortcut.
3. Go to the EmailTab and enter the email address you want to link to into the Address field.
4. Add a pre-set email subject in the Subject field.
5. You can also add a Tooltip or create it as a Call to action button if you need to.
6. Click OK to insert the link.
7. Save your content, and Publish your page when you're done.

Phone number links

Adding a phone number as a hyperlink means that their phone will open a call when someone clicks the link. If users are on a desktop, they’ll be asked to choose an app to begin the call. You should add a phone number link every time you provide contact information or instruct your community to call you.

1. Select a piece of text in your WYSIWYG Editor that you want to link, or place the cursor where you want to insert the link. We recommend using the phone number as the link text so your community can tell if they're about to select a phone link.
2. Select the Hyperlink Manager icon in the WYSIWYG Toolbar, or use the CTRL+K keyboard shortcut.
3. Go to the Phone tab and enter the phone number you want to link to into the Number field. You can include numbers, + and - characters in this field but don’t include ( ) or text. If you do, your link won’t work.
4. Add Link Text if you didn’t select any text.
5. Click OK to create the link.
6. Save your content, and Publish your page when you're done.

Remove a hyperlink

You may need to remove a link if it's broken or irrelevant. To do this, select the link in the WYSIWYG Editor and select the Remove Link icon in the WYSIWYG Toolbar.

Alternatively, you can remove links using the Element Editor along the bottom of the Design tab. Link elements are represented by an 'A'; a string of text with a link in it might look like this: P > Font > A > RemoveElement. To remove a link using this function:

1. In the text area, click on the link you want to remove. You will see in the Element Editor that the top-level element will be bolded in the element path. In this case, the 'A' element, which refers to the link, is bolded.
2. Select RemoveElement in the element path to remove the link.
3. Save and Publish your page when you've finished.

What else?

• Learn more about the WYSIWYG Editor
• Learn about featured links
• Learn about adding files and links to page fields
• Learn more about files and the files library
• Check out our best practice tips for hyperlinks