Anker. Wie erstellen Sie Links zu bestimmten Punkten auf einer Seite?

Kompatibilität:

WebSite X5 Evo und Pro

Wenn eine Seite viele Inhalte enthält, kann es hilfreich sein, Besuchern zu ermöglichen, sofort einen bestimmten Punkt zu erreichen, ohne alles durchscrollen zu müssen, was davor steht. Das ist zum Beispiel bei einem Inhaltsverzeichnis der Fall, das zu den verschiedenen Themen einer Seite führt, oder bei einer Fragenliste, die direkt auf die entsprechenden Antworten verweist.

In WebSite X5 können Sie dieses Ergebnis mit Ankern erzielen, indem Sie Links erstellen, die direkt zu einem bestimmten Inhalt auf derselben Seite oder auf einer anderen Seite der Website führen.

Was ist ein Anker?

Ein Anker ist ein Verweis, der einem Objekt zugeordnet wird und mit dem sich dessen Position innerhalb der Seite bestimmen lässt.

Sobald der Anker erstellt wurde, können Sie ihn als Ziel eines Links verwenden. Wenn der Besucher auf den Link klickt, scrollt die Seite zu dem Inhalt, der mit dem Anker verknüpft ist.

Sie können so viele Anker einfügen, wie Sie benötigen. Um sie leichter zu verwalten:

• erstellen Sie einen Anker nur für Inhalte, die direkt erreichbar sein sollen;
• verwenden Sie eindeutige und aussagekräftige Namen;
• vermeiden Sie Leerzeichen und Sonderzeichen in den Namen.

So erstellen Sie einen Anker

So weisen Sie einem Inhalt einen Anker zu:

• Gehen Sie zu Schritt 4 - Seiten und öffnen Sie die Seite, an der Sie arbeiten möchten.
• Wählen Sie im Layout-Raster das Objekt aus, das zum Ziel des Links werden soll.
• Klicken Sie auf die Schaltfläche Anker.
• Geben Sie im geöffneten Fenster einen Namen für den Anker ein.
• Bestätigen Sie.

Wiederholen Sie den Vorgang für alle Objekte, die direkt über einen Link erreichbar sein sollen.

So erstellen Sie einen Link zu einem Anker

Nachdem Sie den Anker erstellt haben, können Sie den Link festlegen, der zu diesem Punkt der Seite führen soll.

Die Vorgehensweise kann zum Beispiel von einem Wort oder einem Satz in einem Textobjekt ausgehen:

• Öffnen Sie das Textobjekt im Editor.
• Wählen Sie den Text aus, auf den Sie den Link anwenden möchten.
• Klicken Sie auf die Schaltfläche Link.
• Wählen Sie im Fenster Link die Aktion Seite der Website.
• Wählen Sie die Seite aus, die den Anker enthält. Das kann die aktuelle Seite oder eine andere Seite der Website sein.
• Wählen Sie im Feld Anker innerhalb der Seite den Anker aus, den Sie erreichen möchten.
• Bestätigen Sie.

Wenn der Besucher auf den Link klickt, wird er direkt zu dem durch den Anker gekennzeichneten Inhalt geführt.

Beispiel: So erstellen Sie ein Inhaltsverzeichnis für eine Seite

Anker sind besonders bei langen Seiten nützlich, auf denen Sie am Anfang ein Inhaltsverzeichnis einfügen können, über das Besucher direkt zu den verschiedenen Themen gelangen.

Stellen Sie sich zum Beispiel eine Seite zu einem Dienst vor, die in Einführung, Funktionen, Preise und Kontakte gegliedert ist.

So erstellen Sie ein Inhaltsverzeichnis:

• Fügen Sie am Anfang der Seite ein Textobjekt mit der Liste der Themen ein.
• Ordnen Sie weiter unten die Inhalte zu den einzelnen Themen an.
• Weisen Sie dem Objekt, das den Anfang jedes Themas kennzeichnet, einen Anker zu und verwenden Sie unterschiedliche und gut erkennbare Namen, zum Beispiel 'einfuehrung', 'funktionen', 'preise' und 'kontakte'.
• Öffnen Sie das Textobjekt mit dem Inhaltsverzeichnis.
• Wählen Sie den ersten Eintrag aus und erstellen Sie einen Link zum entsprechenden Anker.
• Wiederholen Sie den Vorgang für alle anderen Einträge.

Auf diese Weise können Besucher das Inhaltsverzeichnis verwenden, um sofort zu dem Inhalt zu gelangen, der sie interessiert.

So fügen Sie einen Link "Zurück nach oben" hinzu

Sie können die Navigation zusätzlich erleichtern, indem Sie am Ende der verschiedenen Themen einen Link einfügen, der zum Inhaltsverzeichnis zurückführt:

