Wie kann man das Design des Sprachumschalters ändern?

In diesem Artikel erfahren Sie, wie Sie Ihre Sprachumschaltung anpassen und ihr Aussehen verändern können.

Mit Weglot können Sie das Design Ihres Sprachumschalters ändern. Dazu haben Sie mehrere Möglichkeiten:

1. Ändern Sie die Optionen der Sprachumschaltung

Wenn Sie auf Ihrem Weglot Dashboard > Projekte > Projekt auswählen > Einstellungen > Sprachumschalter gehen, haben Sie die Möglichkeit, einige Elemente und die Anzeige zu ändern:

• Der Name der Sprache (z. B. "en" für Englisch)
• Der vollständige Name der Sprache
• Die Sprachflaggen und die Art der Flaggen (Quadrat, Kreis, Rechteck)
• Die Art des Umschalters (Liste/Dropdown)

Wenn Sie hier Änderungen vornehmen, müssen Sie auf "Änderungen speichern" klicken.

Weiter unten auf der Seite finden Sie auch den Abschnitt "Erscheinungsbild der Sprachen", in den Sie die gewünschte Sprache ziehen und ihre Position in der Sprachumschaltung ändern können:

In diesem Bereich können Sie die Flaggen ändern, die auf Ihrem Sprachumschalter angezeigt werden. Sie können die Flagge eines anderen Landes oder Ihre eigene Flagge anzeigen lassen. Sie können auch das Aussehen des Sprachumschalters ändern, indem Sie die Namen der Sprachen und die angezeigten Flaggen ändern. (Siehe: Wie kann ich die Flaggen des Sprachumschalters ändern?)

2. Bearbeiten Sie den Sprachnamen und die Flagge

Um den Namen und die Flagge der Sprache zu ändern, können Sie auf dieselbe Seite gehen, d.h. auf Ihr Weglot Dashboard > Projekte > Projekt auswählen > Einstellungen > Sprachumschalter.

Gehen Sie zum Abschnitt "Erscheinungsbild der Sprachen" und verwenden Sie den Stift auf der rechten Seite.

Dort können Sie den Namen der Sprache bearbeiten, um den Namen, den Sie in Ihrem Switcher auf Ihrer Live-Website anzeigen möchten, zu erhalten:

Sobald Sie den Abschnitt "Name der lokalen Sprache" geändert haben, können Sie auf die Schaltfläche "Bearbeiten" klicken.

Um die Flagge zu ändern, stellen Sie sicher, dass Sie die Option "Sprachflaggen in der Schaltfläche anzeigen" in Ihren Switcher-Einstellungen aktiviert haben.

Klicken Sie im Abschnitt "Erscheinungsbild der Sprachen" auf "Flagge auswählen" , um eine Flagge auszuwählen (1). Sie können auch die Suchleiste (2) verwenden, um eine Flagge zu finden:

Kehren Sie nun zu Ihrer Website zurück, und Sie werden die neu hinzugefügte Flagge in der Sprachumschaltung sehen können. In unserem Beispiel sehen Sie unten die Flagge der Vereinigten Staaten von Amerika:

Wenn Sie die zuvor hinzugefügte Flagge wieder entfernen und zur ursprünglichen Flagge zurückkehren möchten, klicken Sie in der Flaggenauswahl auf"Flagge auswählen", um die Flagge zu entfernen:

3. Verwenden Sie den Switcher-Editor

Für die allgemeine Verwendung des Switcher-Editors konsultieren Sie bitte die folgende spezielle Dokumentation:

Wie wird der Switcher-Editor verwendet?

Sie finden darin mehrere Abschnitte, um Ihr eigenes Schalterdesign zu erstellen oder einige der Weglot-Vorlagen zu verwenden.

Um einen solchen zu verwenden, sehen Sie bitte im Abschnitt Switcher-Stil nach:

In diesem Bereich finden Sie eine Reihe von Vorlagen, die Sie für Ihre Website verwenden können.

Klicken Sie einfach darauf, um einen auszuwählen und ihn an der gewünschten Stelle auf Ihrer Webseite zu platzieren.

4. Hinzufügen einiger benutzerdefinierter CSS

Auf Ihrem Weglot Dashboard > Einstellungen > Sprachumschaltung haben Sie die Möglichkeit, einige benutzerdefinierte CSS hinzuzufügen:

Lassen Sie sich von verschiedenen Stilen inspirieren und fügen Sie Ihr eigenes CSS hinzu. Einige Beispiele für benutzerdefinierte CSS finden Sie im nächsten Teil.

5. Erstellen Sie Ihren eigenen benutzerdefinierten Switcher

Wenn Sie es vorziehen, einen eigenen Switcher zu haben, der zu den CSS-Codes Ihrer Website passt, können Sie einen benutzerdefinierten Switcher erstellen.

Sie müssen das Design selbst einrichten und die Weglot-Funktionen verwenden, damit die Links in den von Ihnen gewählten Sprachen angezeigt werden.

Schauen Sie sich dazu bitte unsere Entwicklerdokumentation über nützliche JavaScript-Funktionen an, die Sie verwenden können:

https://developers.weglot.com/javascript/link-hooks

Haben Sie ein Feedback zu diesem Artikel? Lassen Sie es uns wissen!