3f – Addition of Anchor-Links

Introduction

Anchor links help you to navigate within the emailing and guiding to predefined points, such as from the table of contents to product categories, forms, CTA buttons, etc.
Multiple anchors can be placed within a page, allowing navigation to different destinations. A ‚Go to the top of the page‘ link or button functions in the same way.
In Maileon Editor 2, placing anchor links is quick and easy. Below you will find two methods for placing an anchor link. Method 1 demonstrates how to place an anchor link within the body of the text, while Method 2 explains how to create an automatic table of contents.

Method 1: Create the anchor links manually while editing your emailing draft

This method is effective if you want to link to individual points of information located anywhere in the emailing.
1. Highlight the text in your table of content you would like to indicate with the anchor link and click on the Insert Link icon (fig. 1).

Fig. 1: Highlight the text you want to anchor, then click on the ’Insert link’ icon.

2. Choose the Web Address function and insert a ‘#’ (hashtag sign) followed by the keyword you want to jump to in the table of contents (fig. 2).

Fig. 2: Use a hashtag before the keyword that will serve as the anchor.

Note: Track clicks must be deactivated for the anchor link to work!
Click on Save.
3. Select the text block in the emailing where you want to place the anchor.

• In Settings, select Anchor link.
• Add the previously set keyword to the checkbox related to the anchor link, without the ‘#’ (fig. 3).

Fig. 3: Follow the steps to set the text box as the destination of the anchor link.

4. Go to Preview and click on the highlighted text (fig. 4).

Fig. 4: By clicking the anchor link you will jump directly to the point where the anchor keyword is set.

Method 2: Create an automatic table of contents

This method is useful if you wish to include a table of contents at the beginning/as an introduction of the emailing.

1. Create a new text block for your table of contents and click on the ‘Insert placeholder’ { } icon in the editing bar (fig. 5).

Fig. 5: Select the text and click on the ‘Insert placeholder’ icon to create the automatic table of contents.

2. Select Advanced placeholders (fig. 6.) -> Table of contents list iterator (fig. 7.).

Fig. 6: In the dropdown menu of ‘Insert placeholder’, select ‘Advanced placeholders’.

Fig. 7: In ‘Advanced placeholders’, select ‘Table of content list iterator.’

Note: This function may appear in the Others menu after clicking on the Insert Placeholder icon (fig. 8). You will also find the Table of content list iterator function in the Others dropdown menu (fig. 9).

Fig. 8: You may find this function in the ‚Others‘ menu after selecting the ‚Insert placeholder‘ icon.

Fig. 9: ‘Others’ menu also includes ‘Table of content list iterator’ function.

3. After applying Table of contents list iterator, a code will be inserted in your textbox. Delete the dots in the middle of the code that are outside the brackets (fig. 10).

Fig. 10: After the code has been inserted, delete just the dots from the middle

4. Click on the Insert placeholder icon again and among Other placeholders, select Table of content anchor (fig. 11).

Fig. 11: Choose ‘Table of content anchor’ among ‘Other placeholders’.

The code [[TOC-TITLE]] of Table of Contents Anchor will be inserted into your textbox (fig. 12).

Fig. 12: The code [[TOC-TITLE]], placed within the code for the entire table of contents, has been inserted into the textbox.

5. Define the anchor structure: Create, place and name the blocks in the body of the mailing where the table of contents will link to (fig. 13).

Fig. 13: Edit and assign names to the blocks that the table of contents will link to.

6. Select the text in the edited textboxes, click on Heading in the menu and choose one of the Table of contents (TOC) formatting options (fig. 14).

Fig. 14: In ‘Heading’, choose one of the Table of contents (TOC) formatting options.

7. To activate the jump menu between the table of contents and the textboxes, select the [[TOC-TITLE]] code of the Table of contents anchor and click on the Insert link icon (fig. 15). You are able to format the TOC text style as you want.

Fig. 15: Select the [[TOC-TITLE]] code and click on ’Insert link’.

8. Select Standard link -> Table of content anchor link (fig. 16).

Fig. 16: Select the ‘Table of content anchor link’ to take the final steps.

9. In Preview, ensure that the table of contents — which can be renamed at any time, as shown in the image below — and the selected text boxes are linked using anchor links. The underlined keywords serve as the anchor links (fig. 17).

Fig. 17: Running of anchor link preview.

Example of creating Table of contents via TOC-TITLE code

The following newsletter snippet demonstrates how the TOC-TITLE code functions in a completed newsletter (fig. 18).
The elements of the table of contents (‘Themenübersicht’) include the separate anchor links, which appear in separate text blocks below the table of contents, as shown in the highlighted section (‘Highlight des Monats’).

Fig. 18: Anchor links as elements of table of contents.

Each item in the table of contents has a corresponding anchor link and appears as a separate text box within the mailing.