Creating an anchor in Typography component

Elements
1

I wish to create a link to a particular section / heading of a lengthy piece of text.

As I understand it it is not possible to import the text as a html or markdown (which would include an anchor), so how do I create an anchor in the text for I can create a link to it?

2

You can do this in elements.

  1. You first need to add an ID to the component that will serve as your anchor. The ID can be found in the Advanced section in the settings for the selected component.
  2. Then where you want to create your link in the text. Select the text, which will display the inline text editor.
  3. Click on the LINK button in the inline text editor. This will open a link dialog where you will see an Anchor popup below the link field.
  4. If your anchor is on the same page select the page from the pop next to the link field. This will then populate the Anchor popup with all of the anchors that are available on the selected page.
  5. Select the anchor you want to jump to and you are done.

NOTE: this also works across pages, so you can select a different page and see the anchors available on that page.

3

@handshaper that is an excellent write-up, nice work!

This question (and your answer) also prompted me to record a quick video for the manual showing how to do this!

Although… I did find a bug while doing this where the anchors weren’t linking correctly from text, so expect a fix soon on that one.

4

Thank you for both the responses and helpful explanation and the video.

The linking I am looking for is slightly different. If I have a Typography component with a block of text, and I want to have the anchor linked to a specific piece of text within that text. For example, in the following block of text, there is “Heading 1”:

You can do this in elements.

  1. You first need to add an ID to the component that will serve as your anchor. The ID can be found in the Advanced section in the settings for the selected component.
  2. Then where you want to create your link in the text. Select the text, which will display the inline text editor.
    Heading 1
  3. Click on the LINK button in the inline text editor. This will open a link dialog where you will see an Anchor popup below the link field.

Is it possible to create an achor to “Heading 1” and link to that?

5

Not currently, but you could break the block of text up into seperate text or typography components… that way you can link to the relevant section.

6

Thank you for the response.

The text is long(ish), a set of terms and conditions, so breaking it down into separate elements would be time consuming and mechanical - based on what Elements can do at the moment.

7

It’s on the list to add “ID” support for text inside of the Typography component.

1 Like
8

Thank you for letting me know.