Anchor links

Anchor links allow you to link within a page of your website or to point directly to page sections of other subpages. In this tutorial you will learn how to create anchor links in toujou/TYPO3.

Create anchor link Use element ID Sample Name elements Pieces of advice

Create internal anchor links

Mark link text

Creating an anchor link is not much different from creating »regular« links:

Select the text in the editor and click on the link button above the editor mask.
As usual, the link browser opens. There, you remain in the Page tab.

Select content element

If necessary, unfold the landing page in the page tree.
To select a content element, click on the checked-in arrow right to the left of the page icon of your landing page.
A list view of content elements on the page will now open. Click on the desired element.
Since content elements are not inherently named, click here to learn how to edit the name of an element.

Alternative: add element ID

Note: Since the element ID would have to be inserted manually as an external link (in the link browser), we do not recommend this option when creating links within your website. This is related to the architecture of your website and to the communication about your internal links to search engines. However, identifying an ID will help you when forwarding anchor links to prospects or allow better use of backlinks to your page.

Determine ID

In TYPO3, anchor links for content elements are composed by default of a »c« (represented as »#c«) and the unique ID of the content element.
By hovering over the element icon, you determine the ID of a content element.

Creating link URLs manually

The above mentioned element would be linked by adding #c2249 manually to the URL after a forward slash. In our example: tutorials.toujou.net/what/#c2249.
In the screenshot you can see the frontend view of the new anchor link and (below to the left) the URL our link button points to, which appears by hovering.

Sample application

The prerequisite for setting anchor links are content elements that give structure to your page. The following image shows a comparison of the backend and frontend views of a content page. Our sample page consists of five content elements: Starting from a header image, then an introductory text, illustrated text blocks, a teaser element and finally a map element. In the instructions described above, we have set an anchor from the top of the page to the map element.

Name elements

As an intermediate step, we recommend naming content elements with a short description so that they can be found in the backend – not only when creating anchor links – for quicker processing. The following screenshot illustrates the list view of our sample page. Unnamed items are displayed with [No Title].

Insert element name

In our example, we will name the map element »Business address«. This heading is not visible in the frontend.

Enter the edit mode of the element you want to give a description.

Click on the Settings tab. There you add the element name to the heading section. Save the change.

Pieces of advice

toujou is based on TYPO3 and anyone familiar with TYPO3 knows that there are many different options to use to reach your desired results. We would like to point out important information and little tricks that can assist you when you’re creating and editing your website.

Website links point to the top of multiple page types: external websites, documents, your own homepage, landing pages, or subpages of your website. Anchor links can help structuring very long content pages by giving visitors the ability to jump to the topics they were looking for or skip content. Just to name a few sample applications: Anchors can serve as linked content summaries at the beginning of a page or shorten the path to frequently searched sections, for example a contact form.

Carefully handle the use of anchor links and document their use, if necessary. Because if you delete an element to which you have linked, the previously set anchor link remains active, but it cannot find the section it was pointed to. The good news: The link does not lead your visitors to a (404) error page, but only to the top of the targeted page. However, the user experience at the time of the click may not be positive because of the unexpected behavior of the page.