So richten Sie einen Sprachumschalter auf Bubble.io ein

von Aorinka Anendya
1. August 2024

Blog > Anleitung > So richten Sie einen Sprachumschalter auf Bubble.io ein

Das Festlegen eines Sprachumschalters auf der Bubble.io -Website kann Benutzern den Wechsel der Sprache erleichtern. Diese Funktion ist besonders wertvoll für Anwendungen mit einem globalen Publikum, da sie es Benutzern ermöglicht, in ihrer bevorzugten Sprache mit der Plattform zu interagieren. Bubble.io, eine beliebte No-Code-Entwicklungsplattform, bietet integrierte Lokalisierungsfunktionen, die es Entwicklern ermöglichen, mehrsprachige Anwendungen ohne umfassende Programmierkenntnisse zu erstellen.

Um einen Sprachumschalter in Bubble.io zu implementieren, definieren Entwickler normalerweise zunächst die Sprachen, die sie in den Einstellungen der App unterstützen möchten. Anschließend erstellen sie ein Dropdown- oder Schaltflächenelement, mit dem Benutzer interagieren können, um die Sprache zu ändern. In diesem Artikel besprechen wir die Einrichtung eines Sprachumschalters auf Bubble.io mit einer der Websites automatischer Übersetzungsdienste.

Warum ist ein Sprachumschalter auf der Bubble.io-Website wichtig?

Das Hinzufügen eines Sprachumschalters auf einer Website ist nicht ohne Grund. Hier erfahren Sie, warum Sie eine Bubble-Website auf einer Bubble-Website einrichten müssen.

Erleichtert es Benutzern in anderen Ländern: Ein Sprachumschalter ermöglicht es internationalen Benutzern, die Website in ihrer Muttersprache anzuzeigen. Beispielsweise kann ein spanischer Benutzer, der einen Online-Shop besucht, auf Spanisch wechseln, um Produktdetails besser zu verstehen und Einkäufe abzuschließen. Studien von CSA Research zeigen, dass 76 % der Online-Käufer den Kauf von Produkten bevorzugen, wenn die Informationen in ihrer Sprache verfügbar sind, was die Bedeutung dieser Funktion für den Benutzerkomfort und die Zugänglichkeit unterstreicht.
Optimierung der Website in Suchergebnissen anderer Länder: Mit einem Sprachumschalter kann Ihre Bubble.io-Website bei fremdsprachigen Suchanfragen besser ranken. Beispielsweise ist es wahrscheinlicher, dass eine französische Version Ihrer Website in französischen Google-Suchanfragen erscheint. Diese verbesserte Sichtbarkeit kann den internationalen Verkehr deutlich steigern.
Steigern Sie die Verkaufskonversion: Das Anbieten von Inhalten in mehreren Sprachen kann den Umsatz steigern. Eine Online-Kursplattform, die es Benutzern ermöglicht, die Sprache zu wechseln, kann ein breiteres Publikum ansprechen und die Zahl der Anmeldungen erhöhen. Dieser Ansatz ist effektiv, da Verbraucher eher auf Websites kaufen, die Informationen in ihrer Muttersprache bereitstellen, was sich direkt auf Ihre Konversionsraten auswirkt.
Verbessert das Engagement und die Bindung der Benutzer: Ein Sprachumschalter kann Benutzer länger auf Ihrer Website halten. Beispielsweise bleiben Benutzer, die in einer Social-Networking-App in ihrer bevorzugten Sprache interagieren, tendenziell länger engagiert. Dieses erhöhte Engagement ist erheblich, da Benutzer in der Regel doppelt so viel Zeit auf Websites in ihrer Muttersprache verbringen wie auf Websites in einer zweiten Sprache, was zu einer besseren Benutzerbindung führt.

Sprachbarrieren überwinden

Verabschieden Sie sich von Sprachbarrieren und begrüßen Sie grenzenloses Wachstum! Testen Sie noch heute unseren automatischen Übersetzungsservice.

Beginnen Sie jetzt mit dem Übersetzen

So richten Sie einen Sprachumschalter auf Bubble.io ein

Nachdem wir nun verstanden haben, wie wichtig es ist, die Sprache auf mehrsprachigen Bubble.io-Websites zu wechseln, wollen wir besprechen, wie man es umsetzt. Website-Übersetzungsdienste bieten normalerweise diese Funktion an, die an die Bedürfnisse des Benutzers angepasst werden kann.

