Möchten Sie eine Breadcrumb-Spur – Breadcrumbs – zu einer Website hinzufügen Elementor ?

Wir alle kennen das Märchen von Hänsel und Gretel, oder? Zwei verlorene Geschwister, die früher eine Spur mit Brotstücken hinterließen, um ihrem Weg nach Hause zu folgen.

Das Konzept der Website-Breadcrumbs ist ziemlich gleich. Der Breadcrumb zeigt den Besuchern im Grunde ihren Fußabdruck auf der Website und sagt Ihren Besuchern, wo sie sich befinden. Mit Breadcrumbs können Besucher zu ihrem Standort auf der Website navigieren, wo sie zu ihrem zurückgelegten Weg zurückkehren können. Kurz gesagt, es funktioniert wie ein Browser, der die Website verbessert die Benutzererfahrung.

In diesem Artikel erfahren Sie mehr über das Breadcrumb, während wir das Widget besprechen Elementor Paniermehl, warum und wie man es benutzt.

Was sind Breadcrumbs auf einer Website?

Ariadnes Thread vonElementor ist ein kleiner Textpfad, der wie ein virtueller Kompass für Websites funktioniert. Mit diesem sekundären Navigationssystem können Besucher zu Seiten zurückkehren, die sie durchsucht haben.

Breadcrumbs – Breadcrumbs – zu einer Elementor-Website hinzufügen

Sie besuchen beispielsweise einen Online-Shop, um einen Kopfhörer zu kaufen, sagen wir einen iPod. Sie gelangen daher auf die Startseite, dann auf die Zubehörseite und schließlich auf die Produktseite. In diesem Fall sieht der Breadcrumb wie folgt aus: Startseite> Zubehör > Kopfhörer > iPod.

Es zeigt den Pfad an, den Sie zur Seite zurückgelegt haben. Und jeder Teil davon ist anklickbar. Wenn Sie beispielsweise zurück zur Zubehörseite möchten, klicken Sie einfach im Breadcrumb auf „Zubehör“. Und Sie werden auf die Seite gehen.

Was bietet das Breadcrumb-Widget von Elementor?

Elementor Website Builder macht es super einfach, Breadcrumbs zu Ihrer WordPress-Website hinzuzufügen. Sie müssen das Widget nur per Drag & Drop verschieben und konfigurieren. Es gibt einige erstaunliche Funktionen, die dieses Widget bietet.

Es sind dies:

  • Anpassbare Breadcrumb-Stile.
  • Anpassung von Typografie, Farbe und mehr.
  • Die Möglichkeit, individuelle benutzerdefinierte Symbole für die Homepage und andere Seiten hinzuzufügen.
  • Die Wahl des Trennzeichenstils für den Text oder das Symbol

So verwenden Sie Breadcrumb mit Elementor Pro

Das Elementor-Breadcrumb-Widget arbeitet mit dem Yoast SEO-Plugin. Sie müssen also zuerst das Yoast-Plugin installieren und dann Breadcrumbs auf Ihrer Webseite erstellen.

Schritt 1: Installieren Sie das Yoast SEO-Plugin

Zugang zu Plugins aus Ihrem WordPress-Dashboard und klicken Sie dann auf die Schaltfläche Hinzufügen. Suchen Sie als Nächstes nach Yoast und klicken Sie auf die Schaltfläche Installieren. Aktivieren Sie nach der Installation das Plugin.

Entdecken Sie unseren Guide auf Wie installiere ich ein WordPress Plugin?

Schritt 2: Konfigurieren Sie Breadcrumb in den Yoast-Einstellungen

Nachdem Sie das Plugin installiert und aktiviert haben, gehen Sie zu  SEO >> SEO-Einstellungen. Wechseln Sie dann zu " Paniermehlspur und aktivieren Sie das Breadcrumb und ändern Sie seine Einstellung.

Breadcrumbs – Breadcrumbs – zu einer Elementor-Website hinzufügen

Schritt 3: Fügen Sie der Webseite Breadcrumbs hinzu

Nachdem Sie die Breadcrumb-Einstellungen aktiviert haben, gehen Sie zu der Seite, auf der Sie das Breadcrumb hinzufügen möchten, und öffnen Sie die Seite mit Elementor. Ziehen Sie das Widget dann per Drag & Drop in den Editor von Elementor

Breadcrumbs – Breadcrumbs – zu einer Elementor-Website hinzufügen

Im Breadcrumb-Widget-Panel können Sie es einstellen Ausrichtung und wähle die HTML-Tag in Semmelbrösel.

Auf der Registerkarte Breadcrumb-Stil können Sie diesen festlegen Typografieund dann Textfarbe. Sie haben auch die Möglichkeit, individuelle Farben für die Breadcrumb-Zustände Normal und Hover festzulegen.

Breadcrumbs – Breadcrumbs – zu einer Elementor-Website hinzufügen

Klicken Sie jetzt auf die Schaltfläche „Veröffentlichen“ oder „Aktualisieren“, um Ihre Änderungen zu übernehmen.

Warum Breadcrumb von Elementor auf Ihrer Website verwenden?

Die Breadcrumb-Funktion von Elementor hilft Ihnen dabei, Benutzern mitzuteilen, wo sie sich befinden. Der Breadcrumb Trail ist ein wesentliches Werkzeug zur Verbesserung die Benutzererfahrung Ihrer Website und Suchmaschinenoptimierung.

Die Breadcrumb-Navigation hat viele Vorteile.

SEO : Sie wissen vielleicht, dass Besucher Breadcrumbs mögen, aber Google tut es auch. Google kann sie in den Suchergebnissen verwenden und macht Ihr Ergebnis für die Nutzer viel attraktiver. Auch die in einem Breadcrumb verwendeten Wörter können die sein Stichwort Ziele Ihrer Website.

Siehe auch: So fügen Sie Ihrem Formular reCAPTCHA hinzu

Breadcrumb verbessert die UX: Menschen hassen es, verloren zu sein. Sie müssen die Besucher bei Laune halten und die Reibung so weit wie möglich reduzieren. Dies kann Ihre Benutzererfahrung verbessern, da es sich um ein gemeinsames Element der Benutzeroberfläche handelt, das den Menschen sofort einen Ausweg zeigt.

Niedrigere Absprungraten : Kaum jemand greift über die Startseite auf eine Website zu. Es dreht sich alles um die organische Suche. Das bedeutet, dass jeder Teil Ihrer Website ein Einstiegspunkt sein könnte.

Letzter Gedanke

Das Elementor Breadcrumbs-Widget erleichtert das Hinzufügen von Breadcrumbs zu Ihrer WordPress-Website. Die große Auswahl an Funktionen von Elementor ermöglicht es Ihnen, benutzerdefinierte Breadcrumbs zu erstellen, um die Benutzererfahrung weiter zu verbessern.

Holen Sie sich jetzt Elementor Pro!

Zusammenfassung

So ! Das war es für diesen Artikel, der Ihnen zeigt, wie Sie Breadcrumbs -Breadcrumbs- zu Ihrer Website hinzufügen. Wenn Sie Bedenken haben, wie Sie dorthin gelangen, lassen Sie es uns innerhalb wissen commentaires.

Sie können sich aber auch beraten unsere RessourcenWenn Sie mehr Elemente benötigen, um Ihre Projekte zur Erstellung von Internetseiten durchzuführen, konsultieren Sie unseren Leitfaden auf der WordPress-Blog-Erstellung oder der eine auf Divi: das beste WordPress-Theme aller Zeiten.

Aber in der Zwischenzeit Teile diesen Artikel in deinen verschiedenen sozialen Netzwerken.

...