So können Sie in Divi Anker setzen – Schritt für Schritt

Es ist wirklich einfach, in Divi Anker setzten zu können. Der Ankerlink oder auch als Sprungmarke bezeichnet, ermöglicht es Ihren Besuchern, zu verschiedenen Abschnitten auf derselben Seite zu springen, ohne sie zu verlassen. 

Dies ist besonders nützlich bei langen Divi Seiten und -Beiträgen.

Wikipedia definiert Ankerlinks wie folgt:

Das Ankerelement (engl. Anchor) wird verwendet, um Hyperlinks zwischen einem Quellanker und einem Zielanker zu erstellen. Die Quelle ist der Text, das Bild oder die Schaltfläche, die zu einer anderen Ressource verlinkt, und das Ziel ist die Ressource, zu der der Quellanker verlinkt.[1]

Zwei Beispiele für Divi Anker

Wie im obigen Video zu sehen, können Ankerlinks sowohl in Navigationsmenüs als auch in Schaltflächen auf einer Seite oder in einem Beitrag verwendet werden.

Sie können auch das Divi-Textmodul oder die Standard-Editoren Ihrer WordPress Website (Gutenberg Block Builder und den klassischen Editor) verwenden, um Anker Links in einfachem Text hinzuzufügen.

Wann sollten Sie Divi Anker setzen?

Am besten setzten Sie Divi Anker für lange und umfangreiche Seiten und Beiträge ein. Sie sind auch eine gute Wahl für Einzelseiten-Websites (engl. One-Pager).

Ein guter Inhaltsverzeichnisabschnitt basiert oft auf Ankerlinks, ebenso wie praktische „Zurück zum Anfang“-Button.

Schritt 1: Erstellen Sie Ihren Anker Link im Divi Theme

Der erste Schritt besteht darin, an der Stelle einen Anker zu setzen, an der Ihre Besucher ankommen sollen.

Dazu müssen Sie einer Sektion, Zeile oder einem Modul eine eindeutige ID (Kennung oder „CSS-ID“) hinzufügen. Im nächsten Schritt erstellen wir Links, die auf diesen Ankernamen verweisen.

1. Aktivieren Sie den Divi Visual Builder auf der Seite, auf der Sie den Anker hinzufügen möchten.
2. Klicken Sie auf das Zahnrad, um das Element (eine Sektion, Zeile oder ein Modul) zu bearbeiten, dem Sie den Anker hinzufügen möchten.
3. Gehen Sie zum Reiter „Erweitert“ und öffnen Sie den Tab „CSS-ID & Klassen“.
4. Fügen Sie im Feld „CSS-ID“ einen klaren Namen für Ihren Anker hinzu (zum Beispiel „blog“ oder „contact-us“).
5. ⚠️ Verwenden Sie keine Leerzeichen oder Sonderzeichen wie # in Ihrer CSS-ID.
6. Klicken Sie auf die grüne Schaltfläche, um die Einstellungen zu speichern und speichern Sie dann die Seite.

Schritt 2: Erstellen Sie Ihre Ankerlinks in Divi

Nun ist es an der Zeit, die Links hinzuzufügen, die Ihre Besucher zu Ihrem neuen Ankerziel führen.