Allerdings bieten nicht alle Übersetzungsdienste anpassbare und benutzerfreundliche Sprachumschalter an. Daher ist die Wahl eines automatischen Übersetzungsdienstes, der mit verschiedenen Frameworks kompatibel ist und flexible Sprachwechselfunktionen bietet, sehr wichtig.

Ein automatischer Übersetzungsdienst, der diese Kriterien erfüllt, ist Linguise . Linguise bietet eine hochgradig anpassbare und benutzerfreundliche Sprachwechselfunktion, die sich in beliebte CMS- und Web-Builder wie Bubble.io integrieren lässt.

Linguise bietet eine nahtlose Integration mit der Bubble, sodass Entwickler die Sprachumschaltung problemlos in ihre mehrsprachigen Anwendungen integrieren können. Durch die Nutzung der erweiterten Funktionen und der benutzerfreundlichen Oberfläche von Linguise können Sie die Einrichtung und Wartung von Sprachumschaltern auf Ihrer Bubble-Website vereinfachen.

Hier sind die Schritte zum Installieren Linguise auf einer Bubble.io-Website und zum Einrichten des Sprachumschalters.

Schritt 1: Registrieren Sie ein Linguise Konto

zunächst ein kostenloses Linguise Konto und fügen Sie Ihre Website-Domain hinzu. Sie können die kostenlose 30-Tage-Testversion nutzen, bevor Sie sich für ein Abonnement entscheiden.

Anschließend müssen Sie Ihre Domain registrieren, um die Übersetzung zu autorisieren. Kopieren Sie Ihren Domainnamen, einschließlich „https://“, und wählen Sie „Andere“ als Plattform aus.

Wählen Sie als Nächstes Ihre Ausgangs- und Zielsprache aus.

Schritt 2: DNS mithilfe von Entri automatisch hinzufügen

Nachdem Sie Ihre Website im Linguise Dashboard registriert haben, stehen Ihnen zwei Installationsoptionen zur Verfügung.

Klicken Sie zum automatischen Hinzufügen von DNS-Einträgen auf „DNS automatisch verbinden“. Diese Funktion namens Entri vereinfacht den Installationsprozess, indem sie die DNS-Einträge für Sie verwaltet. Alternativ können Sie die DNS-Einträge manuell zu Ihrem Domain-Anbieter kopieren.

Durch Klicken auf die Schaltfläche wird Entri aufgefordert, die URL Ihrer registrierten Website zu analysieren, Ihre öffentlichen DNS-Einträge zu untersuchen und die erforderlichen Anbieter und DNS-Einträge zu identifizieren.

Klicken Sie anschließend auf „Autorisieren bei [Ihrem Domain-Anbieter]“ (z. B. Cloudflare). Durch diese Aktion werden Sie zur Anmeldeseite Ihres Domain-Anbieters weitergeleitet, wo Sie sich anmelden und fortfahren können.

Sobald Sie angemeldet sind, fügt Entri Ihrer Domain automatisch die entsprechenden DNS-Einträge hinzu – einen DNS pro Sprache und einen TXT-DNS für den Validierungsschlüssel.

Nach der Autorisierung benachrichtigt Sie Entri, dass alle DNS-Einstellungen erfolgreich konfiguriert wurden. Die Übersetzungsfunktion sollte nutzbar sein, sobald alle DNS-Einträge auf Ihrer Domain verbreitet sind, was normalerweise 20 bis 30 Minuten dauert.

Für die manuelle Installation können Sie die unten aufgeführten Schritte ausführen.

Schritt 3: DNS-Einträge kopieren

Bei der manuellen Installation werden Sie zu einem Bildschirm weitergeleitet, auf dem die DNS-Einträge angezeigt werden, die zum Einrichten Ihrer mehrsprachigen Seiten erforderlich sind, z. B. fr.domain.com oder es.domain.com.

Kopieren Sie diese Elemente in Ihre Bubble.io-DNS-Konfiguration.

Rufen Sie als Nächstes Ihren Domänenmanager auf und navigieren Sie zum DNS-Einrichtungsbereich. Befolgen Sie zum Kopieren die Anweisungen:

Ein TXT-Eintrag zur Domain-Verifizierung
Ein oder mehrere CNAME-Einträge für die Sprachen

