Divi Anker

Divi: Anker / Sprungmarke Link setzen

Ein Anker wird auch als Sprungmarke bezeichnet. Ankerlinks werden verwendet, um direkt zu einem bestimmten Textabschnitt zu „springen“.

Hier sind drei Beispiele für die Einsatzmöglichkeiten von Ankerlinks:

  1. One-Page-Seite: Hier wird das Menü über Ankerlinks realisiert. Zum Beispiel: „Home“, „Angebot“, „Über mich“, „Kontakt“. Beim Klicken auf diese Links springt die Seite sofort zum entsprechenden Abschnitt.
  2. Verkaufsseite: Ein „Kaufen“-Button kann mit einem Ankerlink versehen werden, der den Nutzer direkt weiter nach unten zum Verkaufsformular führt. So gelangen Interessenten schnell zum Abschluss des Kaufvorgangs.
  3. Inhaltsverzeichnis auf einer langen Seite: Wenn eine Seite einen langen Text enthält, kann ein übersichtliches Inhaltsverzeichnis mit Ankerlinks erstellt werden. Nutzer können dann auf die gewünschten Abschnitte direkt zugreifen, indem sie auf die entsprechenden Einträge im Inhaltsverzeichnis klicken.

Gerne zeige ich dir, wie du dies mit Divi* umsetzen kannst.

Einen Anker setzen / definieren

Als Erstes musst du einen Anker setzen bzw. definieren, da das System sonst nicht erkennt, wohin du verlinken möchtest. Durch das Setzen des Ankers bestimmst du das Ziel deines Links.

Bei Divi* hast du die Möglichkeit, Anker auf der Ebene von Sektionen, Zeilen oder Modulen zu setzen. In den meisten Fällen empfehle ich, den Anker auf der Sektionsebene zu setzen.

Um einen Anker zu setzen, öffnest du die Einstellungen der Sektion, gehst auf „Erweitert“ und trägst den Namen deines Ankers in das Feld „CSS-ID“ ein. Danach speicherst du die Einstellungen, und der Anker ist gesetzt.

Tipp für die Anker-Namen:

Oftmals werde ich gefragt, wie der Anker benannt werden soll. Grundsätzlich spielt es absolut keine Rolle, wie du den Anker benennst. Dennoch empfehle ich, wenn du auf deiner Website viele Anker verwenden möchtest, ein System zu erstellen.

Z.B. anker-kontakt-1, anker-ueber-1 usw.

Achte darauf, nur Kleinbuchstaben zu verwenden, zudem keine Leerzeichen und keine Umlaute.

anker divi 1

Nun haben wir im obigen Beispiel den Anker mit dem Namen „anker1“ gesetzt.

Jetzt können wir diesen Anker verwenden und darauf verlinken.

Anker innerhalb der gleichen Seite setzen

Nun setzen wir einen Anker innerhalb derselben Seite.

Hier ist ein Beispiel: Durch Klicken auf den Text „dieser Anker“ gelangst du direkt zur Newsletter-Anmeldung ganz unten auf dieser Seite.

Das Setzen eines Ankers ist sehr einfach.

Du markierst einfach den gewünschten Text und fügst einen Link hinzu. Beim Link fügst du den Anker-Namen mit einem # ein. Zum Beispiel: #anker1.

Oder du fügst als Link einfach „#anker1“ bei einem Button / Taste ein. Dies funktioniert überall. Setze beim Link immer ein „#“ und den Anker-Namen. Das ist der ganze Trick 🙂 Absolut einfach!

Anker auf eine andere Seite setzen

Selbstverständlich kannst du auch einen Anker zu einer anderen Seite verlinken.

Hier ist ein Beispiel: Durch Klicken auf den Text „dieser Anker“ gelangst du zur Seite „Jahreszahl für Copyright-Angabe im Footer automatisch aktualisieren (Divi)“ und direkt zum Textabschnitt „Copyright automatisch bei Divi anpassen“.

Der Link sieht nun so aus:
https://www.lichtweb.ch/jahreszahl-copyright-footer-aktualisieren/#anker-automatisch

Du setzt den Link normal auf die gewünschte Seite und erweiterst ihn dann mit deinem Anker, beispielsweise #anker1 oder hier im Beispiel #anker-automatisch.

Anker im Menü

Auch im Menü kannst du Ankerlinks erstellen. Diese Möglichkeit wird sehr oft bei One-Page-Seiten verwendet.

Das Vorgehen ist ähnlich wie im zweiten Beispiel „Anker auf eine andere Seite setzen“. Du benötigst den vollständigen Link, einschliesslich des Ankers.

https://www.lichtweb.ch/jahreszahl-copyright-footer-aktualisieren/#anker-automatisch

Diesen Link fügst du nun im Menü als individuellen Link ein.

Anker können wirklich sehr nützlich sein und das Nutzerverhalten auf deiner Website verbessern. Probiere es doch einfach mal aus!

Viel Erfolg beim Umsetzen…

…und denke immer daran: Du kannst online wirken und bewirken!

