Mit dem Divi Theme Anker zu setzen ist easy. Ich erkläre dir, wie du das in wenigen Minuten hinbekommst. Im ersten Teil erkläre ich, wie du deinen Besucher mit einem Anker zu einem bestimmten Bereich einer zweiten Seite springen lassen kannst. Im zweiten Teil geht es darum, einen Anker zu setzen, der an eine Stelle auf der gleichen Seite deiner Website verweist.

Anker – oder auch Sprungmarken – sind für die Nutzerführung nicht ganz unwichtig. Denn sie können die sogenannte Usability bzw. Nutzerführung fluffiger gestalten, sodass deine Besucher sich optimal zurechtfinden.

Für dich und dein Business ist es natürlich auch schick, wenn du deinen Besucher nicht immer einfach auf eine andere Seite schickst – sondern genau bestimmen kannst, wohin genau. Denn ohne Anker landet dein Besucher immer automatisch ganz oben auf der Seite, die du verlinkst hast. Das kann genug sein, muss es aber nicht immer.

Fangen wir gleich an.

Divi Anker auf eine zweite Seite deiner Webseite setzen

Ganz grundsätzlich sagst du dem Divi Theme immer zuerst, wohin der Besucher am Ende denn springen soll. Hier im Beispiel möchte ich, dass der Besucher von einem Button auf der Startseite nicht einfach nur auf die Kontaktseite geschickt wird. Statt dessen möchte ich, dass er direkt bei dem Kontaktformular auf dieser Seite landet, was sich einige Zentimeter weiter unten befindet:

Hier setze ich jetzt also einen Anker zu dem Kontaktformular. Du kannst mit Divi immer Anker sowohl in Abschnitte als auch Zeilen sowie Module setzen. Letzteres macht aus meiner Erfahrung meistens wenig Sinn. Am häufigsten setze ich den Anker in die Zeile ein, so jetzt auch hier im Beispiel.

Als nächstes führst du jetzt folgende simple Schritte aus:

1. über das Zahnrädchen in die Zeileneinstellungen gehen (oder eben in den Abschnitt oder das Modul, wo der Besucher hinspringen soll)
2. auf den Reiter „erweitert“ wechseln
3. dort eine CSS ID vergeben – es ist egal, was du dort einträgst, du solltest es dir nur merken können 🙃. Und wichtig: bitte verwende nur Kleinbuchstaben und keine Sonder- oder Leerzeichen.

Ta-daa – dein Anker sitzt schonmal 🙌🏻. Jetzt gehst du an die Stelle, von dort aus du dorthin verlinken möchtest. In meinem Beispiel möchte ich von der Startseite aus von einem Button direkt zu dem Kontaktformular verlinken. Daher gehe ich jetzt im nächsten Schritt direkt dorthin.

Wie angesprochen gehe ich also nun auf die Startseite und dann direkt zu dem angesprochenen Button. Hier mache ich nun diese beiden Dinge:

1. In die Moduleinstellungen des Buttons gehen über das Zahnrädchen (Anmerkung: die Module sind immer die Grauen 😉 )
2. Dort nun den Linkbereich aufklappen und dort folgendes eingeben:a) die komplette URL der Seite, auf die du verlinken möchtest (kannst du natürlich auch rein kopieren…) inklusive https:// und dem ganzen Summs.
   b) hinter der URL sollte ein Trailingslash sein (das ist das hier: / ), ansonsten ergänze bitte noch einen. Dahinter platzierst du jetzt einen Hashtag # und hinter dem Hashtag ergänzt du einfach die CSS ID, die du eben vergeben hast – in genau der gleichen Schreibweise (also nur mit Kleinbuchstaben 🙃) und möglichst ohne Tippfehler 😅.
   Mein Ankerlink im Beispiel ist nun: https://zoe.digitalbohemienne.de/#kontaktformular

Nochmal ta-daa: fertig ist dein Ankerlink.

Wie immer bestätigst du die Änderungen in dem Modul natürlich mit dem grünen Häkchen und speicherst anschließen die Änderungen auf der Seite nochmal mit dem türkisen Button ab. Du kannst jetzt den Divi Builder verlassen und mal auf den Button klicken. Sofern du dich nicht vertippt hast, wirst du bei Klick auf den Button nun direkt zum Kontaktformular (zumindest in meinem Beispiel 😉)  hüpfen.

Divi Anker setzen auf der gleichen Seite

Mit Divi Anker auf der gleichen Seite zu setzen ist sogar noch einfacher. Angenommen, du hast eine sehr lange Seite erstellt und möchtest an verschiedenen Stellen die Möglichkeit geben, weiter runter auf die Seite zu hüpfen. Das kann zum Beispiel auf deiner Landingpage der Fall sein, wo du an mehrere Stellen eine „Abkürzung“ zur Anmeldung einbauen kannst. Kann ja schließlich sein, dass dein Besucher schon nach der Hälfte der Landingpage überzeugt ist und buchen möchte, oder ✌?

Jedenfalls gehst du hier natürlich wieder zuerst an die Stelle, an die du den Anker setzen möchtest. Entscheide dich wieder zwischen Zeile und Abschnitt und öffne die Einstellungen über das Zahnrädchen. Dann wechsle wieder in den Reiter „erweitert“ und vergib eine CSS ID, die du dir merken kannst (nur Kleinbuchstaben, kein Chi-chi).

Gehe anschließend zu dem Modul (meist eben ein Button), von wo aus der Besucher zu der gerade markierten Stelle springen soll. Öffne die Moduleinstellungen über das Zahnrädchen, klapp wieder den „Link“bereich aus. Dort musst du nun ausschließlich einen Hashtag # und dahinter die CSS ID, die du vor ein paar Sekunden vergeben hast, eintragen. In meinem Beispiel trage ich bei Link z.B. #kundenstimme ein. Speichern und fertig!

Wenn du jetzt den Divi Builder verlässt, kannst du prüfen, ob der Anker richtig gesetzt ist, indem du einfach auf den Button (oder eben das Modul) klickst, wo du den Ankerlink eingesetzt hast.

Divi Anker funktionieren nicht

Sollte dein Divi Anker nicht funktionieren, prüfe bitte nochmal:

• hast du einen Tippfehler in der URL?
• besteht deine CSS ID nur aus Kleinbuchstaben ohne Sonderzeichen oder Leerzeichen?
• hast du in der URL einen Trailingslash vor dem Hashtag?
• falls du den Anker auf eine zweite Seite setzen möchtest: hast du die komplette URL eingegeben? Dein Ankerlink sollte jetzt etwa so aussehen: https://deineurl.de/#deinecssid

Wenn du all das richtig gemacht hast, gibt es keinen logischen Grund, wieso dein Divi Anker nicht funktionieren sollte! ????

Divi Anker setzen als Video Tutorial

Hast du Fragen zum Anker setzen mit dem Divi Theme? Schreib sie mir in die Kommentare!