Hier finden Sie Beispiele für jeden Datensatztyp (TXT und CNAME).

Nachdem Sie alle Ihre Datensätze hinzugefügt haben, sollte Ihre Konfiguration wie folgt aussehen.

Schritt 4: DNS überprüfen

Nachdem Sie alle Ihre Einträge zu Ihrem Domänen-DNS hinzugefügt haben, klicken Sie auf die Schaltfläche „DNS-Konfiguration prüfen“, um die DNS-Weitergabe zu überprüfen.

Die DNS-Validierung dauert normalerweise etwa 30 Minuten bis 1 Stunde. Sobald der Vorgang abgeschlossen ist, sollten neben der DNS-Liste im Linguise Dashboard grüne Indikatoren angezeigt werden. Sie sind fast bereit, Ihre Bubble.io-Website zu übersetzen; Es bleibt nur noch die Verlinkung zum Sprachumschalter mit Länderflaggen.

Schritt 5: Aktivieren und Sprachumschalter

Der Sprachumschalter ist ein Flaggen-Popup, mit dem Benutzer ihre bevorzugte Sprache auswählen können. Um es zu implementieren, kopieren Sie den Code, der am Ende des Domain-Registrierungsprozesses oder in den Domain-Einstellungen bereitgestellt wird, in den Header Ihrer Bubble.io-Site-Seiten. Der Flaggen-Sprachumschalter erscheint dann automatisch auf Ihrer öffentlichen Website.

Gehen Sie als Nächstes zu Ihrem Bubble-Website-Panel. Klicken Sie im linken Seitenleistenmenü „Einstellungen“

Scrollen Sie nach unten zu „Skript-/Meta-Tags im Header“ unter „Erweiterte Einstellungen“. Fügen Sie das zuvor kopierte Linguise

Schritt 5: Hauptanzeige konfigurieren

Um mit der Einrichtung des Sprachumschalters zu beginnen, navigieren Sie im Linguise „Einstellungen“ > „Anzeige der Sprachflaggen“ . Auf dieser Seite können Sie verschiedene Einstellungen anpassen

Stil des Flaggensymbols: Wählen Sie aus drei Optionen: Anzeige nebeneinander, Dropdown-Menü oder Popup.
Position: Wählen Sie aus, wo der Sprachumschalter auf Ihrer Website erscheinen soll. Es stehen verschiedene Positionsmöglichkeiten zur Verfügung; Stellen Sie sicher, dass es für Besucher leicht zugänglich ist.

Sie können die Anzeige von Flaggen und Sprachnamen, Flaggen und Sprachabkürzungen oder nur Sprachnamen kombinieren. Zur leichteren Benutzererkennung wird empfohlen, sowohl Flags als auch Sprachnamen zu verwenden.

Schritt 6: Legen Sie das Design der Flagge fest

Nachdem Sie die Hauptanzeige konfiguriert haben, können Sie das Design der angezeigten Flaggen weiter anpassen.

Sprachname anzeigen: Sie können wählen, ob der Sprachname entweder basierend auf dem Ländernamen oder dem Sprachnamen selbst angezeigt werden soll. Sie könnten beispielsweise „Französisch“ oder „Français“ anzeigen.
Englischer Flaggentyp: Diese Option ist nützlich für Sprachen mit mehreren Variationen, wie etwa US-amerikanisches oder britisches Englisch (und gilt auch für Spanisch, Taiwanesisch, Deutsch und Portugiesisch).
Flaggenstil: Wählen Sie die Form des Flaggensymbols, entweder rund oder rechteckig.

Schritt 7: Passen Sie Farbe und Größe an

Nachdem Sie das Flaggendesign konfiguriert haben, können Sie die Farbe und Größe der Flaggen weiter anpassen. Hier sind die Einstellungen, die Sie anpassen können:

Flaggenrandradius: Passen Sie den Radius in Pixeln für den rechteckigen Flaggenstil an.
Farbe des Sprachnamens: Wählen Sie die Standardtextfarbe zur Anzeige des Sprachnamens.
Farbe der Popup-Sprache: Legen Sie die Farbe des Sprachtiteltexts im Popup- oder Dropdown-Bereich fest.
Flaggengröße: Passen Sie die Größe der Flaggensymbole an.
Hover-Farbe für den Sprachnamen: Legen Sie die Textfarbe fest, die angezeigt wird, wenn der Benutzer mit der Maus über den Sprachnamen fährt.
Hover-Farbe der Popup-Sprache: Legen Sie die Textfarbe fest, die angezeigt wird, wenn der Benutzer mit der Maus über den Sprachtitel im Popup- oder Dropdown-Bereich fährt.