Lieber Gruss

Karin

Mach deine Website topfit für Google!

Deine Website verstaubt im Internet?

Möchtest du endlich (mehr) Kunden über deine Website gewinnen, aber das ganze technische SEO-Zeug scheint dir zu kompliziert oder einfach uninteressant?

Dann ist dieser Workshop genau das Richtige für dich!

Ich zeige dir einfache und verständliche Methoden, um deine Website so zu optimieren, dass sie bei Google besser gefunden wird.

SEO Workshop

Affiliate/Werbelinks

In meinem Artikel verwende ich Affiliate-Links. Wenn du auf einen solchen Link klickst und darüber einen Kauf tätigst, erhalte ich eine Provision vom Anbieter. Für dich ändert sich dadurch weder das Angebot noch der Preis. Damit unterstützt du meine Arbeit bei der Erstellung kostenloser Anleitungen und Blogartikel.

17 Kommentare

  1. Hallo Karin,

    seit einiger Zeit springen die Navigations-Links einiger von mir gestalteter Onepage-Seiten (bei der ersten Darstellung im Browser) nicht mehr direkt, sondern nur in mehreren Etappen zum richtigen Anker des Sektionsabschnittes.
    Beispielseite: https://frohmut-anemone.de/
    Bitte nach dem ersten Laden auf „Über mich“ klicken.

    Gibt es da vielleicht eine Lösung?

    Viele Grüße und Danke im Voraus
    Hartmut

    Antworten
    • Hallo Hartmut

      Danke Dir. Leider läd Deine Beispiel Website zur Zeit überhaupt nicht. Grundsätzlich biete ich aber auch keinen Support via Kommentarfunktion. Gerne kannst Du mir aber via Mail karin@lichtweb.ch eine Support Anfrage zusenden.

      Danke und lieber Gruss
      Karin

  2. Hallo Karin,
    sehr gut erklärt. Das war genau das, was ich gesucht habe.
    Vielen lieben Dank.
    Schöne Grüße
    Brigitte

    Antworten
  3. Hallo Karin,
    mein Problem ist, dass die individuellen Links per Anker im Menü immer highlighted sind. Hast Du einen Tip wie ich das abstelle.

    Vielen Dank, gruss Frank

    Antworten
    • Hallo Frank

      Dies ist im Normalfall einfach ein CSS Code, welcher geändert werden muss. Aber ohne Link zur Beispielseite kann ich Dir dies unmöglich genauer beantworten. Sorry!

      Lieber Gruss
      Karin

  4. Super erklärt und genau das, was ich gesucht habe und bei dir gefunden habe. Danke!

    Antworten
  5. Hallo,
    auch erstmal herzlichen Dank für den sehr übersichtlichen und klaren Beitrag.
    Ich fürchte, ich habe einen Fehler gemacht. Ich habe zu viele Anker gesetzt, und scheinbar alle ähnlich oder gleich genannt. Also springt es bei mir immer zu einer anderen Stelle. Nun will ich die Anker löschen und richtig setzen, weiß aber nicht, wie ich zielgerichtet die Anker finde bzw. sehe. Ich kann schwer meine Seite Wort für Wort untersuchen.
    Gibt es eine Möglichkeit, mit einem Blick die Anker einer Sektion oder Zeile zu sehen?
    Danke schon mal im voraus
    Mónica Perne

    Antworten
    • Hallo Mónica
      Herzlichen Dank für Deine Nachricht.

      Dies ist nicht ganz so einfach zu finden, aber auch nicht zum Erklären. Im Code werden Anker als id ausgewiesen. Also z.B. id=“anker-1″. Diese id werden aber auch für andere Dinge verwendet. Daher findest Du id’s für Anker, aber auch z.B. für CSS Einstellungen.

      Mir fällt hier zur Zeit leider nur Handarbeit ein. Entweder Sektionen, Zeilen und Module durchforsten nach den CSS-ID = Ankernamen.

      Oder Du suchst via Quellcode nach id=“ und suchst so alle Anker heraus.

      Ich würde es sogar kombinieren. Zuerst alle Sektionen ect. duchforsten und ändern und danach via Quellcode kontrollieren, ob ich alle Ankernamen gefunden habe 🙂

      Links kannst Du aber mit diversen Erweiterungen z.B. die Chrome Erweiterung „Check my Links“ prüfen. Aber halt nur den Link selber, nicht den Ankernamen.

      Pass auf mit dem ß in Ankernamen. Ich bin mir nicht sicher, aber ich könnte mir vorstellen, dass dies teilweise zu Problemen führen könnte.

      Lieber Gruss
      Karin

  6. hallo karin,
    darf ich dich um einen tipp bitten? ich arbeite erst seit kurzem mit wp/divi und scheitere immer wieder daran, dass die ankerziele nicht korrekt erreicht werden. die links sind in der css der sektion drin, die seite springt jedoch immer ein stück weiter nach unten in den ersten teil des lauftextes, statt die überschrift und den gesamten text zu zeigen. hast du eine idee, was ich falsch mache? es sieht so aus, als springt der link erst zum ziel und rutscht dann einfach ein stück weiter nach unten.
    ganz herzlichen dank & liebe grüße

    Antworten
    • Hallo Alexandra

      Oftmals hat dies mit einer fixierten Navigationsleiste zu tun oder auch mit der Admin Bar von WordPress. Sprich etwas was oben fixiert ist. Dann kommt es zu Verschiebungen.
      Wenn Du dann den Ankern (nicht dem Anker-Link) eine CSS Klasse zuweist, kannst Du via CSS mit margin-top einen Abstand hinzufügen (in der Grösse der fixierten Navigationsleiste).

      Hilft Dir dies so weiter?

      Lieber Gruss
      Karin

  7. Liebe Karin,

    vielen Dank für den Beitrag. Du hast mir damit sehr geholfen.

    LG von Sandra

    Antworten
    • Vielen Dank Sandra. Freut mich, dass ich Dir helfen konnte.

      Viel Erfolg und Freude mit Deinem Projekt!

      Lieber Gruss
      Karin

  8. Hallo Karin, danke für den wirklich verständlich geschriebenen Artikel. Ich suche nach einer Möglichkeit , wie ich z.B. durch das anklicken eines Bildes erreiche, dass sich auf der gleichen Seite ein ergänzender Abschnitt mit z.B. Bild und Text öffnet. So dass sich diese neue Information quasi dazwischen drängelt, zusätzlich sichtbar wird. Finde ich da die Lösung auch über Anker? Gesehen bei http://www.fernsichten.de. da wird mein Anliegen vielleicht deutlicher. Das ist kein klassischer Anker zu Inhalt, der sonst durch viel scrollen auch sichtbar wäre. Ich weiss einfach nicht, wonach ich da suchen kann… Danke + Gruss Friedrich

    Antworten
    • Hallo Friedrich

      Dies ist mit einem Anker auf jeden Fall nicht lösbar. So wie ich dies sehe, ist dies bei fernsichten.de speziell programmiert. Ist ein bisschen etwas zwischen Feature-Boxen/Flip Boxen und einem Tab Modul. Bei fernsichten.de wurde mit einem Portfolio Modul gearbeitet. Vielleicht findest du unter diesen Begriffen etwas, was Dir entspricht.

      Ob es hier fertige Lösungen / Plugins gibt weiss ich leider auch nicht.

      Lieber Gruss
      Karin

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Vielleicht interessiert dich auch…

