Linking in Drupal

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

Grey Outline BUTTON

Red Outline BUTTON

CTA RED BUTTON

CTA GREY BUTTON

Back to top