Das Prinzip ist einfach: Wenn der Anker auf der gleichen Seite sein soll, fügen Sie einfach einen Link zu Ihrer CSS-ID mit einem Hash (#) davor hinzu, zum Beispiel #blog oder #contact-us. 

Sie können natürlich auch von einem Anker auf eine andere Seite springen lassen, indem Sie zuerst den Slug hinzufügen, zum Beispiel /about-us/#contact-us. 

Sie können sogar von einer externen Quelle wie einer E-Mail oder sozialen Medien tief in Ihre Website, etwa direkt zum Kontaktformular verlinken, indem Sie Ihre vollständige URL gefolgt von der #css-id hinzufügen, zum Beispiel https://mysite.com/about-us/#contact-us.

Die häufigsten Anwendungsfälle

Einen Anker-Link in einem Divi-Menü hinzufügen

Das Hinzufügen von Ankerlinks zu Ihrem Divi-Menü ist eine großartige Möglichkeit, Besucher auf einen bestimmten Bereich Ihrer Webseite zu verweisen, beispielsweise innerhalb der Startseite.

1. Gehen Sie zu Ihrem WordPress-Dashboard und navigieren Sie zu „Design» Menüs“.
2. Bearbeiten Sie Ihr Divi-Menü.
3. Wählen Sie das Menü aus, das Sie bearbeiten möchten.
4. Gehen Sie zu „Menüelemente hinzufügen“ und erweitern Sie „Individuelle Links“.
5. Fügen Sie die CSS-ID (aus Schritt 1) in das URL-Feld ein und setzen Sie einen Hash davor, zum Beispiel #blog oder #contact-us.
6. Fügen Sie den Ankerlink in Ihr Divi-Menü ein.
7. Klicken Sie auf die blaue Schaltfläche „Menü speichern“.

Nun können Sie Ihren Menüankerlink im Frontend anzeigen. Möglicherweise müssen Sie zuerst Ihren Browser-Cache und den Website-Cache leeren. Danach können Sie ganz einfach auf die von Ihnen definierten Sprungmarken hinspringen.

Einen Ankerlink in einem Divi Button hinzufügen

Ein Call-to-Action-Button im Hero-Bereich (ganz oben auf der Seite) kann einen Ankerlink verwenden, um den Besucher mit einem Klick auf den Button zu einem bestimmten Abschnitt Ihrer Webseite zu führen.

1. Aktivieren Sie den Divi Visual Builder.
2. Fügen Sie ein Schaltflächenmodul ein.
3. Fügen Sie Ihren Schaltflächentext hinzu und erweitern Sie den Tab „Link“.
4. Fügen Sie die CSS ID für Ihr Ankerelement in das Feld „Schaltflächenlink-URL“ ein. Stellen Sie sicher, dass Sie einen Hash (#) vor die ID setzen, zum Beispiel #blog oder #contact-us. Am besten sollten Sie eine ID vergeben, die nur Kleinbuchstaben beinhaltet.
5. Fügen Sie Ankerlinks in Divi-Schaltflächen für die gewünschte Seite ein.
6. Klicken Sie auf die grüne Schaltfläche, um Ihre Einstellungen zu speichern, und speichern Sie die Seite.
7. Nun können Sie Ihren Schaltflächenankerlink im Frontend anzeigen. Möglicherweise müssen Sie zuerst Ihren Browser-Cache und den Website-Cache leeren.

Einen Ankerlink in einem beliebigen Textelement hinzufügen

Sie können auch Ihren Link immer als einfache Textlinks in Textmodulen oder in Beiträgen mit dem klassischen Editor oder Gutenberg Block Editor hinzufügen. Verlinken Sie einfach zur CSS-ID mit einem Hash (#) davor. 

1. Aktivieren Sie den Divi Visual Builder.
2. Fügen Sie ein Textmodul ein.
3. Fügen Sie Ihren Text hinzu und markieren Sie den Text, bei dem Sie den Ankerlink hinzufügen möchten.
4. Fügen Sie die CSS-ID für das Ziel Ihres Links in das URL-Feld ein. Stellen Sie sicher, dass Sie einen Hash (#) vor die ID setzen, zum Beispiel #blog oder #contact-us.
5. Fügen Sie einen Ankerlink im Divi-Textmodul hinzu.
6. Klicken Sie auf „OK“ und dann auf die grüne Schaltfläche, um Ihre Einstellungen zu speichern, und speichern Sie die Seite.
7. Nun können Sie Ihren Textankerlink im Frontend anzeigen. Möglicherweise müssen Sie zuerst Ihren Browser-Cache und den Website-Cache leeren.

Einen Zurück-zum-Anfang-Ankerlink in Divi hinzufügen

Das Hinzufügen eines Zurück-zum-Anfang-Links in Divi ist eine echte Möglichkeit, die Benutzererfahrung auf langen Seiten und Beiträgen zu verbessern. Dadurch lässt sich ganz einfach zum Start der Seite scrollen.

Hier ist eine praktische Methode, wie Sie dies ohne das Hinzufügen einer benutzerdefinierten CSS-ID zu Ihrem Header machen können. 

Dies funktioniert sowohl mit dem alten standardmäßigen Divi-Header als auch mit dem Theme Builder-Header.

1. Erstellen Sie einen Link mit einer Schaltfläche, einem Text, einem Fußzeilenmenü, einem Blurb oder auf eine andere Weise, die Sie möchten.
2. Fügen Sie die URL #et-boc hinzu.
3. Speichern Sie Ihre Einstellungen und beenden Sie.
4. Jetzt können Sie Ihren Zurück-zum-Anfang-Ankerlink im Frontend anzeigen. Möglicherweise müssen Sie zuerst Ihren Browser-Cache und den Website-Cache leeren.

Fehlerbehebung: 3 Häufige Fehler bei Ankerlinks

Führt Ihr Ankerlink ins Leere? Hier sind einige Fehler, die Sie vermeiden sollten.

Fehler 1: Verwenden der CSS-Klasse anstelle der CSS-ID

Es ist leicht, die Felder CSS-Klasse und CSS-ID zu verwechseln. Verwenden Sie immer das Feld CSS-ID, wenn Sie Ankerlinks erstellen – nicht das Feld CSS-Klasse (dieses wird zum Stylen verwendet). Tatsächlich habe ich diesen Fehler auch schon öfter gemacht!

Fehler 2: Hinzufügen des Hash (#) im Feld CSS-ID

Divi fügt automatisch das führende # hinzu, wenn Sie einer Sektion, Zeile oder einem Modul eine CSS-ID hinzufügen. Sie sollten niemals Ihr eigenes # hinzufügen, wenn Sie eine CSS-ID hinzufügen (Schritt 1). Aber stellen Sie sicher, dass Sie das führende # hinzufügen, wenn Sie Ihre Ankerlinks erstellen (Schritt 2).

Fehler 3: Hinzufügen identischer CSS-IDs auf derselben Seite

Eine CSS-ID muss eindeutig auf einer bestimmten Seite oder einem Beitrag sein. Wenn Sie dieselbe CSS-ID, zum Beispiel „blog“, in zwei verschiedenen Sektionen auf der gleichen Seite setzen, kann der Anker den Besucher nicht gleichzeitig an zwei verschiedene Orte verweisen. Verwenden Sie immer eindeutige CSS-IDs.

Problem beim Scrollen

Sollten Sie beim Klick auf einen Link Probleme beim Scrollen feststellen, dann kann Ihnen das Divi Booster Plugin weiterhelfen. Denn manchmal landet man nicht direkt an der gewünschten Stelle, sondern etwas darüber oder darunter.

Hier das Divi Booster Review lesen.

Fazit

Ich hoffe, Ihnen hat dieser Beitrag gefallen. Wie Sie gelernt haben, können Sie ganz einfach einen Link setzten und zu bestimmten Bereichen springen. Ich verwende dies meistens, um auf das Kontaktformular einer Kontaktseite zu verlinken.