Ankerlinks in Wordpress hinzufügen [2024] 💥
Ankerlinks sind Links, die einen Besucher von einem Ort zum anderen auf derselben Seite oder zu einem genauen Ort auf einer anderen Seite derselben Website leiten. Ankerlinks können Ihnen helfen, Ihre Besucher genau an die richtige Stelle auf Ihrer Website zu leiten. Ankerlinks können auch die Benutzererfahrung verbessern und Ihnen sogar einen SEO-Vorteil verschaffen.
Anzeige
Die meisten Ankerlinks verweisen also von einem Menü auf einen Abschnitt auf der Seite. Der Anker wird daher normalerweise in einer Überschrift oder Reihe oder einem beliebigen Block platziert. Anchor-Links können überall auf der Seite gefunden werden, genau wie normale Links. Denken Sie an Menülinks, normale Textlinks oder Schaltflächen.
1. Ankerlinks in Wordpress mit Gutenberg hinzufügen
In diesem Beispiel verlinken wir von einem Textstück in einem Absatz zu einer Überschrift. Beginnen wir mit dem Anker in der Überschrift. Erstelle einfach mit dem Gutenberg-Editor in einem Beitrag eine neue Überschrift und gib ihr einen Namen. Rechts gibt es eine Spalte mit Dingen, die diesen Header betreffen. Klicken Sie auf „Erweitert“ und ein neuer Abschnitt öffnet sich. Hier finden Sie "HTML-Anker" mit bereits einem Anker-Text in der Box. Sie können den Text ersetzen oder einfach als Ankertext verwenden, um auf diese Überschrift zu verlinken. Kopieren Sie diesen Text, wir fügen ihn mit einem "#" voran in den Link des Textstücks im Absatz ein.
In Ordnung, jetzt wollen wir von einem Link in einem Text auf einer zufälligen Seite auf den Anker verlinken. Erstellen Sie einfach einen Absatz in Gutenberg, schreiben Sie einen Text. Markieren Sie dann eines der Wörter und klicken Sie auf das Link-Symbol. Wo der Link hingeht, fügen Sie den Text aus dem Anker, den wir zuvor erstellt haben, mit einem "#" voran, wie diese "#h-test-heading". Siehe Screenshot unten.
In Gutenberg haben alle Blöcke die Möglichkeit, ihnen einen Anker in der rechten Spalte im Abschnitt "Erweitert" zu geben, nicht nur die Überschriften. Alle Blöcke haben auch die Option „Als HTML bearbeiten“, wenn Sie auf die 3 Punkte klicken, wie im Screenshot unten. Dort müssen Sie Ihren Anker zum ID-Attribut dieses Tags hinzufügen. Zum Beispiel der folgende Code:
<p id="h-test-heading2">2. Anker in Wordpress mit DiviBuilder hinzufügen
The Divi Builder ist der beste Seitenersteller da draußen, also fangen wir damit an. Lassen Sie uns zuerst den Anker machen. In Divi können Sie dies tun, indem Sie die ID des Ankers für einen Abschnitt, eine Zeile oder ein Modul eingeben. Der Ankername ist die ID. Im Screenshot unten verwende ich eine Reihe, um den Anker anzubringen. Gehen Sie zu "Zeileneinstellungen" und dann zur Registerkarte "Erweitert".
Geben Sie im Feld CSS-ID die Anker-ID ein.
Die Anchor-ID "#h-test-heading" kann jetzt überall auf der Website verwendet werden, z. B. in den Menüs, Schaltflächen oder einfach nur im Text in den Absätzen. Verwenden Sie einfach "#h-test-heading" anstelle eines internen oder externen Links. Natürlich kann "#h-test-heading" durch beliebige Wörter Ihrer Wahl ersetzt werden.
3. Anker in Wordpress mit Elementor hinzufügen
Öffnen Sie eine beliebige Seite oder einen beliebigen Beitrag mit Elementor Page Builder, klicken Sie auf „Mit Elementor bearbeiten“. Suchen Sie auf der nächsten Seite in der linken Seitenleiste im Suchfeld nach „Anker“. Sie sehen nun das „Menü-Anker-Widget“. Ziehen Sie das Widget einfach an eine beliebige Stelle auf der Seite, an der Sie einen Anker zum Verlinken erstellen möchten. Siehe Screenshot unten.
Geben Sie in "die ID des Menu Anchor" den Ankertext Ihrer Wahl ein und speichern Sie.
Die Anchor-ID "#h-test-heading" kann jetzt überall auf der Website verwendet werden, z. B. in den Menüs, Schaltflächen oder einfach nur im Text in den Absätzen. Verwenden Sie einfach "#h-test-heading" anstelle eines internen oder externen Links. Natürlich kann "#h-test-heading" durch beliebige Wörter Ihrer Wahl ersetzt werden.
4. Anker in Wordpress mit WP-Bakery Pagebuilder hinzufügen
WPBakery Page Builder ermöglicht es uns, einen ID-Wert für jede Zeile einzugeben/ gewünschte Spalte/Widget/Element (über die Felder Zeilen-ID und Element-ID). Dies ist äußerst nützlich, da wir a) unsere ID-Ziele nicht manuell erstellen müssen und b) es das Hervorheben von Links viel einfacher und präziser macht. Um eine Ziel-ID hinzuzufügen, bearbeiten Sie die Zeile/Spalte/das Element des Seitenerstellers, das Sie bearbeiten möchten (indem Sie auf das Stiftsymbol klicken). In den Feldern Zeilen-ID und Element-ID (im Reiter „Allgemein“) können Sie den gewünschten ID-Wert (z. B. h-Test-Überschrift) eingeben. Siehe Screenshots unten.
Die Anchor-ID "#h-test-heading" kann jetzt überall auf der Website verwendet werden, z. B. in den Menüs, Schaltflächen oder einfach nur im Text in den Absätzen. Verwenden Sie einfach "#h-test-heading" anstelle eines internen oder externen Links. Natürlich kann "#h-test-heading" durch beliebige Wörter Ihrer Wahl ersetzt werden.
Funktionieren Ihre Ankerlinks nicht richtig?
Es gibt mehrere häufige Fehler, die Menschen machen, wenn Ankerlinks nicht mehr funktionieren. Dies sind die Schritte, um sicherzustellen, dass Ihre Ankerlinks ordnungsgemäß funktionieren.
- Verwenden Sie eine CSS-ID, keine CSS-Klasse.
- Stellen Sie sicher, dass dem Text der Schaltfläche oder des Ankerlinks ein # vorangestellt ist
- Stellen Sie sicher, dass der CSS-ID-Anker kein # enthält
- Sie müssen sicherstellen, dass jeder Ankerlink eine eindeutige CSS-ID hat
Tipp: Erweitern Sie Ihre Ankerlinks um reibungsloses Scrollen
Das Plug-in "Page Scroll to ID" ist voll funktionsfähig Plug-in, das das „Springen“ des Browsers durch flüssige Scroll-Animationen ersetzt, wenn auf Links mit href-Werten geklickt wird, die # enthalten. Es bietet alle wichtigen Tools und erweiterten Funktionen, die für Single-Page-Websites benötigt werden.
Anzeige