Wie können wir dir helfen?

Textanker auf deiner Jimdo-Seite

Ein Textanker ist ein Link in einem Text auf deiner Webseite, über den deine Besucher mit einem Klick auf eine andere Stelle deiner Seite springen. So können sich deine Besucher auf direktem Weg zu einem bestimmten Thema klicken, ohne nach dem jeweiligen Abschnitt zu suchen.

 

Textanker setzen sich zusammen aus

  1. einer Sprungmarke 

  2. und einer Zielmarke



Klicken deine Besucher auf die Sprungmarke, werden sie direkt zur Zielmarke geleitet. In diesem Artikel erklären wir dir, wie du Textanker auf deiner Webseite einsetzt.

Möchtest du ausprobieren, wie Textanker funktionieren?


Dann klicke einfach auf unseren Beispiel-Textanker (der verlinkte Text ist hier die Sprungmarke).


Textanker erstellen

Textanker erstellst du mit einem HTML-Code, der aus zwei Schnipseln besteht: Der Sprungmarke und der Zielmarke. Die beiden Schnipsel fügst du an unterschiedlichen Stellen deiner Webseite als HTML ein.

Schritt 1: Die Sprungmarke

Zuerst kümmerst du dich um die Sprungmarke. Die Sprungmarke fügst du als einen HTML-Schnipsel in ein bestehendes oder neues Textfeld ein.

Die Sprungmarke enthält immer

  1. einen Namen für den Textanker (Anker-Name)

  2. den Verlinkten Text


Der fertige Sprungmarken-Schnipsel in der HTML-Ansicht sieht so aus:

<a href="#Anker-Name">Verlinkter Text</a>

Um deinen eigenen HTML-Schnipsel zu erstellen, klicke auf das Textfeld, in dem du die Sprungmarke setzen möchtest. Wähle dann das HTML-bearbeiten-Symbol. Erscheint bei dir das HTML-Symbol noch nicht, klicke vorher auf das Feld mit den drei Punkten.


Nun siehst du das HTML-Feld mit deinem bestehenden Text (oder ein leeres Feld). Kopiere nun den Sprungmarken-Schnipsel von oben und füge ihn in das HTML-Feld ein. Passe den Schnipsel dabei wie folgt an:

  1. Gib dem Textanker deinen eigenen Anker-Namen, z.B. “#Textanker1” (die Raute vor dem Namen nicht vergessen).
  2. Ersetze den Platzhalter “Verlinkter Text” mit dem Wort/den Worten, die in deinem Text als Link erscheinen sollen (deine Besucher sehen später nur den verlinkten Text).

  3. Setze die Sprungmarke an die richtige Stelle in deinen Text ein.

  4. Klicke auf speichern – schon geschafft!
Hinweis: Weise dem Textanker einen einzigartigen Anker-Namen zu, damit die Verlinkung bei mehreren Text-Ankern auch funktioniert.

Der HTML-Text mit Sprungmarke in dem Textfeld-HTML-Fenster sollte nun ungefähr so aussehen:

Die Besucher der Webseite sehen diesen Beispieltext so:
"Dieser Text ist nur ein Beispiel. Mit einem Klick auf diesen Textanker-Link springen die Besucher der Webseite zur Zielmarke."

Schritt 2: Die Zielmarke (der Anker)

Nun bestimmst du mit der Zielmarke die Stelle, auf die deine Besucher mit einem Klick springen sollen. Anders als die Sprungmarke fügst du die Zielmarke in ein Widget-Element auf deiner Seite ein.

 

Die fertige Zielmarke sieht in der HTML-Ansicht so aus:

 

<div id="Anker-Name"></div>

Deine eigene Zielmarke erstellst du um Handumdrehen:

  1. Bestimme die Stelle, an der du die Zielmarke einfügen möchtest (zum Beispiel über einer Überschrift oder einem Absatz).
  2. Klicke auf Inhalt hinzufügen > Weitere Inhalte und wähle Widget/HTML.
  3. Nun öffnet sich das HTML-Fenster. Hier fügst du den Zielmarken-Schnipsel ein. Verwende dabei den in Schritt 1 festgelegten Anker-Namen.
  4. Klicke auf speichern – fertig!

