5 coole Dinge, die Sie in Divi mit Ankerlinks tun können
Veröffentlicht: 2018-10-21Ankerlinks können die Navigation verbessern und helfen, Ihre Inhalte zu organisieren, insbesondere auf einer Website mit langen Inhalten. Einer der anderen Hauptvorteile der Verwendung von Ankerlinks neben der Navigation ist die Tatsache, dass sie für SEO großartig sind. Obwohl das Konzept der Verwendung von Ankerlinks sehr einfach ist, kann es schwierig sein, zu wissen, wo man anfangen soll. Es ist tatsächlich eines der ersten Dinge, nach denen ich gesucht habe, als ich anfing, WordPress-Websites zu entwickeln.
Dieser Artikel zeigt Ihnen 5 coole Dinge, die Sie in Divi mit Ankerlinks tun können. Für diese Beispiele brauchen Sie nur Divi und den Wunsch zu lernen.
Lass uns gehen!
Sie erfahren, wie Sie:
- Scrollen Sie zu und öffnen Sie einen Umschalter mit einem Ankerlink in Divi
- Erstellen Sie ein einseitiges Navigationsmenü
- Von einer anderen Seite zu einem Seitenabschnitt springen
- Verwenden Sie die Divi-Punkt-Navigation
- Fügen Sie Ankerlinks zu Ihren Überschriften hinzu
5 coole Dinge, die Sie in Divi mit Ankerlinks tun können
Abonnieren Sie unseren Youtube-Kanal
Scrollen Sie zu und öffnen Sie einen Umschalter mit einem Ankerlink in Divi
Umschalter sind eines dieser Elemente, die die Benutzererfahrung verbessern können. Nennen Sie mich faul (ich würde das Wort effizient verwenden), aber je einfacher es für mich ist, an meine Informationen zu kommen, desto besser. Ich bin ein großer Fan von Umschaltern für bestimmte Arten von Inhalten.
Eine der besten Anwendungen, die ich für Umschalter gesehen habe, sind FAQ-Seiten. Sie eignen sich hervorragend, um kleine Informationen zu enthüllen, auf die sich der Benutzer konzentrieren möchte. Dies dauert nur eine Minute und ein paar Zeilen JavaScript. Sie können auch eine Variation dieser Methode verwenden, um Tabs oder Akkordeons zu öffnen, und obwohl dies schwierig erscheinen mag, ist es wirklich nicht zu komplex.
Erstellen Sie zunächst eine neue Seite und stellen Sie den Visual Builder bereit. Wählen Sie dann die Option „Wählen Sie ein vorgefertigtes Layout“. Suchen Sie im Popup "Aus Bibliothek laden" das Seitenlayout für Buchhalter-FAQ, indem Sie "faq" in die Suchleiste eingeben. Klicken Sie dann auf das Layout und klicken Sie in der angezeigten Vorschau auf die Schaltfläche Dieses Layout verwenden, um es auf Ihrer Seite bereitzustellen.
Jetzt können Sie Ihre Ankerlink-Funktionalität hinzufügen. In diesem Beispiel verwende ich die Schaltfläche im oberen Header-Abschnitt als Anker-Link, damit die Seite beim Anklicken zu einem bestimmten Schalter scrollt, der gleichzeitig automatisch geöffnet wird.
Öffnen Sie dazu zunächst die Button-Einstellungen und fügen Sie folgende Link-URL für Ihren Button hinzu:
Link-URL der Schaltfläche: #toggle3
Ich habe diesem Ankerlink die ID „toggle3“ gegeben, um mich daran zu erinnern, dass ich auf den dritten Schalter auf der Seite verlinken möchte. Dieser ID-Name korreliert mit der Umschalt-CSS-ID, die wir später hinzufügen werden, damit die Schaltfläche weiß, mit welcher Umschaltfläche gescrollt werden soll.
Als nächstes fügen Sie dem Button-Modul eine eindeutige CSS-Klasse hinzu:
CSS-Klasse: open-toggle
Speichern Sie dann Ihre Einstellungen.
Dieser Klassenname erinnert Sie an die Aktion beim Öffnen des Umschalters, wenn Sie auf die Schaltfläche klicken. Wir werden diese Klasse in unserem benutzerdefinierten Jqeury verwenden, um die gewünschte Funktionalität in Kürze zu erhalten.
Scrollen Sie dann auf der Seite nach unten zu der Zeile, die die beiden Spalten der Umschaltmodule enthält, die für die FAQs verwendet werden. Öffnen Sie in der ersten Spalte die Einstellung des dritten Toggle-Moduls. Dies ist das Modul, zu dem wir scrollen und es öffnen möchten, wenn Sie auf die Schaltfläche (oder den Ankerlink) klicken.
Fügen Sie auf der Registerkarte "Erweitert" die folgende CSS-ID hinzu:
CSS-ID: toggle3
Es ist wichtig, dass diese genau mit der zuvor verwendeten Link-URL der Schaltfläche korreliert. Der einzige Unterschied besteht darin, dass Sie das „#“ weglassen müssen.
Der letzte Schritt besteht darin, dem Hauptteil unserer Seite benutzerdefinierten Code hinzuzufügen. Navigieren Sie dazu zu den Divi-Theme-Optionen, öffnen Sie die Registerkarte Integration und fügen Sie dann Folgendes in den Textabschnitt ein, wie im GIF unten gezeigt.
jQuery(function ($) {
//open toggle on button click
$('a.open-toggle').on('click', function(event){
$('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
});
});
Vergessen Sie nicht, den Code in das richtige script-Tag einzuschließen.
Jetzt können Sie Ihre Seite testen, um zu sehen, ob sie funktioniert.
Um ein wenig zu verstehen, was dieser Code macht. Lasst uns genauer hinschauen. Hier nochmal der Ausschnitt:
jQuery(function ($) {
//open toggle on button click
$('a.open-toggle').on('click', function(event){
$('#toggle3.et_pb_toggle_2 .et_pb_toggle_title').click();
});
});
Im Code bezieht sich der Selektor „a.open-toggle“ auf die Schaltfläche mit unserer benutzerdefinierten Klasse. Der Selektor „#toggle3.et_pb_toggle_2 .et_pb_toggle_title“ verweist auf den Titel des Toggles mit der ID „toggle3“ und der Klasse „et_pb_toggle_2“.
Die Klasse „et_pb_toggle_2“ ist eigentlich die Klasse, die dem dritten Toggle zugeordnet ist. Das liegt daran, dass Divi dem ersten Toggle die Klasse „et-pb_toggle_0“ gibt, dem zweiten Toggle „et-pb_toggle_1“ und so weiter.
Wenn Sie also wissen möchten, was die Klasse für einen bestimmten Schalter auf Ihrer Seite ist, können Sie einfach von 0 beginnend mit dem ersten Schalter auf der Seite zählen und sich nach unten arbeiten. Oder Sie können immer nur den HTML-Code überprüfen, um die Klasse auf diese Weise zu finden.
Dies ist wichtig zu wissen, damit Sie Ihren Code entsprechend aktualisieren können. Wenn ich beispielsweise möchte, dass mein Button den zweiten Schalter auf der Seite öffnet, würde ich „#toggle3.et_pb_toggle_2 .et_pb_toggle_title“ durch „#toggle3.et_pb_toggle_1 .et_pb_toggle_title“ ersetzen.
Dieses Code-Snippet ist eine Variation des folgenden Konzepts. Ich habe versucht, es so einfach wie möglich zu halten.
Diese coole Technik würde auch für Tabs und Akkordeons funktionieren. Der Trick besteht darin, die richtigen CSS-Klassen für das Akkordeonelement oder die Registerkarte zu identifizieren, damit Sie es im Code verwenden können.
Erstellen Sie ein einseitiges Navigationsmenü
Diese Art des Menüdesigns ist für Websites mit einer Seite beliebt. Es kann nützlich sein, Links im Menü zu erstellen, um von Abschnitt zu Abschnitt auf Ihrer Seite zu springen. Dies ist besonders hilfreich, wenn Sie eine einseitige Website oder eine Zielseite erstellen. Weitere Informationen zu diesem Vorgang finden Sie in der Dokumentation zum Erstellen einseitiger Websites mit Divi.
Hier ist eine kurze Übersicht, wie das geht.
Dies funktioniert für jedes vorgefertigte Layout, aber für dieses Beispiel werde ich das Homepage-Layout von Web Freelancer verwenden. Erstellen Sie eine neue Seite, stellen Sie den Visual Builder bereit, wählen Sie „Choose Premade Layout“ und stellen Sie dann das Freelancer-Homepage-Layout auf Ihrer Seite bereit.
Jetzt müssen Sie jedem Abschnitt, zu dem Sie verlinken (oder scrollen) möchten, CSS-IDs hinzufügen. Suchen Sie den Abschnitt mit dem Titel "Meine Dienste". Öffnen Sie die Abschnittseinstellungen, klicken Sie auf die Registerkarte Erweitert und fügen Sie die folgende CSS-ID hinzu:
CSS-ID: Dienste
Suchen Sie als Nächstes den Abschnitt „Featured Work“ und geben Sie diesem Abschnitt eine CSS-ID wie folgt:
CSS-ID: Arbeit
Und fügen Sie auch die folgende CSS-ID zum Abschnitt "Über uns" hinzu:
CSS-ID: über
Wenn diese drei Abschnitte mit ihren eindeutigen CSS-IDs richtig eingerichtet sind, können wir unsere Menüanker-Links erstellen.
Navigieren Sie im Dashboard zu Darstellung > Menüs und erstellen Sie ein neues Hauptmenü . Erstellen Sie dann drei benutzerdefinierte Links mit der folgenden URL und dem Linktext:
Benutzerdefinierter Link 1
URL: #Dienste
Linktext: Dienste
Benutzerdefinierter Link 2
URL: #arbeit
Linktext: Arbeit
Benutzerdefinierter Link 3
URL: #über
Linktext: Über
Vergessen Sie nicht, Ihren Anzeigestandort auf das Hauptmenü einzustellen. Speichern Sie dann Ihr Menü.
Wenn Sie nun Ihre Seite besuchen, können Sie sie ausprobieren. Möglicherweise stellen Sie fest, dass es ein flüssiges Scrollen gibt. Dies liegt daran, dass das Divi-Thema automatisch sanftes Scrollen hinzufügt – diese Funktion wurde in Divi-Version 2.4 hinzugefügt.
Weitere Inspirationen zum Erstellen von Killer-Websites im One-Page-Stil finden Sie in diesen Beiträgen:
- So erstellen Sie eine reaktionsschnelle feste Seitenleiste mit Ankerlinks
- So erstellen Sie Vollbild-Abschnitte mit Top- und Bottom-Scroll-Links mit Divi
- So erstellen Sie aktive Links beim Scrollen für One-Page-Divi-Websites
Von einer anderen Seite zu einem Seitenabschnitt springen
Wir können das Beispiel von oben verwenden, um dies zu demonstrieren. Da wir drei Abschnitten auf der Seite (Dienste, Arbeit, Info) eine CSS-ID hinzugefügt haben, können wir nicht nur über unsere Menüanker-Links zu diesen Abschnitten springen, sondern auch von einer völlig anderen Seite aus zu diesen Abschnitten.
Sie müssen lediglich die URL des Ankerlinks verwenden, wenn Sie einen Link auf einer anderen Seite erstellen. Wenn Sie einen Link zum Abschnitt Dienste mit der ID "Dienste" setzen möchten, würde dieser in etwa so aussehen: www.ihredomain.com/page/#services .
Hier ist ein Beispiel dafür, wie die Seite geladen und zum Abschnitt „Meine Dienste“ gescrollt wird, wenn Sie von einer anderen Seite zu diesem Abschnitt verlinken.
Dies funktioniert hervorragend für viele verschiedene Calls-to-Action (zB mehr erfahren, Divi bekommen, für mich stimmen! usw.), die Sie von verschiedenen Seiten Ihrer Site aus aufrufen möchten.
Verwenden Sie die Divi-Punkt-Navigation
Technisch gesehen sind dies eingebaute Ankerglieder. Sie müssen keine eigenen CSS-Abschnitts-IDs hinzufügen. Die Punktnavigationsfunktion erstellt automatisch Ankerlinks aus Ihren Abschnitten. Um die Punktnavigation für Ihre Seite zu aktivieren, stellen Sie beim Bearbeiten Ihrer Seite einfach die Option Punktnavigation unter den Divi-Seiteneinstellungen oben rechts auf dem Bildschirm auf „EIN“. Sobald Sie die Punktnavigation aktivieren, fügt Divi automatisch ein transparentes Menü an der Seite Ihrer Seite hinzu. Jeder Punkt scrollt beim Anklicken zu den Abschnitten auf Ihrer Seite.
Weitere Informationen finden Sie in einem großartigen Beitrag zum Hinzufügen von Beschriftungen zu Ihrer Punktnavigation.
Fügen Sie Ankerlinks zu Ihren Überschriften hinzu
Das Hinzufügen von Ankerlinks zu Ihren Überschriften ist immer eine gute Idee. Es ist eine großartige Möglichkeit, längere Seiten mit vielen Inhalten zu indizieren, sodass Sie problemlos zu jeder Überschrift innerhalb derselben Seite navigieren oder Links zu diesen Überschriften von anderen Seiten Ihrer Website erstellen können. Es hilft auch Suchmaschinen beim Crawlen Ihrer Website.
Um mit dem Divi Builder eine CSS-ID zu Ihren Kopfzeilen hinzuzufügen, öffnen Sie das Modul, das Ihren Kopfzeilentext enthält. Stellen Sie sicher, dass die Textregisterkarte geöffnet ist. Suchen Sie das Header-Tag (h1, h2, h3 usw.) und geben Sie dann eine ID in die Klammern des beginnenden Header-Tags ein. Hier ist ein Beispiel für eine h3-Überschrift mit der ID „webdesign“:
<h3 id="webdesign">Website Design</h3>
Jetzt kann ich von überall auf diesen Header verlinken, solange ich die richtige Ankerlink-URL verwende. Was für dieses Beispiel ungefähr so aussehen sollte:
www.ihredomain.com/page/#webdesign
Dies ist auch für Seiten oder Beiträge nützlich, die den Divi-Builder nicht verwenden. Um Ankerlinks zu Ihren Überschriften für diese Seiten oder Beiträge hinzuzufügen, öffnen Sie die Registerkarte Text im WordPress-Texteditor. Suchen Sie einfach die Überschrift Ihrer Wahl und fügen Sie die ID in das Überschriften-Tag ein, wie unten gezeigt.
Genau das habe ich für diesen Beitrag getan. Die Abschnittslinks oben in diesem Beitrag dienen als schönes Inhaltsverzeichnis, das auf die verschiedenen Überschriften des Beitrags verweist.
Ziemlich cooles Zeug.
Einpacken
Ankerlinks haben ein paar tolle praktische Anwendungen, aber gehen Sie nicht zu verrückt damit, denn Sie müssen immer zuerst Ihr Publikum und Ihre Ziele berücksichtigen. Denken Sie daran, dass es bei gutem Design um Benutzerfreundlichkeit und Funktion geht, daher können Ankerlinks in einigen Fällen sehr hilfreich sein. Aber in anderen bedeutet es nur, dass Benutzer über die Parallax-Abschnitte hin und her zappen und sich am Ende verirren. Hoffentlich konnten Sie aus diesem Beitrag einige nützliche Tipps entnehmen.
Haben Sie Tipps oder Fragen zu Ankerlinks? Teilen Sie uns Ihre Erfahrungen im Kommentarbereich unten mit.