In-text Links
- Before starting…
- What should I know about links before I start?
- Why would I want to use an in-text link instead of the Links module?
- How do I create a text link to an external website?
- How do I create a link to a page within my site?
- How do I create a link to my home page?
- How do I create a link to an email address?
- How do I create a link to a phone number?
- How do I create a link to an image or document?
- How do I create an Anchor?
- How do I create a link to an anchor?
- How do I create a Javascript popup?
- How do I remove a link without deleting the text or image?
- How do I make my link look like a button?
- 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 a link to a page within my site?
-
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."
- How do I create a link to my home page?
-
Put / into the "Link URL" field. Remember to save.
- How do I create a link to an email address?
-
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."
- How do I create a link to a phone number?
-
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."
- How do I create a link to an image or document?
-
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."
- 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 create a link to an anchor?
-
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."
- How do I create a Javascript popup?
-
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."
- 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.
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.