In-text Links

Before starting…

All tutorials are preceded by the following steps:

Step 1: Highlight the text/click on the image you wish to make into a link.

Step 2: Click the "Insert/edit link" button. It's fifth from the right on the top row of the editor and looks like a chain.

What should I know about links before I start?

First, there are two main types of links: absolute and relative links. Absolute links are used for linking off your site, while relative links are used for linking within the various pages of your site.

Second, there are many ways to access the internet and for those who can't do it visually, links that read "click here" are useless. Remember: Google can't read the context of a link either. Use full, descriptive phrases for links.

Why would I want to use an in-text link instead of the Links module?

While the Links module makes creating links easier, it only displays them in a bulleted list. Using in-text links through a rich-text editor allows you to control where and how the link displays.

How do I create a text link to an external website?

Step 1: Add the link in the "Link URL" field. Remember to include the "http://"

Step 2: Choose "Open in new window (_blank)" from the "Target" dropdown.
Whether the link opens in a new window or tab depends on the end user's settings.

Step 3: Click "Insert" or "Update"

How do I create an Anchor?

Step 1a: Don't click the Insert/edit link button.
Step 1b: Click the Anchor icon, it's third from the right on the top row of the editor and looks like an achor.

Step 2: Type the name of the anchor. Do not precede it with any characters and do not include spaces

Step 3: Click "Insert" or "Update."

How do I remove a link without deleting the text or image?

Step 1: Click on the link. Make sure the "Insert/edit link" button is active.

Step 2: Click the "Unlink" button. It's fourth from the right on the top row of the editor and looks like a broken chain.

Step 3: Save the rich text editor.

How do I make my link look like a button?

Please note that this may not work for everyone, nor may all options be available. Button classes are created at the beginning of the project. If you feel your website would benefit from having styled buttons, please contact us at (405) 478-4080 or file a support ticket.

Step 1: Add your link to your text, but don't click "Insert" just yet.

Step 2: Choose the "Advanced" tab.

Step 3: In the "Classes" field, type one of the following standard button options; modifiers are optional.

Standard Buttons

  • btn btn-default
  • btn btn-inverse

Size Modifiers

  • btn-lg
  • btn-sm

Display Modifiers

  • btn-block

For example, if you wanted a large, full-width button in your site's primary color, you'd use btn btn-default btn-lg btn-block to achieve that.

Button Classes

If adding the various modifiers don't work, your site may not be set up for them, in that case, you can either contact us using the options above or simply use the btn class to create standard buttons.