Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

Add Hyperlinks in the WYSIWYG Editor

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

Hyperlinks are text (or sometimes images) that site visitors use to access 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 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:

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.
    The hyperlink icon in the text editor toolbar
  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.
    The internal links tab in the hyperlink manager
  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.
    The hyperlink manager with URL and Link Text fields filled
  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 uploaded to your files library. 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.
    The document manager in the text editor toolbar
  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.
  5. Once you've selected a document, you can change the Link text, Target, and Tooltip. 
    The document manager with a file selected
  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.
    The hyperlink manager icon in the text editor toolbar
  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. 
    The external link menu in the hyperlink manager
  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. 

If you're directing site visitors away from your site, you likely 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 help link 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 drop-down, select Call to action Button or Styled button.
    The call to action option in the CSS class menu
  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 link directly to a specific point on a page. They help create a table of contents for long pages or link 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 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.
    The hyperlink Manager icon in the text editor toolbar
  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 one word with no spaces.
  4. Enter an anchor name in the Name field. This can be whatever you want, but it should be descriptive so you can find it easily when you're linking to it.The anchor links tab in the hyperlink manager
  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 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 drop-down 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 drop-down 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 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 their phone will open a call when someone clicks the link. Users on a desktop will be asked to choose an app to begin the call. You should add a phone number link whenever 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.

The remove link icon in the text editor toolbar

Alternatively, you can remove links using the Element Editor at 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.

The element editor with a link element highlighted

What Else?

Was this article helpful?
0 out of 2 found this helpful