Schritt 8: Einstellen des Flag-Box-Schattens

Schließlich können Sie die Schatteneinstellungen des Flaggenfelds anpassen. Mit der ersten Option können Sie auf jedes auf Ihrer Website angezeigte Flaggensymbol einen Schatteneffekt anwenden. Die nächste Option steuert den Schatteneffekt, wenn Benutzer mit der Maus über die Sprachflaggen fahren.

Wenn Sie alle gewünschten Anpassungen vorgenommen haben, klicken Sie auf die Schaltfläche „Speichern“, um die Anpassungsänderungen zu übernehmen. Besuchen Sie dann Ihre Bubble-Website, um zu überprüfen, ob die Konfiguration erfolgreich angewendet wurde. So wird der Sprachumschalter angezeigt.

Nach der Einrichtung können Sie sehen, wie der Sprachumschalter auf Ihrer mehrsprachigen Bubble-Website funktioniert.

Als nächstes können Sie die Website in andere Sprachen wie Spanisch übersetzen.

Best Practices zur Optimierung des Sprachumschalters auf Bubble.io

Nachdem Sie den Sprachumschalter auf einer mehrsprachigen Bubble-Website erfolgreich eingerichtet haben, ist es wichtig, Tipps zur Optimierung des Sprachumschalters sowohl für Ihre Website als auch für Besucher zu berücksichtigen.

Verwenden Sie ein leicht erkennbares Sprachflaggenlogo

Bei der Implementierung eines Sprachumschalters auf Ihrer Bubble.io-Website ist die Verwendung leicht erkennbarer Sprachflaggen oder -symbole von entscheidender Bedeutung. Diese visuellen Hinweise helfen Benutzern, ihre bevorzugte Sprache schnell zu identifizieren und auszuwählen. Beispielsweise wird allgemein verstanden, dass ein Globussymbol Sprachoptionen darstellt. Alternativ könnten Sie auch Landesflaggen verwenden. Beachten Sie jedoch, dass dies manchmal problematisch sein kann, da Sprachen nicht immer an ein einzelnes Land gebunden sind.

Beispiel: Die Website von Amazon verwendet in der oberen Navigationsleiste ein kleines Globussymbol neben der aktuell ausgewählten Sprache (z. B. „EN“). Dieser einfache, aber effektive Ansatz ermöglicht es Benutzern, die Sprachoptionen unabhängig von ihrer aktuellen Spracheinstellung schnell zu finden.

Integrieren Sie Sprachnamen neben Flaggen

Obwohl Flaggen hilfreich sein können, sollten sie nicht allein verwendet werden. Die Angabe des Namens der Sprache in ihrer nativen Schrift neben der Flagge oder dem Symbol sorgt für Klarheit und vermeidet mögliche Verwirrung. Dies ist besonders wichtig für Sprachen, die in mehreren Ländern oder Regionen gesprochen werden.

Beispiel: Der Sprachumschalter auf der Airbnb-Website zeigt den Sprachnamen und die Landesflagge an. Es zeigt beispielsweise „English (US)“ mit der US-Flagge und „Français“ mit der französischen Flagge. Diese Kombination stellt sicher, dass Benutzer ihre bevorzugte Sprachoption genau identifizieren können.

Positionieren Sie die Sprachumschalttaste sorgfältig

Die Platzierung Ihres Sprachumschalters ist für die Benutzerzugänglichkeit von entscheidender Bedeutung. Häufige Orte sind die obere rechte Ecke der Kopfzeile, die Fußzeile oder das Hauptnavigationsmenü. Der Schlüssel liegt darin, es leicht auffindbar zu machen, ohne den Hauptinhaltsbereich zu überladen.

Beispiel: Auf der Website tiffany.com befindet sich der Sprachumschalter in der unteren rechten Ecke der Seite, immer sichtbar und zugänglich. Diese konsistente Platzierung stellt sicher, dass Benutzer die Sprachoptionen schnell finden und verwenden können, unabhängig davon, wo sie sich auf der Website befinden.

