Links

linkButton.jpg

The Insert Link button is used to create links to internal and external pages and media files email links and anchors. The process for inserting a hyperlink differs depending on the type of hyperlink you wish to create.

Link to a Page on Another Website

  1. Select the text that will form the hyperlink.
  2. Click the Insert Link button which will reveal the link properties slide out menu.
  3. In the URL field, enter the URL of the web page you wish to link to.
  4. In the Title field, enter the text that will be shown as a pointer to the link. This is important information for everyone reading the website with different accessibility aids.
  5. In the Target field, select the target window/frame then select how the should be opened. There are three different ways the link can be opened:
    1. Open link in a new tab in the same browser window.
    2. Open link in a new separate browser window.
    3. Open the link in the same browser tab as the user would be viewing your site.
  6. Click Select. Your text will now contain the link as requested.

externalLink.jpg

Link to a Page in Umbraco

  1. Select the text that will form the hyperlink.
  2. Click the Insert Link button which will reveal the link properties slide out menu.
  3. Select a page from the Content tab to link to. This will then populate the link to document automatically.
  4. In the Page Title field, enter the text that will be shown as a pointer to the link. This is important information for everyone reading the website with different accessibility aids, (by default the name of the selected page will automatically be entered for your convenience).
  5. In the Target field, select the target window/frame the link should be opened in.
  6. Click Select.

internalLink.jpg

Link to a Media File in Umbraco

  1. Select the text that will form the hyperlink.
  2. Click the Insert Link button which will reveal the link properties slide out menu.
  3. Select the link to file button which is situated at the bottom of the slide out menu.
  4. You will then be taken to the media picker, where you can select the media item.
  5. When you have selected the media item you will be taken back to the link screen where the link to document and page title fields have been populated with the media item information. By default the page title will be the media file name however this can be edited.
  6. In the Target field, select the target window/frame the link should be opened in.
  7. Click Select.

linkMedia.jpg

Link to an email address in Umbraco

  1. Select the text that will form the hyperlink.
  2. Click the Insert Link button which will reveal the link properties slide out menu.
  3. In the URL field, enter the text mailto: followed by the email address you wish to link to (e.g. name@company.com).
  4. In the Title field, enter the text that will be shown as a pointer to the link. This is important information for everyone reading the website with different accessibility aids.
  5. In the Target field, select the target window/frame the link should be opened in.
  6. Click Select.

linkEmail.jpg

Link to an Anchor on the Same Page

An anchor allows you to create internal page links that enable users to navigate within a page. There are two parts to setting up an anchor; the anchor itself and the link to the anchor.

Creating an anchor

  1. Focus the editor cursor where you wish to create the anchor.
  2. Click the anchorButton.jpg which will then launch the Anchor creation dialog.
  3. In the name field enter your anchor name. You should avoid special characters and do not use spaces.
  4. Click OK to finish.
  5. You will see a small anchor icon where you previously had the editor cursor.

To delete the anchor, select it and then press your delete key.

anchorDialogue.jpg

Linking to an anchor

  1. Highlight the content which you wish to add the anchor link to.
  2. Click the Insert link button which will reveal the link properties slide out menu.
  3. Add a hash symbol followed by the name of your anchor into the link to document* field.
  4. Click Select.

linkAnchor.jpg

Create a Link from an Image

You can make images into clickable links in Umbraco.

  1. Insert an image into the editor (see Working with Images for more details).
  2. Select the image that will form the hyperlink.
  3. From here, follow the same instructions as for inserting a normal hyperlink, starting at step 2.

Removing a link

  1. To remove a link you first need to select it in the editor. For text links click the cursor anywhere within the link text. For an image just click the image itself.
  2. Click the Remove Link button which remove the hyperlink. If the remove link button is not in your richtext editor toolbar you will instead need to click the Insert/Edit Link button again and manually remove the link from the link to document text field.

unlink.jpg