• Weisen Sie auch dem Textobjekt mit dem anfänglichen Inhaltsverzeichnis einen Anker zu.
• Fügen Sie am Ende eines Themas einen Eintrag wie 'Zurück nach oben' ein.
• Wählen Sie den Eintrag aus und erstellen Sie einen Link zum Anker des Inhaltsverzeichnisses.
• Wiederholen Sie den Vorgang an den anderen Stellen, an denen Sie die Möglichkeit anbieten möchten, schnell zum Anfang zurückzukehren.

Anstelle von Text können Sie auch eine Schaltfläche oder ein Bild verwenden: Die Vorgehensweise zum Festlegen des Links zum Anker bleibt gleich.

So funktionieren Anker mit Abschnitten

Wenn Sie die Seite in mehrere Abschnitte unterteilt haben, berücksichtigt WebSite X5 auch die Position des Objekts, dem Sie den Anker zugewiesen haben.

Wenn sich das Objekt in der aktuellen Ansicht in der ersten Zeile eines Abschnitts befindet, führt der Link zum Anfang des Abschnitts selbst, einschließlich eines eventuell vorhandenen oberen Rands.

Wenn sich das Objekt dagegen in einer späteren Zeile befindet, führt der Link direkt zur Position des Objekts.

So können Sie Anker sowohl verwenden, um einen bestimmten Inhalt zu erreichen, als auch um korrekt auf den Anfang eines gesamten Abschnitts zu verweisen.

#tip - Weitere Informationen finden Sie unter Seitenabschnitte. Wie erstellt man Layouts mit unterschiedlichen Strukturen?

So verwenden Sie Anker auf Full-Height-Seiten

Auf Full-Height-Seiten werden Abschnitte als Folien verwendet, die mindestens so hoch wie das Browserfenster sind.

#tip - Weitere Informationen finden Sie unter Full Height. Wie erstellt man einen folienartigen Seiten-Scroll?

Wenn Sie einen direkten Link zu einer dieser Folien erstellen möchten:

• weisen Sie einem Objekt in der ersten Zeile des Abschnitts einen Anker zu;
• erstellen Sie wie gewohnt den Link zu diesem Anker.

Auf diese Weise setzt WebSite X5 das Ziel des Links an den Anfang des Abschnitts und behält den Full-Height-Navigationseffekt korrekt bei.

#tip - Responsive Website. Wenn das Objekt, dem Sie einen Anker zugewiesen haben, in einer responsiven Ansicht ausgeblendet wird, bleibt der Link aktiv und führt zum Anfang des Abschnitts, zu dem das Objekt gehört.

So erstellen Sie einen Anker innerhalb eines Textes mithilfe von Code

Normalerweise wird ein Anker dem Anfang eines Objekts zugeordnet. Wenn Sie jedoch einen bestimmten Punkt innerhalb eines langen Textobjekts erreichen möchten, zum Beispiel einen bestimmten Absatz, können Sie:

• den Inhalt auf zwei Textobjekte aufteilen und dem zweiten den Anker zuweisen;
• manuell einen Bezeichner in den HTML-Code des Textes einfügen.

Die erste Lösung ist in der Regel die einfachste. Wenn Sie stattdessen direkt im Code arbeiten möchten:

• Öffnen Sie das Textobjekt im Editor.
• Aktivieren Sie die Erkennung von HTML-Code, indem Sie auf die Schaltfläche  klicken.
• Setzen Sie den Cursor an die Stelle, die direkt erreichbar sein soll.
• Fügen Sie zum Beispiel Folgendes ein: 

<span id="anker_name"></span>

Ersetzen Sie "anker_name" durch den Namen, den Sie für den Anker verwenden möchten. Der Bezeichner muss innerhalb der Seite eindeutig sein und darf keine Leerzeichen enthalten.

Manuell in den Code eingefügte Anker werden nicht in der Liste angezeigt, die im Feld Anker innerhalb der Seite des Fensters Link verfügbar ist.

So erstellen Sie einen Link zu einem dieser Anker:

• Öffnen Sie das Fenster Link.
• Wählen Sie die Aktion Datei oder URL.
• Geben Sie im Feld Datei im Internet Folgendes ein:

#anker_name

Ersetzen Sie "anker_name" durch den Bezeichner, den Sie im Code definiert haben.

Praktische Tipps

So verwenden Sie Anker effektiv:

• wählen Sie kurze und gut erkennbare Namen;
• vermeiden Sie Anker, die tatsächlich nicht verwendet werden;
• bei langen Seiten können Sie ein Inhaltsverzeichnis hinzufügen, damit Besucher die wichtigsten Inhalte schnell erreichen können;
• wenn Sie auf den Anfang eines Abschnitts verweisen möchten, weisen Sie den Anker einem Objekt in dessen erster Zeile zu;
• verwenden Sie auf Full-Height-Seiten ein Objekt in der ersten Zeile des Abschnitts, auf den Sie verweisen möchten;
• prüfen Sie die Links immer in der Vorschau, auch in den verschiedenen responsiven Ansichten.