Mark text that ends with a link using the UTF-8 Code for “Right Triangle” character:
▶
▶
Easy way: Put this page in Edit Mode and copy and paste the following to insert in text in another page you are editing. It will assume the font size of the block is inserted into:
Once you have copied this symbol into the page you are editing, it can be copied and pasted within that page, without having to come back here. Each time you copy and paste this graphic make sure to update any links that may have been embedded in the newly pasted copy.
Use the Right Triangle special character to indicate navigational links, but not for inline reference links. The symbol above is set to display as “Large” = 36 pixels to make it easy to copy. It will conform to the text size you set for for your Block.
It uses the current UTF-8 code, developed for HTML 5. UTF-8 supersedes ASCII and ISO-8859-1 character codes that were both limited and did not adequately support multi-language content.
Recommended formatting:
- Use this instead of a “period” at the end of the link text
- Add two spaces between the end of link text and this character
- Be sure to select both the link text and the symbol when add the destination URL
Example:
Special characters in text such as symbols, punctuation, and non-Latin characters (there are many!) are set by inserting their UTF-8 character code, not by typing directly from the keyboard. The easiest way is to copy and paste a working example. You can find geometric characters (and a handy little “Try It” demo) on the following page under the heading Geometric Characters ▶
When to Link to New Tab
Recommended:
Link to a new tab when it will take the user to a page outside of the dc.umich.edu domain, e.g.,
NASA Images ▶
To override the default link color of text
Adding a link to text will cause the text to default to a new color. This is a valuable aid for usability purposes, but when linked text is used with a background color it may (usually!) be undesirable. To overide:
- Once the text link has been created, select all the text
- In the right sidebar “Block” format menu, use the “Text Color” dropdown menu and under “selected text color” pick an alternate; black “#000000” or white “#ffffff” are recommended.
- NOTE: If the “Color settings” dropdown is showing, the “Text Color” menu will be below it. Using “Color settings” will NOT create the needed change.
This link points to the U-M Gateway page
This link points to the U-M Gateway page
Anchors within the same page (internal page jumps)
In the text below:
- anchor point = the place in a page you want the user to jump to after clicking an anchor link
- anchor name = the name you create for the anchor point
- anchor link = the place the user will be jumping from
First: Locate the destination anchor point and create its name:
- There is no “Anchor Block” in our WordPress toolset. sad.
- Best practice: create Anchors in Header blocks
- Create the header block you want as the landing point for the user – or click your cursor in an existing header block at the desired location.
- With the cursor in the header block, in the right sidebar “Block Settings” open the dropdown “Advanced” to access the “HTML anchor” field.
- There, enter a simple name for your anchor:
- Anchor names must start with an alpha-numeric character (no symbols)
- Crazy fact: to create a link to this anchor you will later need to preface this name with the # symbol, BUT you cannot use # in your anchor title… okay?
- Anchors must be unique within a document; avoid using the same anchor name on other pages (bonus: you can create as many links in other pages/locations as you want pointing to this one unique anchor – so it’s a fair trade).
- Anchor names are case-sensitive.
- Anchor names can include only the following symbols: hyphen (-), underscore (_), colon (:), period (.) – it cannot include spaces.
- Note: I have not yet found a way to display anchor names on a page after they are created [jmerlinw 2020.11.30].
- If you use headers as anchor points, you can click through headers on a page and see anchor names pop up in the “HTML anchor” field.”
- You can display the page in HTML (in “Code editor” mode) and search (Cmd F) for: id=” Anchor names are displayed in HTML as id=”name-of-anchor“ This method sometimes even works : -)
Then, link the anchor name (like it was as a URL) to the text or object the user will be clicking on:
- Highlight the clickable text, image, or button that the user will be starting from, and select the link option from the block’s toolbar (top of editing page).
- Type in the HTML anchor name you created, adding the # symbol manually as the first character. If you created an anchor named: important-notice you would enter: “#important-notice“.
Anchors in another page
If you want to jump to an Anchor on a different page in the site:
- Locate and create the anchor name on the destination page first.
- On the starting page, create the clickable object using the destination page’s URL and add the # sign and anchor name as a single string:
example.com/anotherpage#important-notice
See also WordPress documentation here ▶