In diesem Beitrag
In diesem Beitrag
Möchten Sie einen Elementor-Sprachumschalter hinzufügen, um Ihre Elementor-Designs in mehreren Sprachen anbieten zu können?
Elementor ist das beliebteste WordPress Page Builder Plugin und ermöglicht es Ihnen, erstaunliche, dynamische Websites zu erstellen. Aber wenn Sie diese Websites in mehreren Sprachen anbieten möchten, benötigen Sie die Hilfe eines Plugins eines Drittanbieters.
TranslatePress ist ein kostenloses mehrsprachiges WordPress-Plugin, das eine tiefe Unterstützung für Elementor bietet, einschließlich der Möglichkeit, einen flexiblen Elementor-Sprachumschalter in verschiedenen Teilen Ihrer Designs hinzuzufügen.
In diesem Beitrag zeigen wir Ihnen, wie Sie mit dem kostenlosen TranslatePress-Plugin einen Sprachumschalter zu Elementor hinzufügen können, einschließlich der Übersetzung Ihrer Elementor-Inhalte – entweder manuell oder mithilfe von Tools wie Google Translate.
Hier ist ein Beispiel für das Hinzufügen eines Sprachumschalters zu einer Theme Builder-Vorlage, aber Sie erhalten auch andere Optionen für die Platzierung Ihres Sprachumschalters:
Mit TranslatePress können Sie nicht nur den Sprachumschalter hinzufügen, sondern es bietet auch einige weitere Elementor-Integrationen, beispielsweise die Möglichkeit, bestimmte Elementor-Widgets und -Abschnitte je nach der vom Besucher gewählten Sprache ein- oder auszublenden.
Bevor wir beginnen, hier ist ein kurzes Video-Tutorial, das erklärt, wie das geht:
Aber wenn Sie mehr ins Detail gehen und die Dinge in Ihrem eigenen Tempo angehen möchten, lesen Sie bitte weiter in diesem Artikel.
Bereit loszulegen? Hier ist die Anleitung zum Einrichten…
So fügen Sie einen Elementor-Sprachumschalter kostenlos hinzu
Um Ihren Sprachumschalter zu erstellen, benötigen Sie das kostenlose TranslatePress-Plugin.
TranslatePress ist ein umfassendes mehrsprachiges WordPress-Plugin, das Ihnen sowohl bei der Übersetzung Ihrer Inhalte als auch bei der Einbindung eines Sprachumschalters im Frontend hilft, den Ihre Besucher nutzen können.
Mit TranslatePress können Sie sowohl automatische als auch manuelle Übersetzungen (oder eine Kombination aus beidem) nutzen und alle Ihre Übersetzungen über einen visuellen Point-and-Click-Editor verwalten – genau so, wie Sie mit Elementor einen visuellen Editor zur Erstellung Ihrer Designs verwenden:
Als zusätzlicher Bonus bietet TranslatePress außerdem einige spezielle Integrationen für Elementor, mit denen Sie beispielsweise bestimmte Widgets und Abschnitte je nach der vom Nutzer gewählten Sprache ein- oder ausblenden können.
Mit der kostenlosen Version von TranslatePress können Sie die Sprachauswahl hinzufügen und die Inhalte Ihrer Elementor-Website in eine neue Sprache übersetzen. Um Unterstützung für eine unbegrenzte Anzahl von Sprachen hinzuzufügen und auf einige weitere erweiterte Funktionen zuzugreifen, können Sie außerdem Auf die kostenpflichtige Version von TranslatePress umsteigen. Wir werden auf jeden Fall alle Funktionen vermerken, die die kostenpflichtige Version erfordern.
TranslatePress Mehrsprachig
Hier ist der grundlegende Prozess:
- Installieren Sie TranslatePress und wählen Sie Ihre Sprachen aus;
- Passen Sie Ihren Elementor-Sprachumschalter an;
- Übersetzen Sie Ihren Inhalt.
Schauen wir uns jeden Schritt im Detail an…
1. Installieren Sie TranslatePress und wählen Sie die Sprachen aus
Um zu beginnen, installieren und aktivieren Sie das kostenlose TranslatePress-Plugin von WordPress.org.
Sobald du das Plugin aktiviert hast, gehe zu Einstellungen → TranslatePress um die Sprachen auszuwählen, die Sie auf Ihrer Website anbieten möchten:
- Standardsprache – die Sprache, in der der Inhalt Ihrer Elementor-Website derzeit vorhanden ist.
- Alle Sprachen – eine oder mehrere neue Sprachen, in die Sie den Inhalt Ihrer Elementor-Website übersetzen möchten. Die kostenlose Version unterstützt eine neue Sprache, während die Premium-Version von TranslatePress ermöglicht unbegrenzte Sprachen.
Dies sind auch die Sprachen, die in Ihrer Sprachauswahl als Optionen angezeigt werden.
Für die Installation und Einrichtung von TraslatePress können Sie sich auch dieses Video-Tutorial ansehen:
2. Passen Sie Ihre Elementor-Sprachumschaltung an
Standardmäßig fügt TranslatePress in der unteren rechten Ecke Ihrer Website eine schwebende Sprachauswahl hinzu, die alle Sprachen enthält, die Sie im vorherigen Schritt ausgewählt haben. Diese Sprachauswahl wird auf jeder Seite* angezeigt, unabhängig davon, ob Sie die Seite mit Elementor erstellt haben oder nicht.
* Hinweis – falls Sie bestimmte Inhalte von der Übersetzung ausschließen, wird der Sprachumschalter nicht auf Seiten angezeigt, auf denen Sie die Übersetzung deaktiviert haben.
Wenn Sie die Position anpassen möchten, können Sie bei TranslatePress den Sprachumschalter auch über einen Shortcode oder einen Menüpunkt platzieren und dabei das Verhalten ändern (beispielsweise nur den Namen der Sprache anzuzeigen und die Flagge auszublenden).
Sie können all diese Einstellungen in der verwalten Sprachwechsler Registerkarte im Einstellungsbereich „TranslatePress“ (Einstellungen → TranslatePress → Sprachwechsler).
Hier sehen Sie drei Optionen, um eine Sprachumschaltung zu Ihrer Elementor-Website hinzuzufügen, und viele Anpassungsoptionen für das Aussehen und Verhalten.
Nun schauen wir uns an, wie Sie diese Optionen verwenden können, um Ihren Sprachumschalter in Elementor-Designs zu platzieren.
Verwendung des Sprachumschalter-Kurzcodes in Elementor
Um beispielsweise einen schwebenden Schalter hinzuzufügen, der auf jeder Seite Ihrer Website sichtbar bleibt und dem Leser während seines Besuchs folgt, aktivieren Sie einfach den schwebenden Schalter. Dies ist die einfachste und bequemste Einrichtung.
Sie können einfach eine Designvorlage anwenden und sie so belassen oder mit einer Vorlage beginnen und diese an das Design Ihrer Website anpassen. Spielen Sie mit Farben, Größen, Rändern, Animationen, Flaggen und vielem mehr.
Auf der linken Seite des Bildschirms sehen Sie eine Live-Vorschau Ihres Switchers, die sich bei jeder Änderung in Echtzeit aktualisiert.
Als Nächstes können Sie das Layout anpassen – Elemente wie die Position auf dem Bildschirm, die Breite, den Abstand oder die Position der Flagge in Bezug auf den Sprachnamen.
Wenn Sie nur 2 Sprachen auf Ihrer Website haben, in der Zusätzliche Einstellungen Abschnitt können Sie Ihren Umschalter so konfigurieren, dass er immer die gegenüberliegende Sprache anzeigt, die gerade auf der Website angezeigt wird. Dadurch wird Ihre Umschalter-Dropdown in eine klickbare Schaltfläche umgewandelt.
Verwendung des Sprachumschalter-Kurzcodes in Elementor
Wenn Sie Ihren Schalter an einer festen Position auf Ihrer Website haben möchten und die Flexibilität dazu benötigen, können Sie die Shortcode-Option verwenden.
Sie können diesen Umschalter genau wie die vorherige Option anpassen und ihn dann mithilfe des [language-switcher] Kurzcode. Sie können ihn überall in Ihren Elementor-Designs platzieren, indem Sie die Elementor-Funktionen nutzen Kurzcode Widget
Im Fortgeschritten Registerkarte der Widget-Einstellungen können Sie alle normalen Elementor-Einstellungen zur Steuerung von Abständen, Positionierung usw. verwenden.
Wenn Sie Elementor Pro und dessen Theme Builder verwenden, können Sie den Sprachumschalter-Shortcode auch in die Templates einfügen, die Sie mit dem Theme Builder erstellen. Sie könnten beispielsweise ein Template für Ihre einzelnen Blogbeiträge erstellen und den Sprachumschalter unter dem Beitragstitel einfügen.
Hier ist ein einfaches Beispiel, das den Shortcode-Block verwendet, um eine Sprachumschaltung unter dem Post-Titel und den Infos zu platzieren:
Verwendung des Menüelements "Sprachumschalter" in Elementor
Wenn Sie den Elementor Theme Builder verwenden, um eine eigene Kopfzeile zu gestalten, können Sie Ihren Sprachumschalter auch in diese Kopfzeilenvorlage einfügen, indem Sie den speziellen Menüpunkt für den Sprachumschalter nutzen, den TranslatePress bereitstellt.
Öffne zuerst die Kopf Navigationsmenü Widget. In diesem Beispiel ist der Menünahme “Primäres Menü”:
Dann gehe zu Darstellung → Menüs in deinem WordPress-Dashboard, um dieses Menü zu bearbeiten. Stelle sicher, dass du das richtige Menü bearbeitest, indem du die Dropdown-Liste oben verwendest. Dann kannst du deinen Sprachumschalter über den dedizierten Menüpunkt hinzufügen Sprachwechsler Menüpunkte.
Sie können jede Sprache als oberstes Menüelement hinzufügen. Oder Sie können die Aktuelle Sprache als oberstes Element und die anderen Sprachen als Untermenüs hinzufügen.unten abgebildet):
Sobald Sie Ihre Änderungen speichern, sehen Sie Ihren Sprachumschalter im Menü Ihrer Elementor-Header-Vorlage:
Wenn Ihre Elementor-Website nur 2 Sprachen hat, können Sie sich auch für eine klickbare Sprachschaltfläche entscheiden, bei der Ihr Umschalter immer die alternative Sprachoption an Gegenteilige Sprache Artikel aus der Liste. Es ist nicht notwendig, die Sprachen hinzuzufügen, wenn Sie diese Option wählen.
Wenn Sie Ihre Änderungen nun speichern und Ihre Website auf Englisch angezeigt wird, zeigt Ihr Umschalter nur noch Spanisch (oder die Sprache, in die Sie sie übersetzt haben) an. Sobald der Besucher zu Spanisch wechselt, zeigt der Button nun Englisch an.
Sie können denselben exakten Ansatz auch verwenden, um Ihren Sprachumschalter zu einer Fußzeilen-Vorlage hinzuzufügen, die Sie mit Elementor Pro erstellen (oder eigentlich überall, wo Sie Elementor's verwenden Navigationsmenü Widget.
3. Übersetzen Sie Ihre Inhalte
Sobald Sie Ihren Elementor-Sprachumschalter hinzugefügt haben (oder Sprachumschalter – Sie können bei Bedarf mehrere Sprachumschalter an verschiedenen Positionen hinzufügen), ist Ihr nächster Schritt, den Inhalt Ihrer Website zu übersetzen, damit Besucher Ihre übersetzten Inhalte sehen können, wenn sie über die Sprachauswahl eine andere Sprache als die Standardsprache auswählen.
TranslatePress unterstützt zwei Übersetzungsmethoden:
- Automatische maschinelle Übersetzung – Sie können die Übersetzungen Ihrer Website automatisch mit TranslatePress AI, DeepL oder Google Translate erstellen (in der kostenlosen Version von TranslatePress verfügbar).
- Manuelle Übersetzung – Sie können die Übersetzungen Ihrer Website manuell mit dem visuellen Editor hinzufügen oder bearbeiten.
Sie können die beiden Ansätze auch mischen – so könnten Sie automatische Übersetzungen verwenden, um die Basistranslationen Ihrer Website zu erstellen, und dann zu diesen maschinellen Übersetzungen zurückkehren und sie bei Bedarf manuell anpassen.
In diesem Abschnitt zeigen wir Ihnen kurz, wie die Übersetzung funktioniert. Wenn Sie jedoch eine detaillierte Übersicht wünschen, haben wir auch vollständige Anleitungen zum Übersetzen von Elementor verfasst:
- Wie übersetze ich Elementor-Websites Im Allgemeinen
- Wie man Elementor Popup-Inhalte für mehrsprachige Websites übersetzt
Automatische Übersetzung einrichten (Optional)
Dieser Schritt ist optional – Sie können auch einfach zum nächsten Schritt übergehen, um Ihren Inhalt manuell zu übersetzen..
Wenn Sie die automatische Übersetzung über Google Translate oder DeepL aktivieren möchten, gehen Sie zu Einstellungen → TranslatePress → Automatische Übersetzung. Aktivieren Sie die Funktionalität und konfigurieren Sie dann Ihren bevorzugten automatischen Übersetzungsdienst.
Geheimtipp: Wenn Sie eine Premium-Version von TranslatePress verwenden, können Sie sich den manuellen Aufwand für die Einrichtung der API-Schlüssel für Google Translate und DeepL sparen, indem Sie die integrierte TranslatePress AI Lösung.
Die Übersetzung Ihrer Website mit TranslatePress AI erfolgt in drei Schritten: Aktivieren Sie Ihre Lizenz, wählen Sie die Sprachen aus, aktivieren Sie die automatische Übersetzung – und schon sind Sie fertig!
Dies macht die automatische Übersetzung Ihres gesamten Website-Inhalts (einschließlich SEO-Metadaten) 100x schneller.
Sie können jedoch weiterhin eine direkte Verbindung zur Google Translate- oder DeepL-API herstellen, falls Sie aus irgendeinem Grund diese Methode bevorzugen. Dies erfordert zwar etwas mehr Einrichtungsaufwand Ihrerseits, könnte Ihnen aber bei einer kleinen Website mehr Geld sparen.
Wir haben eine detaillierte Anleitung zu wie man WordPress automatisch übersetzt und WooCommerce, zusammen mit speziellen Einrichtungsanleitungen für beide Dienste:
Beachten Sie jedoch, dass die kostenlose Version von TranslatePress keine Übersetzungen über die DeepL-API unterstützt. Hierfür benötigen Sie die Premium-Version.
Verwenden Sie den visuellen Übersetzungseditor
Um Ihre Übersetzungen manuell hinzuzufügen oder zu bearbeiten, können Sie den visuellen Übersetzungseditor in TranslatePress verwenden, den wir bereits etwas früher in diesem Beitrag vorgestellt haben.
Um den Editor zu öffnen, gehen Sie zu dem Inhalt, den Sie auf der Vorderseite Ihrer Website übersetzen möchten, und klicken Sie auf Seite übersetzen Option in der WordPress-Symbolleiste:
Sie sollten eine Live-Vorschau Ihrer Website sehen, zusammen mit einer Seitenleiste auf der linken Seite, in der Sie Ihre Übersetzungen ver.
Dies öffnet die Übersetzung des Inhalts in der Seitenleiste, wo Sie die Übersetzung hinzufügen (oder die vorhandene Übersetzung bearbeiten können, wenn Sie eine automatische Übersetzung verwendet haben):
Sie können den Vorg.
Der Prozess ist immer derselbe – klicken und auswählen. Aber wenn Sie Beispiele für bestimmte Inhaltstypen sehen möchten, haben wir viele Anleitungen, die Ihnen dabei helfen:
- Bilder
- Editor (Gutenberg) Blöcke
- Benutzerdefinierte Felder
- Benutzerdefinierte Beitragstypen
- WordPress Formulare
- WordPress Menüs
- Popup-Inhalt
- Schieberegler
- WooCommerce-Produkte
Metadaten im Hintergrund (wie SEO-Titel)
Mit die Premium-Version von TranslatePress und sein SEO Pack-Add-on können Sie denselben Ansatz auch verwenden, um Hintergrundinformationen zu übersetzen, wie zum Beispiel Yoast SEO Titel und Meta-Beschreibungen, zum Beispiel Informationen aus Social-Media-Graphen und mehr.
Sobald Sie das SEO Pack-Add-on aktualisiert und installiert haben, können Sie über das Dropdown-Menü in der Seitenleiste des Übersetzungseditors auf diese Übersetzungen zugreifen:
Sie erhalten auch ein neues String-Liste Abschnitt, der es Ihnen ermöglicht Übersetzen Sie alle verschiedenen URL-Slugs auf Ihrer Website.
Bonus: Elementor Widgets und Sektionen nach Sprache ein-/ausblenden
TranslatePress unterstützt Sie nicht nur bei der Erstellung eines Sprachumschalters, sondern bietet auch eine spezielle Elementor-Integration, mit der Sie bestimmte Elementor-Widgets oder -Abschnitte je nach der vom Nutzer ausgewählten Sprache ein- oder ausblenden können.
Zum Beispiel könnten Sie ein spezielles Widget erstellen, das nur für Personen angezeigt wird, die auf Englisch surfen. Oder Sie könnten ein spezielles Widget erstellen, das für alle angezeigt wird außer Leute stöbern auf Englisch.
Sie können diese Funktion innerhalb der Elementor-Oberfläche aufrufen. Wenn Sie ein Widget oder eine Sektion bearbeiten, erhalten Sie zwei neue Optionen in der Fortgeschritten Tabelle
- Nach Sprache einschränken – dieses Widget oder diesen Abschnitt nur Personen anzeigen, die in einer bestimmten Sprache browsen.
- Nach Sprache ausschließen – Dieses Widget oder dieser Bereich wird allen Besuchern angezeigt, außer Personen, die in einer bestimmten Sprache browsen.
Erstellen Sie noch heute Ihren Elementor Sprachumschalter
Mit TranslatePress können Sie ganz einfach einen Elementor-Sprachumschalter hinzufügen und die Inhalte Ihrer Elementor-Website in eine oder mehrere neue Sprachen übersetzen.
TranslatePress bietet sofort einsatzbereite Unterstützung für die Übersetzung von Elementor-Inhalten und ermöglicht es Ihnen sogar, Designs zu übersetzen, die Sie mit dem Elementor Popup Builder oder dem Theme Builder erstellt haben.
Darüber hinaus erhalten Sie spezielle Elementor-Integrationen, z. B. das Ein- oder Ausblenden von Widgets oder Abschnitten basierend auf der vom Benutzer in der Sprachumschaltung ausgewählten Sprache.
Los geht's die kostenlose Version von WordPress.org um Ihre Website in eine neue Sprache zu übersetzen und auf alle Einstellungen zum Sprachumschalter zuzugreifen.
Dann, Upgrade zur Premium-Version um unbegrenzt viele Sprachen hinzufügen zu können, SEO- und Social-Media-Metadaten zu übersetzen und auf weitere nützliche Funktionen zugreifen zu können, wie zum Beispiel:
- DeepL Support für automatische Übersetzung.
- Benutzer werden automatisch auf ihre bevorzugte Sprache weitergeleitet.
- Übersetzerkonten.
- Separate Menüs basierend auf der Sprache eines Benutzers anzeigen (anstatt nur die immer gleichen Menüpunkte zu übersetzen).
TranslatePress Mehrsprachig
Haben Sie noch Fragen zur Arbeit mit dem Sprachwechsler Ihrer Elementor-Website? Lassen Sie es uns in den Kommentaren wissen!
Wenn Sie diesen Beitrag hilfreich fanden, schauen Sie sich bitte unsere an YouTube-Kanal, wo wir ständig kurze und leicht verständliche Video-Tutorials hochladen. Sie können uns auch folgen auf Facebook und Twitter um der Erste zu sein, der jedes Mal Bescheid weiß, wenn wir etwas posten.