PrivacyBee Anleitung (WordPress + Divi)

PrivacyBee Anleitung (WordPress + Divi)

PrivacyBee bietet in meinen Augen eine einfache und sympathische Möglichkeit, eine Datenschutzerklärung für das neue Schweizer Datenschutzgesetz zu erstellen. Gerne stelle ich dir hier eine Anleitung zur Verfügung, wie du die Datenschutzerklärung erstellen und in...

Bilder pixelgenau zuschneiden

Bilder pixelgenau zuschneiden

Wohl jeder, der an einer Website arbeitet, steht früher oder später vor dem Problem "wie schneide ich ein Bild/Foto pixelgenau zu". Damit dies auch einfach und schnell geht, empfehle ich jeweils Adobe Photoshop (Elements) oder den kostenlosen Online Dienst Pixlr...

Terminbuchung: Meine 3 besten Empfehlungen 2024

Terminbuchung: Meine 3 besten Empfehlungen 2024

Auf immer mehr Websiten werden online Terminbuchungen angeboten. Lange suchte ich nach überzeugende Lösungen. Meine 3 Favoriten stelle ich Dir hier gerne vor.Amelia Wirklich lange suchte ich nach einer passenden Lösung. Amelia hat mich direkt überzeugt. WordPress...

Newsletter Software: Meine 3 besten Empfehlungen 2023

Newsletter Software: Meine 3 besten Empfehlungen 2023

E-Mail-Marketing ist eine sehr gute und effektive Methode um interessierte Personen zu informieren. Dabei gibt es unzählige Newsletter Anbieter und auch WordPress Plugins für den Versand von Newslettern. Hier den richtigen Anbieter zu finden kann sehr zeitaufwändig...

WP Rocket – Macht Deine WordPress Seite schneller

WP Rocket – Macht Deine WordPress Seite schneller

WP Rocket ist wohl das einfachste und beste Cache Plugin für Deine WordPress Website. Nichts nervt mehr als ewig laaaaaangsam ladende Websiten. Dies ist schlecht für Deine Websitenbesucher, für Dein Google Ranking und deshalb auch für Dein Portemonnaie. Die...

WordPress: Änderungen rückgängig machen / Revisionen verwenden

WordPress: Änderungen rückgängig machen / Revisionen verwenden

Du kennst sicher folgendes Problem: Du änderst eine Inhaltsseite und einen Tag später bemerkst Du, dass die alte Version besser gewesen wäre. Oder Du bearbeitest einen Beitrag, speicherst und aus unerklärlichen Gründen ist der Inhalt verschoben, verändert oder ganz...