Dies ist unser Beispieltextanker (siehe ganz oben). Hier befindet sich die Zielmarke.

Für Fortgeschrittene

Textanker in der Navigation

Als Nutzer von JimdoPro und JimdoBusiness hast du die Möglichkeit, in deiner Navigation Textanker für deine Startseite zu setzen. Deine Besucher springen dann mit einem Klick auf die Unterkategorie in der Navigation zu einem von dir bestimmten Punkt auf deiner Startseite. Dies eignet sich zum Beispiel hervorragend für Webseiten, die nur aus einer Seite bestehen (sog. One-Pager).

Textanker in der Navigation erstellst du mit diesen Schritten (nur für JimdoPro und JimdoBusiness):

  1. Erstelle eine Zielmarke an der Stelle auf deiner Startseite, zu der deine Besucher springen sollen. Verwende dafür folgenden Schnipsel: <a id="Anker-Name"></a> (weicht vom normalen Schnipsel ab).
  2. Füge in deiner Navigation eine neue Unterseite hinzu und verschiebe sie auf die zweite Ebene unter deine Startseite.
  3. Klicke in der Navigation neben der Unterseite ganz rechts auf das Symbol “Externer Link”.
  4. Trage in das Feld einen Schrägstrich und eine Raute sowie den Anker-Namen des Textankers ein (den selben wie in der Zielmarke): /#Anker-Name.

Nun springen deine Besucher mit einem Klick auf die Unterseite in der Navigation direkt zu deiner Zielmarke! Eine genaue Erklärung zu Textankern in der Navigation bieten wir dir übrigens auch in unserem Webinar zum Thema One-Pager an.

Navigations-Textanker für andere Unterseiten
Mit Textankern in der Navigation kannst du einfach auf bestimmte Stellen auf deiner Startseite verlinken. Es ist daneben auch möglich, in der Navigation auf andere Zielseiten als deine Startseite zu verlinken. Dazu trägst du im Feld “Externer Link” die vollständige URL der Zielseite ein und ergänzt den Link mit “/#Anker-Name”:
http://deinejimdo-seite/Unterseite/#Anker-Name.

Bitte beachte: Ist die Zielseite jedoch nicht deine Startseite, öffnet ein solcher Textanker bei deinen Besuchern technisch bedingt immer einen neuen Tab.

Tipp: Sanftes Scrollen

Klicken deine Besucher auf einen Textanker, springen Sie zu einer anderen Stelle auf deiner Webseite. Du kannst deine Besucher auch sanft zu der von dir gesetzten Zielmarke scrollen lassen. Füge dafür einfach die folgenden Zeilen in den Head-Bereich deiner Jimdo-Seite ein:

Hier findest du den HTML-Code für "Sanftes Scrollen":

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[


       $(function() {
         $('a[href*=#]:not([href=#])').click(function() {
           if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {

             var target = $(this.hash);
             target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
             if (target.length) {
               $('html,body').animate({
                 scrollTop: target.offset().top
               }, 1000);
               return false;
             }
           }
         });
       });

//]]>
</script>

Bitte beachte:
Nutze keine Leerzeichen in den Ankernamen und verzichte auf Umlaute oder Zeichen wie / , ( , ) , _ , Punkte oder Kommata.
Pro-Tipp:
Du kannst auch von einer anderen Unterseite auf deine Textanker verweisen. Um dies zu nutzen, wechsle auf der Unterseite, auf der du deinen Textanker eingebunden hast, in den Ansichtsmodus (unten rechts auf deiner Jimdo-Seite) und markiere dir den Link, z.B.: http://deineseite.de/kontakt aus der Adresszeile deines Browsers.
Um zum Textanker zu verlinken, ergänze den Link einfach mit deinem Anker #ankername am Ende. Natürlich nutzt du dafür deinen Ankernamen, so dass es zum Beispiel so aussieht: http://deineseite.de/kontakt#telefon-nummer