In-text Links

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.

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.

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.

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"

Automatically

Step 1: Use the dropdown beneath the "Link URL" field to select the page.

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

Manually

Step 1: Visit the page you wish to make a link and copy the URL.

Step 2: Paste the URL into the "Link URL" field.

Step 3: Delete the protocol and the domain:

• http://cmshelpfiles.com/modules/text/rich-text-editor/ ← with protocol and domain
• /modules/text/rich-text-editor/ ← without protocol and domain

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

Put / into the "Link URL" field. Remember to save.

Automatically

Step 1: Type/paste the email address into the "Link URL" field.

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

Step 3: Click "OK" at the prompt.

Manually

Step 1: Type "mailto:" into the "Link URL field, without the quotes.

Step 2: Type/paste the email address after the "mailto:" prefix.

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

Step 1: Type "tel:" into the "Link URL" field, without the quotes.

Step 2: Type the country code, area code, and phone number after the "tel:" prefix. You can add dashes or not, it doesn't matter.

• tel:1-405-478-4080

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

Step 1: Click the icon to the right of the "Link URL" field.

Step 2: Navigate to the file and click it to insert it.

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

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."

If it's within the same rich text editor

Step 1: Click the "Anchors" dropdown under the "Link URL" field.

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

If it's not within the same rich text editor, but on the same page

Step 1: Type the name of the anchor into the "Link URL" field preceded by a #.

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

If it's on a different page

Step 1: Type/paste the relative URL to the page.

Step 2: Add a # followed by the anchor name.

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

Step 1: Type/Paste an alternate URL in the "Link URL" field, if the user has Javascript turned off.
Step 1a: Remember to change the target if it's an external link.

Step 2: Click the "Popup" tab at the top of the dialogue.

Step 3: Check "Javascript popup."

Step 4: Type/paste the popup URL into the "Popup URL" field.
Step 4a: If the popup is a document or image, click the icon to the right.

Step 5: Type the dimensions of the popup into the "Size" boxes. They are Height x Width.

Step 6: Type the position of the popup in the "Position" fields. They are Horizontal x Vertical and can take percentages. Entering "c" into both boxes will position it in the center of the screen.

Step 7: Un/check the desired options under "Options."

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

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.

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.

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.

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.