Visual Composer ist einer der beliebtesten Page Builder für WordPress. In diesem Tutorial werden wir uns damit beschäftigen, wie man Visual-Composer-Websites mit TranslatePress erstellen.
Wir werden die einfachen Schritte durchgehen, die zum Erstellen von mehrsprachige Website Verwendung von Visual Composer in Verbindung mit TranslatePress.
Die beiden Plugins sind vollständig kompatibel, sodass Sie mit TranslatePress jede Art von Element oder Vorlage, die in Visual Composer verfügbar ist, direkt im Frontend übersetzen können. Und das alles über eine intuitive, visuelle Übersetzungsoberfläche.
Erstellen Sie Ihre Website mit Visual Composer
Visual Composer verfügt über einen visuellen Drag-and-Drop-Editor, mit dem Sie jede Seite Ihrer Website schnell und einfach erstellen können, ohne eine einzige Zeile Code schreiben zu müssen.
Es ist sowohl in einer kostenlosen als auch in einer kostenpflichtigen Version erhältlich. Die kostenlose Version bietet Standardelemente, um sowohl die Struktur als auch den Inhalt Ihrer Website zu bearbeiten. Sie können ganz einfach Zeilen hinzufügen und diese in Spalten aufteilen. Füllen Sie sie dann mit Inhalten in Form von Texten, Bildern, Schaltflächen, Menüpunkten, Shortcodes und mehr.
Die bezahlten Pläne geben Ihnen Zugang zu Hunderten von Premium-Content-Elementen und vordefinierten Vorlagen (über den Visual Composer Hub). Dies kann Ihnen helfen, Zeit zu sparen und nicht bei der Struktur und dem Design Ihrer Website bei Null anfangen zu müssen.
Für dieses Tutorial und um Zeit zu sparen, beginnen wir mit einer vordefinierten Vorlage, die bereits eine ganze Reihe von Elementen enthält. Sie können auch bei Null anfangen und etwas Einzigartiges für Ihre eigene Website erstellen.
Erstellen unserer ersten Seite mit Visual Composer
Sie können Visual Composer kostenlos erwerben oder herunterladen von ihre Webseite. Installieren und aktivieren Sie es dann einfach wie jedes andere WordPress-Plugin.
Sobald es aktiviert ist, können Sie beginnen und Ihre erste Seite erstellen.
Sie werden zu einem visuellen Frontend-Editor weitergeleitet und aufgefordert, Ihrer Seite einen Namen zu geben, ein Layout auszuwählen und dann mit dem Hinzufügen von Elementen und/oder der Verwendung einer Vorlage fortzufahren.
Ich habe eine Vorlage für eine einzelne Produktseite ausgewählt, indem ich den Visual Composer Hub durchsucht habe. Diese Vorlage für ein Restaurant enthält einen Header-Bereich, eine Beschreibung, eine Bewertung und Funktionen. Sie kann eine inspirierende Wahl für den Online-Verkauf oder Produktbewertungen sein.
So sieht meine Seite nach dem Laden der Vorlage aus. Ich kann die Vorlage anpassen, um andere Seiten Ihrer Website einzubinden, wie z. B. einen Blog, ein Menü, eine Galerie, einen Standort usw.
Sie können Elemente einfach verschieben, deren Einstellungen und Anzeigeoptionen anpassen sowie bestimmte Blöcke duplizieren, um schneller voranzukommen. Es gibt viel Flexibilität, die ich Sie gerne erkunden lassen möchte.
Sie können denselben visuellen Drag & Drop-Prozess verwenden, um alle verbleibenden Seiten Ihrer Website zu erstellen.
Visual Composer-Websites mit TranslatePress übersetzen
Nachdem wir nun unsere Website mit Visual Composer erstellt haben, wollen wir uns ansehen, wie einfach es ist, sie mit TranslatePress mehrsprachig zu gestalten.
Hinzufügen einer zweiten Sprache zu Ihrer Website
Für dieses Tutorial werden wir uns mit der Übersetzung der Seite befassen, die wir mit Visual Composer erstellt haben, in eine zweite Sprache (sagen wir Italienisch).
Wir werden zuerst Installieren und aktivieren das mehrsprachige TranslatePress-Plugin.
Nach der Aktivierung von TranslatePress werden Sie eine neue Seite übersetzen Element in der Admin-Leiste hinzugefügt.
Fahr einfach mit der Maus darüber und klick Einstellungen (oder du kannst auf den Einstellungen Menüpunkt und auswählen TranslatePress). Dadurch gelangen Sie zur Seite „TranslatePress-Einstellungen“.
Hier können wir die Sprachen hinzufügen, in denen die mit Visual Composer erstellte Seite/Website übersetzt werden soll.
Englisch ist unsere Standardsprache, daher werden wir auch “Italienisch” hinzufügen. Es gibt ein paar weitere Einstellungen (wie Google Übersetzer Integration für automatische Übersetzungen oder Anpassung der Sprachumschalter), aber wir können sie vorerst überspringen und auf Änderungen speichern.
Ihre Seite mit dem Frontend-Übersetzungseditor übersetzen
Wir sind nun bereit, unsere Visual Composer-Website zu übersetzen.
Um Ihre Website ins Italienische zu übersetzen, können Sie entweder auf Seite übersetzen blaue Registerkarte unter den TranslatePress-Einstellungen oder navigieren Sie einfach zu der Seite, die Sie übersetzen möchten, und klicken Sie auf die Seite übersetzen Element in der Admin-Leiste (neben Mit Visual Composer bearbeiten).
Dies öffnet einen visuellen Frontend-Übersetzungseditor, in dem Sie jede Zeichenkette auf einer Seite übersetzen und die Änderungen in Echtzeit sehen können.
Alles, was Sie tun müssen, ist, mit der Maus über einen bestimmten Text oder ein Element zu fahren, das Sie übersetzen möchten. Dann erscheint ein Bleistiftsymbol, und durch Klicken darauf können Sie die Übersetzung einfügen. Sobald Sie auf Speichern klicken, wird der übersetzte Text in Echtzeit im Editor aktualisiert. So einfach ist das.
Der gleiche Prozess kann auf alle Elemente auf einer Seite angewendet werden, ob Sie Speisekarte, ein Formular, Knopf, oder ein Bild mit Text. Selbst WooCommerce-Produkte lässt sich leicht mit TranslatePress übersetzen.
Sie können die Tastenkombinationen um die Navigation durch die Zeichenfolgen auf einer Seite zu beschleunigen und deren Übersetzung zu speichern.
Das Übersetzen eines Buttons, der einen Link enthält
Tauchen wir ein wenig tiefer ein. Wie Sie unter “Menü” bemerken, gibt es einen Button “Menü herunterladen”.
Sie können den Schaltflächentext leicht übersetzen, indem Sie die obigen Schritte befolgen. Nehmen wir an, Sie möchten auch den Besuchern der italienischen Version Ihrer Website die Möglichkeit geben, das Menü in ihrer eigenen Sprache herunterzuladen.
Auch das übernimmt TranslatePress. Wenn Sie mit der Maus über ein Element mit einem Link fahren, können Sie nicht nur den Text übersetzen, sondern auch die Ankerlink Element.
In diesem Fall habe ich die italienische Version des Menüs hochgeladen und sie als Anker-Link für die italienische Version ausgewählt. Personen, die die italienische Version der Website durchsuchen, können das Menü nun auf Italienisch herunterladen.
Beachten Sie bitte, dass TranslatePress, sobald Sie einen sich wiederholenden Text auf Ihrer Website übersetzt haben, dafür sorgt, dass dieser an allen Stellen, an denen er vorkommt, entsprechend angepasst wird. Es reicht beispielsweise aus, ein “Vorbestellung” Schaltflächentext für alle zum Übersetzen.
Bilder und Slider mit Text übersetzen
Es gibt Situationen, in denen beim Übersetzen Bilder mit Text auftauchen. Text, der übersetzt werden muss, sobald die Sprache geändert wird. In unserem Fall muss beispielsweise das CodHouse-Logo “Ristorante” anzeigen und nicht “Restaurant”, wenn es auf Italienisch angezeigt wird.
Mit TranslatePress ist es wirklich einfach, unterschiedliche Bilder, Logos oder Slider für verschiedene Sprachen anzeigen.
Sobald Sie auf das Logo klicken, werden Sie feststellen, wie einfach es ist, die Bildquellen für das Logo und das Hero-Bild für die italienische Version zu ändern. Sie können einfach eine andere Version für Italien hochladen.
Einen Sprachumschalter zu Ihrer Website hinzufügen
Standardmäßig wird, sobald Sie in TranslatePress eine zweite Sprache hinzufügen, automatisch ein schwebendes Dropdown-Menü zur Sprachauswahl im Frontend Ihrer Website eingeblendet. Dieses begleitet den Nutzer im Grunde auf jeder Seite.
Sie können auch eine Sprachumschalter-Kurzcode auf jede Seite oder jedes Widget. Es gibt auch einen Menüpunkt für den Sprachwechsler. Sie können all diese Elemente einfach anpassen und auswählen, welche sichtbar sein sollen.
Den Rest Ihrer Visual Composer-Website übersetzen
Wie Sie inzwischen sicher bemerkt haben, ist die Übersetzung von Visual-Composer-Websites mit TranslatePress wirklich intuitiv und schnell.
Sie navigieren einfach durch die Website, Seite für Seite, über den visuellen Übersetzungseditor, wählen einen bestimmten Text oder ein Element aus, fahren Sie mit der Maus darüber und klicken Sie auf das Bleistiftsymbol, und geben Sie dann Ihre Übersetzung ein. Speichern Sie und fahren Sie mit dem nächsten fort.
Wenn Sie dies für die restlichen Zeichenfolgen tun, haben Sie Ihre Seite im Handumdrehen übersetzt.
Das war’s schon. Die Erstellung einer mehrsprachigen Website mit Visual Composer in Verbindung mit TranslatePress ist einfacher denn je.
Süßes Angebot von Visual Composer
Und damit es noch besser wird, freuen wir uns, euch einen exklusiven Rabattcode mit 20% OFF auf alle Visual Composer Premium-Versionen.
Nutzen Sie den Gutscheincode TRANSLATEPRESS an der Kasse und erhalten Sie Zugriff auf den Visual Composer Hub, um exklusive Elemente, Vorlagen und Erweiterungen herunterzuladen.