Mit sowohl Theme- als auch Plugin-Versionen ist Divi eine der beliebtesten und flexibelsten Möglichkeiten, eine WordPress-Website zu erstellen. Aber während Divi Ihnen eine Menge Designflexibilität bietet, gibt es keine integrierte Möglichkeit, Divi-Websites zu übersetzen, weshalb Sie wahrscheinlich hier diesen Beitrag lesen.
In dieser Anleitung erfahren Sie, wie Sie eine Divi-Website mit der kostenlosen Version des TranslatePress-Plugins übersetzen können.
Wenn es eines gibt, Divi Benutzer lieben, es ist visuelles Design, und TranslatePress bringt denselben visuellen Ansatz für die Erstellung einer mehrsprachigen Website mit Divi mit sich.
Bis zum Ende dieses Beitrags können Sie eine grafische Benutzeroberfläche verwenden, um alle Ihre Divi-Inhalte, einschließlich Bildern, Formularen, Schaltflächen und mehr, zu übersetzen, indem Sie einfach auf eine Live-Vorschau Ihrer Website zeigen und klicken:
Bereit zu lernen, wie man jede Divi-Website übersetzt? Tauchen wir ein…
Diese Methode funktioniert sowohl für die Theme- als auch für die Plugin-Version von Divi.
So übersetzen Sie Divi-Websites mit TranslatePress: Schritt für Schritt
Hier ist eine Vogelperspektive des Prozesses zur Erstellung einer mehrsprachigen Website mit Divi:
- Gestalten Sie Ihre Inhalte mit dem Divi Builder
- Nehmen Sie die grundlegenden TranslatePress-Einstellungen vor
- Verwenden Sie die visuelle Übersetzungs-Editor-Oberfläche von ’TranslatePress“
- Fügen Sie einen Frontend-Sprachumschalter zu Ihrer mehrsprachigen Divi-Website hinzu
1. Erstellen Sie Ihre Inhalte mit Divi
Divi ist sowohl als Theme als auch als Plugin für den Divi Page Builder erhältlich. In beiden Fällen können Sie eine visuelle Drag-and-Drop-Oberfläche verwenden, um Ihre Inhalte zu gestalten. Oder Sie können auch eine abstrakte Backend-Schnittstelle verwenden, wenn Sie diesen Ansatz bevorzugen.
Um zu beginnen, erstellen Sie mit Divi alle Inhalte, die Sie auf Ihrer Website verwenden möchten. Machen Sie sich im Moment keine Gedanken über die Sprache – erstellen Sie einfach die Inhalte in der Sprache, die die Standardsprache Ihrer Website sein soll.
Für dieses Tutorial wählen wir eines der vielen vorgefertigten Layouts von Divi, da es reichlich Beispieldaten zum Übersetzen liefert. Sie können Ihren Inhalt aber auch von Grund auf neu erstellen – das ist ganz Ihnen überlassen:
Divi wird mit über zweitausend vorgefertigten Vorlagen sowie 342 speziellen “Layout-Paketen” geliefert, die im Grunde eine thematische Sammlung von Vorlagen für eine bestimmte Website-Nische darstellen.
Nachdem wir die Vorlage für die Homepage aus einem der Layout-Pakete für Elektrodienstleistungen importiert und sie ein wenig angepasst haben, sieht unsere Divi-Website nun so aus:
Sie können die Inhalte nach Belieben anpassen und mithilfe der Drag-and-Drop-Oberfläche von Divi nach Bedarf neu anordnen – ganz gleich, welche Elemente Sie mit Divi hinzufügen: In den nächsten Schritten können Sie alles mit TranslatePress übersetzen.
Sie können jeden Text bearbeiten, das Styling ändern, Formulare, Schieberegler usw. hinzufügen. Toben Sie sich aus!
2. Grundlegende TranslatePress-Einstellungen konfigurieren
Sobald Sie Ihre Divi-Inhalte fertiggestellt haben, können Sie diese mit TranslatePress übersetzen.
Bevor Sie das tun, müssen Sie jedoch einige grundlegende Reinigungsarbeiten durchführen, wie z.B. Auswahl der Sprachen, die Sie anbieten möchten Ihre Divi-Inhalte hinein.
Installieren und aktivieren Sie zunächst das kostenlose TranslatePress-Plugin. Sobald Sie das Plugin aktiviert haben, gehen Sie zu Einstellungen → TranslatePress die Grundeinstellungen zu konfigurieren.
Ihre erste Wahl ist, welche Sprachen Sie auf Ihrer Website verwenden möchten. Benutzen Sie Standardsprache Ausklappmenü zur Auswahl der Sprache, in der Ihre Website aktuell vorhanden istz.B. Englisch). Benutze dann Alle Sprachen Bereich, um nach Bedarf neue Sprachen hinzuzufügen.
Mit der kostenlosen Version von TranslatePress können Sie eine weitere Sprache hinzufügen, aber Du kannst upgraden zur kostenpflichtigen Version, um Ihre Divi-Inhalte in unbegrenzt viele neue Sprachen zu übersetzen:
Eine weitere wichtige Wahl hier ist, ob maschinelle Übersetzung verwendet werden soll oder nicht, was Sie konfigurieren können von der Automatische Übersetzung Tab.
Wenn Sie Zeit sparen möchten, können Sie die Google Translate-API um 100% der Inhalte Ihrer Website, einschließlich aller Divi-Inhalte, automatisch zu übersetzen. Anschließend können Sie die Übersetzungen bei Bedarf manuell nachbearbeiten:
Die Premium-Version von TranslatePress bietet zudem Unterstützung für die DeepL maschinelle Übersetzung Dienstleistung.
Sie können sich gerne die anderen Einstellungen ansehen, da Sie vielleicht etwas Relevantes für Ihre Divi-Website finden. Sobald Sie Ihre Änderungen gespeichert haben, können Sie mit der Übersetzung von Divi-Inhalten beginnen.
3. Divi-Websites mit dem TranslatePress Visual Editor übersetzen
Um Ihre Divi-Website zu übersetzen, verwenden Sie den visuellen Frontend-Übersetzungseditor von TranslatePress.
Um auf diesen Editor zuzugreifen, öffnen Sie die Divi-Seite, die Sie im Frontend Ihrer Website übersetzen möchten. Klicken Sie dann auf Seite übersetzen Schaltfläche in der WordPress-Symbolleiste
Dadurch wird der visuelle Übersetzungseditor geöffnet, mit dem Sie 100% der Inhalte Ihrer Website übersetzen können.
Um einen bestimmten Inhalt zu übersetzen, fahren Sie einfach mit der Maus darüber und klicken Sie auf das blaue oder grüne Bleistiftsymbol. Daraufhin öffnet sich die Übersetzung für diesen Inhalt in der Seitenleiste, wo Sie Ihre Bearbeitungen vornehmen können:
Sobald Sie Ihre Übersetzung speichern, erscheint der übersetzte Text im Echtzeit-Editor, wenn Sie sich diese Sprache ansehen. So können Sie sicherstellen, dass das Layout Ihrer Website weiterhin gut aussieht:
Um schnell zwischen verschiedenen Übersetzungen zu wechseln, können Sie Verwenden Sie die Tastaturkürzel von ’TranslatePress“.
Das Mächtige an diesem Ansatz ist, dass Sie ihn für alle Ihrer Website-Inhalte, einschließlich Bildern, Button-Links, Menüpunkten, Pop-ups...alles!
Lass uns ein paar Beispiele durchgehen…
Schaltflächen/Links in Divi übersetzen
Wie Sie oben gesehen haben, enthält unsere Divi-Site zwei Schaltflächen / Links:
- Senden-Schaltfläche - führt zu einer internen Seite mit einer Erfolgsmeldung.
- Buchung anrufen – leitet Besucher zu einer Drittanbieter-Website weiter, um einen Termin zu vereinbaren (Google Kalender).
Um einen Button zu übersetzen, bewegen Sie einfach den Mauszeiger darüber und klicken Sie auf das blaue Stiftsymbol.
Was jedoch anders ist, ist, dass du übersetzen kannst beide der Button-Text und der Button-Link. Für unser Beispiel einer Elektrik-Website bedeutet dies, dass Sie spanischsprachige Besucher direkt zur spanischsprachigen Version von Google Kalender senden können:
TranslatePress passt interne Links automatisch so an, dass sie zur richtigen Sprachversion führen – Sie müssen interne Links nicht manuell bearbeiten..
Divi Menüpunkte, Widgets, Fußzeilen usw. übersetzen.
TranslatePress eignet sich nicht nur für Inhalte innen Sie können sogar Inhalte aus dem Divi-Theme (oder jedem anderen WordPress-Theme) übersetzen. Dies beinhaltet Ihre Navigationsmenüs und alle Widgets, die Sie in Ihrer Seitenleiste oder Ihrem Footer verwenden. Außerdem erkennt es und lässt Sie bearbeiten/übersetzen gettext-Zeichenketten hinzugefügt vom Divi-Theme oder dem Page-Builder-Plugin.
Sobald Sie den Text einmal übersetzt haben, verwendet TranslatePress diese Übersetzung automatisch auf Ihrer gesamten Website:
Bilder übersetzen
Neben Textinhalten bietet Ihnen TranslatePress außerdem die Möglichkeit, “Bilder übersetzen. Das heißt, Sie können unterschiedliche Bilder verwenden, je nachdem, in welcher Sprache ein Besucher browsert.
Beispielsweise kann für verschiedene Sprachen ein anderes Logo verwendet werden. Oder es kann ein im Inhalt verwendetes Bild für eine bessere Lokalisierung übersetzt werden.
Um ein Bild zu übersetzen, können Sie den gleichen Ansatz verwenden – fahren Sie darüber und klicken Sie auf das blaue Stiftsymbol. Anschließend können Sie in der Seitenleiste ein neues Bild aus Ihrer WordPress-Mediathek auswählen oder die URL zu einem externen Bild eingeben.
Hier ist, wie die Übersetzung des Logos im Divi-Theme aussieht:
Und es funktioniert genauso für Bilder in deinen Inhalten, oder sogar Bilder in einem Schieberegler das Sie mit Moduls Divi's Slider erstellt haben:
Formulare übersetzen
Schauen wir uns abschließend noch ein weiteres spezifisches Beispiel an, das relevant ist, wenn Sie eine mehrsprachige Website mit Divi erstellen – Ihre Formulare.
So gut wie jede Divi-Website wird die Kontaktformular- oder E-Mail-Opt-in-Module von Divi verwenden, daher ist die Übersetzung dieser Module ein wichtiger Aspekt bei der Übersetzung einer Divi-Website.
Wie Sie wahrscheinlich inzwischen schon erraten haben, können Sie mit TranslatePress denselben Point-and-Click-Ansatz nutzen, um Ihre Formulare übersetzen, auch.
Sie können sogar den Platzhaltertext übersetzen, der angezeigt wird innen Formularfelder:
Und das war’s schon! Ganz gleich, ob Sie Texte, Schaltflächen, Links, Menüpunkte, Widgets oder etwas anderes übersetzen möchten – mit TranslatePress ist die Übersetzung Ihrer Divi-Website so einfach wie „Zeigen und Klicken“.
4. Konfigurieren Sie Ihren Frontend-Sprachumschalter
Standardmäßig fügt TranslatePress einen Floating-Wert hinzu Sprachumschalter in die untere rechte Ecke Ihrer Website, was Sie wahrscheinlich in den obigen Beispielbildern gesehen haben.
Wenn Sie dieses Standardverhalten jedoch ändern möchten, bietet Ihnen TranslatePress auch einige weitere Optionen, wo Sie den Sprachumschalter auf Ihrer mehrsprachigen Divi-Website einfügen können.
Eine Option ist, sie als Navigationsmenüpunkt hinzuzufügen, was Sie tun können, indem Sie die Sprachwechsler MenüpunkteDarstellung → Menüs):
Hier ist, wie das auf der Frontend-Seite Ihrer Website aussieht:
Sie können auch einen Sprachumschalter mit dem anzeigen
Erstellen Sie noch heute eine mehrsprachige Website mit Divi
Divi gibt Ihnen die Möglichkeit, eine wunderschöne WordPress-Website mit einem visuellen Drag-and-Drop-Editor zu erstellen.
Mit TranslatePress können Sie dieses wunderschöne Design dann mithilfe einer ebenso einfachen visuellen Übersetzungsfunktion in neue Sprachen übertragen.
Wenn man die beiden kombiniert, kann man wirklich maßgeschneiderte WordPress-Websites, die zugänglich sind an Besucher aus aller Welt.
Alles, was Sie oben gesehen haben, kann mit dem Kostenlose Version von TranslatePress auf WordPress.org. Für mehr Flexibilität können Sie jedoch in Betracht ziehen Upgrade auf die Premium-Version von TranslatePress, das bietet…
- Unterstützung für dynamische Feldergroßartig, wenn Sie verwenden Divis dynamische Inhaltsfunktion)
- Ausführlichere Unterstützung für Mehrsprachige SEO
- Unterstützung für unbegrenzte Übersetzungs sprachen
- Integration mit DeepL für automatische Übersetzung
- Dedizierte Übersetzerkonten
- Die Möglichkeit, Ihre Website als verschiedene Benutzerrollen zu durchsuchen (Super für Seiten mit eingeschränktem Inhalt)
Um mehr über die Premium-Funktionen zu erfahren, Besuchen Sie die Preisseite.