Skip to main content
MindTouch Success Center

Add anchors to your text

Adding an anchor to your text allows you to link to that specific part of your article. You may link any text, whether it lives on that page or on other pages on your site to that anchor, just like with any other link. When clicked, the link allows a reader to jump to that anchor in the article. 

Set up heading anchors

In MindTouch, headings automatically create anchors called Sections. To add a heading anchor, edit a page and select where you want the header. Then select H1, H2, H3, H4, or H5 from the editor menu to select the heading that you want. Click Save once the heading is added.

Set up in-text anchors

You can create anchors in any article. Edit the article you would like to create the anchor for and select the words you would like to add the anchor to. From there, select Elements > Anchor in the editor to open the Anchor Properties window. Name your anchor and click OK.

You can also add anchors to areas of your article without selecting any text. This will direct an anchor link to the line it is appended to.

Change the anchor color

An anchor's HTML markup is an <a> tag just like regular links on your page. Because of this, any text that is added to an anchor will have the same styling as a normal link. This may cause confusion to the end user as the anchors do not have a destination (href) attribute but the browser will make them look like normal links. You can add a class name with accompanying CSS style in the control panel, or an inline style to your anchor that will make it look like the rest of your default text. In this example, we will use the hex color code #333 (dark grey) as it is the default text color for MindTouch deployments. 

  1. Add a class name to your anchor.
    <a class="anchor-link" id="My Anchor's Name" name="My Anchor's Name">My Anchor's Name</a>
    
  2. Add a customer style in the Control panel.
    .anchor-link {
        color: #333;
    }
    Or you can attach the following inline style to the HTML of your anchor:
    style="color: #333"
    
  3. Confirm the format of your full anchor points.
    <a id="My Anchor's Name" name="My Anchor's Name" style="color: #333">My Anchor's Name</a>
    

Anchor examples

FixedAnchor.png
 

  • Was this article helpful?