Linking in Drupal

How to Create a Link

In order to make a link using the WYSIWYG editor first highlight the text that you want to make into a link. Then click on the Link icon in the editor (the one that looks like a chain link). In the URL field either type in the full URL of the page you want to link to if you are linking to a page not on suny.oneonta.edu or if you are linking to a page on suny.oneonta.edu then start typing in a word that is in the title of the page you want to link to. Once you start typing in the URL field Drupal will search for pages that contain the word you are typing in and produce a list of pages to pick from. Once you see the page you want to link to in the list of pages found by Drupal click it. After clicking the page you want to link to, Drupal will fill in the URL field with /node/####, the ### will be the id of the page in Drupal. Finally click the Save button in order to finish adding the link.

Using appropriate text for your hyperlink

Using a meaningful link for your text makes pages more user-friendly for visitors and search engines.

Link text should describe what the user will see when they click on it. DO NOT use "Click Here," "Here," or the full URL (https://...) itself.

Also, when placing links on a page make sure to place them far enough away from each other so users using a mobile device or a touch screen can click on the link.

What makes up a link?

Hyperlinks (or "links") have two main components:

  • The URL or address of the page (e.g. "http://suny.oneonta.edu/drupal-user-guide")
  • and the link text (e.g. "Drupal User Guide")

The URL is easy to determine because it's the page you are linking to but the text for the link is more difficult but just as important.

Linking Emails

For the URL, enter mailto: (without spaces) before the email address (i.e. mailto:Your.Email.@oneonta.edu)

Linking Telephone Numbers

For the URL, enter tel: (without spaces) before the phone number (i.e. tel:6074363500)

Note: Drupal automatically links telephone numbers on mobile devices

Anchor Links

Example Anchor

For long pages, it is generally a good idea to have anchors linking to different sections of the page.

  1. In the WYSIWYG editor, put your cursor to the left of the text (usually a heading) where you want to set an anchor.
  2. Click the icon in the toolbar (this is the anchor tool).
  3. Type in a name for the anchor in the Anchor Name field (case-sensitive). You are going to use this for the link to the anchor and click OK (i.e. ExampleAnchor)
  4. You’ll see a red flag next to the text indicating it is an anchor on the page.
  5. Scroll to the top of the content area and type descriptive link text (usually repeat the heading) that will link to the anchor.
  6. Highlight the link text and click the link icon in the toolbar.
  7. In the URL field type in the pound sign (#) and then the name of the anchor from step 3 (i.e. #ExampleAnchor)
  8. Click the Save button.
  9. Save the page and test your anchor link to ensure it works.

Example Anchor

Creating Buttons

It's easy to add a link and convert that link into a button now in Drupal. Once you have linked your text, go to the Styles drop down and select the button style you would like to apply to the link.

Button Examples

Black Primary Button

RED Primary BUTTON

Red Outline BUTTON

CTA RED BUTTON

Back to top