Gestalten Sie den Sprachumschalter so, dass er reagiert

Stellen Sie sicher, dass Ihr Sprachumschalter auf allen Geräten gut funktioniert, vom Desktop-Computer bis zum Smartphone. Auf kleineren Bildschirmen müssen Sie möglicherweise das Design anpassen – beispielsweise durch die Verwendung eines Dropdown-Menüs anstelle einer horizontalen Liste mit Optionen.

Beispiel: Der Sprachumschalter der UNESCO-Website passt sich wunderbar an alle Geräte an. Auf dem Desktop erscheint es als horizontale Liste in der Kopfzeile. Auf Mobilgeräten verwandelt es sich in ein kompaktes Dropdown-Menü und gewährleistet so die Benutzerfreundlichkeit, ohne das mobile Layout zu beeinträchtigen.

Stellen Sie sicher, dass der Sprachumschalter auf allen Seiten konsistent ist

Behalten Sie das gleiche Design, die gleiche Funktionalität und die gleiche Position Ihres Sprachumschalters auf allen Seiten Ihrer Bubble.io-Website bei. Diese Konsistenz hilft Benutzern, effizienter auf Ihrer Website zu navigieren, da sie unabhängig von ihrer aktuellen Seite genau wissen, wo sie die Sprachoptionen finden.

Beispiel: Die Website behält ihren Sprachumschalter im Footer auf allen Seiten einheitlich bei, von der Startseite über die Produktseiten bis hin zum Checkout-Prozess. Diese Konsistenz stellt sicher, dass Benutzer während ihres Surf- oder Einkaufserlebnisses jederzeit problemlos die Sprache wechseln können.

Sind Sie bereit, neue Märkte zu erkunden? Testen Sie unseren automatischen Übersetzungsdienst kostenlos mit unserer einmonatigen, risikofreien Testversion. Keine Kreditkarte erforderlich!

Fordern Sie Ihre einmonatige kostenlose Testversion an

Richten Sie mit Linguise einen Sprachumschalter auf der mehrsprachigen Bubble-Website ein!

Jetzt wissen Sie bereits, wie Sie die Sprache für die mehrsprachige Website von Bubble.io auswählen. Das Auslesen der Sprachauswahl kann verschiedene Vorteile bieten und zu einer weiteren Optimierung auf Basis der zuvor genannten Punkte führen.

Eine effektive Optimierung der Sprachauswahl kann die Benutzererfahrung erheblich verbessern. Eröffnen Sie ein Linguise -Konto, integrieren Sie es in Ihre Bubble.io-Website und passen Sie die Sprachauswahl an, um das Benutzererlebnis zu verbessern.

So richten Sie einen Sprachumschalter auf Bubble.io ein

Warum ist ein Sprachumschalter auf der Bubble.io-Website wichtig?

So richten Sie einen Sprachumschalter auf Bubble.io ein

Schritt 1: Registrieren Sie ein Linguise Konto

Schritt 2: DNS mithilfe von Entri automatisch hinzufügen

Schritt 3: DNS-Einträge kopieren

Schritt 4: DNS überprüfen

Schritt 5: Aktivieren und Sprachumschalter

Schritt 5: Hauptanzeige konfigurieren

Schritt 6: Legen Sie das Design der Flagge fest

Schritt 7: Passen Sie Farbe und Größe an

Schritt 8: Einstellen des Flag-Box-Schattens

Best Practices zur Optimierung des Sprachumschalters auf Bubble.io

Verwenden Sie ein leicht erkennbares Sprachflaggenlogo

Integrieren Sie Sprachnamen neben Flaggen

Positionieren Sie die Sprachumschalttaste sorgfältig

Gestalten Sie den Sprachumschalter so, dass er reagiert

Stellen Sie sicher, dass der Sprachumschalter auf allen Seiten konsistent ist

Richten Sie mit Linguise einen Sprachumschalter auf der mehrsprachigen Bubble-Website ein!

Vielleicht sind Sie auch an einer Lektüre interessiert

Baidu vs. Google: Umfassender Vergleich SEO-Unterschiede

Best Practices für die Nachbearbeitung maschineller Übersetzungen

Internationales digitales Marketing: Überbrückung kultureller und geschäftlicher Lücken

Legal

Unterstützung

Produkt