Dieser Gastbeitrag wird Ihnen von Daan von wplift.com präsentiert. Er hat vor Kurzem EasyThemePacks gestartet, eine fantastische Premium-Bibliothek mit Elementor-Templates. Er wird Ihnen genau zeigen, wie Sie diese mit WPML übersetzen.
Wenn Sie ein regelmäßiger Elementor-Nutzer sind, sind Sie wahrscheinlich bereits gut damit vertraut, wie Sie mit Elementor wunderschöne Designs erstellen können, ohne Code schreiben zu müssen. Aber kann Elementor Ihnen auch dabei helfen, wunderschöne mehrsprachige Designs zu erstellen?
Gute Nachrichten: Mit WPML ist das möglich!
Am Ende dieses Tutorials werden Sie genau wissen, wie Sie mit der Erstellung mehrsprachiger Websites beginnen können, die mit Elementor erstellt wurden, selbst wenn Sie die komplett leere Option „Elementor Canvas“ verwenden.
Was Sie benötigen, um eine mehrsprachige Website mit Elementor zu erstellen
Hier ist alles, was Sie benötigen, um diesem Tutorial zu folgen:
- Eine Seite, die Sie mit Elementor entworfen haben – wir verwenden das Barista Bluegrass-Template von EasyThemePacks, ein komplettes Landing-Page-Design, das auf dem leeren Elementor Canvas-Template basiert.
- WPML Multilingual CMS – dies hilft Ihnen bei der Erstellung einer mehrsprachigen WordPress-Website, einschließlich Ihrer Elementor-Inhalte.
Sie müssen außerdem sicherstellen, dass Sie die anderen Komponenten des WPML Multilingual CMS-Pakets installieren, insbesondere die WPML String-Übersetzung und das WPML Übersetzungsmanagement.
Sobald Sie diese grundlegenden Dinge haben, lassen Sie uns eintauchen, wie Sie WPML verwenden können, um eine mehrsprachige Elementor-Website zu erstellen!
Schritt 1: WPML CMS und Komponenten installieren und aktivieren
Sobald Sie WPML Multilingual CMS und seine Komponenten installiert haben, können Sie den WPML-Einrichtungsassistenten durchlaufen, um Ihre grundlegenden Spracheinstellungen zu konfigurieren (wie etwa, in welche Sprachen Sie Ihre Elementor-Designs übersetzen möchten).
Für dieses Beispiel werden wir unser Template ins Deutsche übersetzen (mit Google Übersetzer – Entschuldigung für etwaige Fehler, liebe deutsche Grammatik-Perfektionisten!):
Stellen Sie sicher, dass Sie auch den Übersetzungsmanager aktivieren (WPML wird Sie in Ihrem Dashboard dazu auffordern – es ist kaum zu übersehen und Sie müssen nur auf einen Button klicken).
Schritt 2: Gehen Sie zu der Elementor-Seite, die Sie übersetzen möchten
Sobald Sie die grundlegenden Einstellungen von WPML eingerichtet haben, gehen Sie im WordPress-Dashboard zum Editor für die Elementor-Seite, die Sie übersetzen möchten (öffnen Sie nicht den Elementor-Editor – bleiben Sie im regulären WordPress-Editor).
So sieht das EasyThemePacks Barista Bluegrass-Template im englischen Original aus:
In nur wenigen Minuten werden wir in der Lage sein, es ins Deutsche zu übersetzen!
Schritt 3: Erstellen Sie eine neue Übersetzung für Ihr Elementor-Design
Klicken Sie im WordPress-Editor auf das + Symbol, um eine neue Übersetzung Ihres Elementor-Designs zu erstellen:
Dadurch öffnet sich ein praktischer Side-by-Side-Editor. Auf der linken Seite sehen Sie alle Informationen aus dem englischen Original. WPML zieht jeden einzelnen String aus Ihrem Elementor-Design sowie andere hilfreiche Attribute (wie die URL, auf die ein Button verlinkt, damit Sie Benutzer zur richtigen Übersetzung leiten können).
Um mit der Übersetzung Ihres Elementor-Templates zu beginnen, müssen Sie die Übersetzung nur in das entsprechende Feld auf der rechten Seite eingeben:
Achten Sie beim Durchgehen darauf, jede Übersetzung als Übersetzung ist abgeschlossen zu markieren, damit Sie schnell erkennen können, was bereits erledigt ist und was noch übersetzt werden muss. Darüber hinaus können Sie zwar jederzeit Teilfortschritte speichern, aber Sie können Ihre Übersetzung erst dann im Frontend anzeigen lassen, wenn Sie alles als abgeschlossen markiert haben.
Sobald Sie Ihre Übersetzungen beendet und gespeichert haben, sind Sie fertig! Nun können Sie Ihre bestehende Übersetzung bei Bedarf jederzeit bearbeiten:
Und wenn Sie zum Frontend Ihrer Website gehen, können Sie auf die übersetzte Version Ihrer Seite zugreifen, indem Sie die URL nach Ihren Wünschen ändern (mehr dazu, wie Sie einen Sprachumschalter erstellen, in Kürze!).
So sieht die übersetzte Version unseres EasyThemePacks-Templates aus, einschließlich der URL-Struktur, damit Sie sehen können, wie alles lokalisiert ist:
Was passiert, wenn Sie das ursprüngliche Elementor-Design ändern?
Irgendwann werden Sie wahrscheinlich in eine Situation geraten, in der Sie die Originalversion des Elementor-Designs ändern möchten.
Was passiert dann? Verlieren Sie nach den Änderungen Ihre übersetzten Inhalte?
Nein!
Wenn Sie jemals die Elementor-Oberfläche verwenden, um die bestehende Übersetzung Ihrer Seite zu bearbeiten, markiert WPML diese Übersetzungen einfach im Editor und bietet Ihnen eine Option, die Unterschiede anzuzeigen:
WPML ändert nichts an bereits übersetzten Strings, die nicht geändert wurden. Sie müssen also nur den bearbeiteten Text aktualisieren und schon sind Sie fertig!
Was ist mit dem Sprachumschalter beim Elementor Canvas-Template?
Alle Designs von EasyThemePacks basieren auf der Verwendung des leeren Elementor Canvas-Templates. Und wenn Sie Ihre eigenen Seiten mit Elementor erstellen, besteht eine gute Chance, dass Sie ebenfalls das leere Elementor Canvas-Template verwenden.
Wenn Sie dieses Template verwenden, gibt es kein Navigationsmenü oder eine Seitenleiste von Ihrem Theme, was die beiden Stellen sind, an denen Sie normalerweise einen Sprachumschalter mit WPML hinzufügen würden.
Also... wie ermöglichen Sie Besuchern tatsächlich den Zugriff auf die übersetzte Version Ihres Elementor-Templates, wenn Sie Elementor Canvas verwenden?
Während Sie mit Code Ihren eigenen WPML-Sprachumschalter erstellen können, ist der einfachste Weg, einfach einen Sprachumschalter-Shortcode in Ihr Elementor-Template aufzunehmen.
Platzieren Sie dazu das Elementor-Shortcode-Widget dort, wo es angezeigt werden soll, und fügen Sie diesen Shortcode ein:
{{wpml_language_selector_footer}}
Dieser Shortcode ruft die Einstellungen für Ihren WPML-Sprachumschalter in der Fußzeile ab. Um diese Einstellungen zu konfigurieren, gehen Sie in Ihrem WordPress-Dashboard zu WPML → Sprachen und scrollen Sie nach unten zum Bereich Sprachumschalter in der Fußzeile:
Wenn Sie auf das Stift-Symbol klicken, können Sie konfigurieren, wie Ihr Sprachumschalter funktioniert. Sie können:
- Das Layout ändern
- Wählen, ob Sprachennamen und Flaggen angezeigt werden sollen oder nicht
- Ein neues Farbschema wählen
- Die Stile einzelner Elemente konfigurieren
Als Tipp: Die Verwendung eines Sprachennamens ist eine großartige Option, da sie es den Leuten ermöglicht, mit STRG + F nach ihrer lokalen Sprache zu suchen.
Abschließende Gedanken zur Übersetzung von Elementor
Mit dem WPML Multilingual CMS-Paket ist es einfach, jedes Elementor-Seitentemplate zu übersetzen, einschließlich derer, die auf Elementor Canvas basieren, wie die Premium-Templates, die bei EasyThemePacks erhältlich sind. Sie können String für String durchgehen, um alle Inhalte zu übersetzen, die Sie mit dem visuellen Elementor-Page-Builder erstellen. Und sollten Sie in Zukunft jemals Änderungen an Ihrem ursprünglichen Elementor-Design vornehmen, hilft WPML Ihnen dabei, diese Änderungen zu finden, um sicherzustellen, dass Sie auch die übersetzte Version aktualisieren.
Schließlich können Sie, selbst wenn Sie das leere Elementor Canvas-Template verwenden, immer noch einen benutzerfreundlichen Sprachumschalter integrieren, entweder über die Shortcodes von WPML oder die Methode mit benutzerdefiniertem Code, die wir verlinkt haben.
Haben Sie noch weitere Fragen dazu, wie Sie Ihre Elementor-Designs übersetzen? Hinterlassen Sie einen Kommentar!
