Vielleicht hast du selbst schon einmal auf einen Button oder ein Element (z.B. im Inhaltsverzeichnis oder im Menü in One-Pagern) geklickt und wurdest dann automatisch zu einem anderen Abschnitt auf der gleichen Website gescrollt. Was dort technisch gemacht wurde, nennt sich eine Sprungmarke setzen oder auch einen Anker setzen.

Besonders auf langen Webseiten bietet sich ein Inhaltsverzeichnis an oder ganz unten die Möglichkeit wieder nach oben zum Beginn der Seite zu scrollen.

Auch auf Salespages werden häufig Anker auf den einzelnen Call To Action Buttons gesetzt. Durch Klick auf den Button wird man durch die ganze Seite gescrollt, um zumindest im Schnelldurchlauf zu sehen, welche Informationen auf der Seite noch folgen. Gescrollt wird hier zum letzten Button, der dann auf die Bezahlseite des Produkts führt.

Wie du also sieht können Sprungmarken vielfältig eingesetzt werden und sind wirklich hilfreich. Eine Sprungmarke mit dem Divi Pagebuilder zu setzen ist super einfach und du kannst es im Handumdrehen auf deiner eigenen Website umsetzen.

Zum Abschluss des Artikels gehe ich auch noch einmal kurz darauf ein, wie man Sprungmarken setzen kann, wenn man kein Divi benutzt, sondern entweder einen anderen Pagebuilder oder auch den Gutenberg-Editor nutzt. Außerdem gebe ich einen Tipp für Thrive Architect Nutzer, da dieser Pagebuilder ebenfalls sehr beliebt ist. Wenn du also kein Divi nutzt, scrolle sehr gerne zum Ende des Artikels.

Was ist unser Ziel?

In unserem Beispiel wollen wir auf einen Button klicken und dadurch zu einem unteren Abschnitt gescrollt werden, wo man dann einen Termin zu einem Erstgespräch vereinbaren kann. Der Button ist also das Ausgangselement und der Abschnitt zur Vereinbarung des Erstgesprächs das Zielelement.

Schritt 1: Zielelement bearbeiten

Klicke auf das Bearbeiten-Symbol des Textelements (das schwarze Rädchen) und gehe in den Reiter Erweitert. Dort findest du den Abschnitt CSS-ID und Klassen. Trage in das Feld CSS ID nun ein einmaliges Wort ein. In meinem Beispiel ist das Erstgespraech.

Mit einmalig meine ich, dass du dieses Wort – also diese CSS ID nur einmal für dieses Website-Element verwendest. Du darfst es nicht erneut für andere Elemente nutzen. Warum? Dieses Wort ist der Auslöser für die Aktion „automatisch scrollen“. Wenn du mehrmals das gleiche Wort verwendest, weiß die Webseite nicht, von wo nach wo sie denn jetzt scrollen soll.

Der Unterschied zwischen einer CSS ID und einer Klasse ist nämlich, dass eine ID nur einmal vergeben werden darf, eine CSS Klasse hingegen mehrfach. Mit einer ID setzt du z.B. diese Sprungmarken. Mit einer CSS Klasse legst du z.B. fest, dass alle Elemente, die dieser Klasse zugeordnet werden mit einem blauen Text angezeigt werden. Hierzu ist keine eindeutige Zuordnung notwendig, sie kann mehrfach verwendet werden. 

Sprungmarke setzen CSS ID

Schritt 2: Ausgangselement bearbeiten

Nun scrollen wir zurück nach oben zum Button. Auch hier klicken wir auf das schwarze Rädchen, um das Element zu bearbeiten. Klicke auf den Abschnitt Link und gebe nun das Rautezeichen in Kombination mit deiner CSS ID ein, also in unserem Beispiel #Erstgespraech.

Sprungmarke Link bestimmen

Speichern und Testen

Das ist auch schon alles. Speichere nun das Ganze, verlasse den visuellen Builder und teste noch einmal, ob alles funktioniert.

Im Video zeige ich dir nochmal im Schnelldurchlauf, wie du die Sprungmarke setzen kannst:

Kein Divi?

Wenn du einen anderen Page-Builder nutzt, kannst du im 1. Schritt schauen, ob du auch die CSS-ID für ein Element festlegen kannst. Wenn nicht, ist das auch kein Problem. In meinem Beispiel nutze ich die Überschrift Erstgespräch vereinbaren. Um die Sprungmarke hier zu setzen, gehe ich in die Bearbeitung des Textes (im Text-Builder, nicht dem visuellen) und ändere passe den Code wie folgt an (Leerzeichen bitte entfernen – sie sind nur gesetzt, damit der Code hier als Text angezeigt wird):

< h2 id=“Erstgespraech“ >Erstgespräch vereinbaren< /h2 >

Schon haben wir die ID des Zielelements festgelegt. Wenn das Ausgangselement ein Button ist, kannst du wie bei Divi den Link #Erstgespraech angeben. Willst du Text verlinken machst du es einfach wie folgt:

< a href=“#Erstgespraech“ >Erstgespräch vereinbaren< /a >

Sprungmarken setzen im Thrive Architect

Der Thrive Architect macht die Arbeit mit den IDs im Grunde für dich. Du wählst einen Text aus und klickst oben auf das Link-Symbol. Dort hast du nun die Möglichkeit „JumpLink“ auszuwählen. Thrive bittet dich nun die entsprechende Stelle, zu der gesprungen werden soll, auszuwählen und fertig.

Sprungmarke setzen Thrive Architect

Wenn du noch Fragen zum Thema hast, stelle diese sehr gerne in den Kommentaren.

Cookie Consent Banner von Real Cookie Banner