Wie lässt sich die Sprachumschaltung anpassen?

Um sich an Ihre Grafik-Charter anzupassen, ist es möglich, das Aussehen der Sprachauswahl zu personalisieren. Dafür bietet wpLingua viele Design-Optionen sowie die Freiheit, Ihren eigenen CSS hinzuzufügen.

1 - Anpassen des Sprachwählers mit Designoptionen

Wenn Sie zum wpLingua gehen > Switcher Registerkarte, finden Sie einen Bildschirm mit den verschiedenen Anpassungsmöglichkeiten. Das Switcher Design Panel bietet Ihnen 4 Arten von Optionen:

1.1 - Thema des Sprachwählers

So können Sie die Farbe und die Bordüre des Sprachschalters auswählen.

Die Farboptionen bieten 5 Themen:

1. Licht: weiße Farbe im Hintergrund des Schalters
2. Grau: graue Hintergrundfarbe
3. Dunkel: schwarze Hintergrundfarbe
4. Blau Schwarz: transparente und unscharfe Hintergrundfarbe mit schwarzem Text und Bordüren
5. Blur White: transparente und unscharfe Hintergrundfarbe mit weißem Text und Rand

Jedes Thema wird dann nach Form und Grenzstil aufgeschlüsselt:

6. Doppelt glatt: der Switcher wird von einem doppelten Rand mit abgerundeten Ecken umrahmt.
7. Doppelplatz: doppelte Grenze mit quadratischen Ecken.
8. Einfache glatte: Einzelrahmen mit abgerundeten Ecken.
9. Einfaches Quadrat: einzelne Grenze mit quadratischen Ecken.

1.2 - Stile der Sprachauswahl

Mit diesen Optionen können Sie das Layout der Sprachen im Switcher definieren...

1. Inline-Liste: die Sprachen nebeneinander stehen.
2. Block: die Sprachen werden in Spalten platziert, eine unter der anderen.
3. Dropdown: die Sprachen erscheinen in einem Dropdown-Menü; dies wird empfohlen, wenn Ihre Website mehrere Sprachen anbietet.

1.3 - Angezeigte Bezeichnung

Mit diesen Optionen können Sie wählen, wie der Sprachname im Switcher geschrieben werden soll.

1. Name: der Name der Sprachen wird in die Originalsprache der Website übersetzt.
2. Ursprünglicher Name: jede Sprache behält ihren Namen in ihrer eigenen Sprache (Englisch, Français, 日本語, Português, Español, etc.)
3. Sprachennummer: Sprachbezeichnungen verwenden Sprach-ID (FR, EN, DE, RU, etc.)
4. Keine Anzeige: Kein Text, nur Flags werden angezeigt.

1.4 - Flaggenstil

Mit diesen Optionen können Sie das Erscheinungsbild der Flags im Switcher wählen.

1. Kreis wird runde Flaggen anzeigen
2. Rechteckig wird rechteckige Flaggen anzeigen
3. Welle wird gewellte Flaggen zeigen
4. Keine Anzeige wird keine Flags angezeigt, nur der Sprachname wird angezeigt

2 - Anpassen der Flagge des Schalters

Über die Form der Fahnen hinaus können Sie auch das Flag auswählen, um nach Sprache anzuzeigen. Dies kann ein Wunsch sein, eine andere Flagge als herkömmliche Flaggen zu verwenden. Zum Beispiel können Sie die Flagge der Vereinigten Staaten oder Australien für die englische Sprache, anstelle der Flagge von Großbritannien. Oder die von Kanada oder Belgien für die französische Sprache, statt der Flagge von Frankreich... Das ist möglich!

2.1 - Wählen Sie Ihre bevorzugte Flagge

1. Gehen Sie zu wpLingua > wpLingua Registerkarte.
2. Klicken Sie auf Flag bearbeiten.
3. Wählen Sie Ihre Lieblingsflagge und vergessen Sie nicht, Ihre Änderungen zu speichern.
4. Es ist auch möglich, eine personalisierte Flagge zu verwenden, die Sie stromaufwärts in Ihre Mediathek importieren.

2.2 - Eigene Flaggen verwenden

Verwendung benutzerdefinierte Flaggen, Sie müssen sie zuerst in Ihre Mediathek importieren, wie folgt:

1. Gehe zu Media > Registerkarte Bibliothek und klicken Sie auf Neue Mediendatei hinzufügen.
2. Importieren Sie Ihre Flagge dann auf sie klicken, um die Medien zu öffnen. Jetzt können Sie auf URL in die Zwischenablage kopieren klicken.
3. Gehen Sie zu wpLingua > wpLingua Registerkarte, um die benutzerdefinierte Flag URL einzufügen. Änderungen speichern.
4. Jetzt zeigt Ihr Switcher die neue Flagge an.

Wiederholen Sie bei Bedarf für jede Sprache.

3 - Anpassen des Sprachwählers mit CSS

Wenn Sie möchten, dass das Design des Sprachschalters Ihrer Grafikcharter entspricht, können Sie es mit benutzerdefiniertem CSS personalisieren. Natürlich müssen Sie einige Kenntnisse über CSS haben, obwohl wir Ihnen unten einige Tipps geben, ideal, wenn Sie neu zu CSS sind.

3.1 - Die Konsole des Browsers inspizieren

Die Browser-Konsole ist Ihr bester Freund. Es wird Ihnen helfen, den personalisierten CSS zu testen und seine visuelle Darstellung live zu sehen. Hier ist, wie es zu tun:

1. Besuchen Sie das vordere Ende Ihrer Website von Ihrem Browser und rechten Klick, dann wählen Sie die Option Inspect. Hier ist ein Beispiel mit Firefox, aber andere Browser funktionieren in der gleichen Weise.
2. Klicken Sie auf das Pfeilsymbol. Dieses Tool ermöglicht es Ihnen, einfach das Element zu inspizieren. Verwenden Sie es übrigens, um den Sprachschalter zu inspizieren (klicken Sie nach dem Klicken auf das Werkzeug Pfeil).
3. Links von der Konsole befindet sich der HTML-Code, bei Bedarf können Sie navigieren, um andere HTML-Tags auszuwählen.
4. Rechts von der Konsole befindet sich der CSS-Code. Auch wenn Sie kein CSS-Witz sind, können Sie leicht das Aussehen in Echtzeit ändern. Ändern Sie zum Beispiel den hexadezimalen Farbcode von Randfarben, Texten oder Hintergründen... Keine Sorge, die Änderungen werden nicht berücksichtigt, es ist nur, um das Aussehen zu testen, wenn Sie die Seite neu laden, kehrt die Website zu seinem ursprünglichen Zustand zurück. Nutzen Sie die Gelegenheit, den Switcher nach Ihren Vorlieben zu ändern.
5. In Echtzeit visualisieren Sie das neue Erscheinungsbild des Sprachschalters nach Ihren CSS-Modifikationen.

3.2 - Bringen Sie den CSS-Code in die Einstellungen von wpLingua ein

3.3 - Einige nützliche CSS-Auszüge

Um Ihnen zu helfen, dachten wir, diese paar CSS-Code-Schnipsel könnten helfen:

Zunächst sei darauf hingewiesen, dass die CSS-Klasse .switcher-content ermöglicht es Ihnen, auf dem gesamten Block des Sprachschalters zu handeln, während die Klasse .wplng-langague Sie können auf den Sprachen selbst handeln.

---

Für dieses Beispiel wurde der Schalter mit dem Thema Licht definiert. Um den Hintergrund und die Randfarben des Switchers zu ändern, ist hier der CSS:

.wplng-switcher.theme-light-double-square .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

Um den Hintergrund und die Randfarben der Sprachen zu ändern, ist hier der CSS:

.wplng-switcher.theme-light-double-square .switcher-content .wplng-language {
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

---

Aber wenn Sie das Licht gewählt hatten, einfach, glatt Thema zum Beispiel, werden Sie feststellen, dass eine der CSS Klassen ändert (.theme-light-simple-smooth), so berücksichtigen, wenn Sie Ihre Änderungen (daher die Bedeutung der Verwendung der Browser-Konsole für die Suche nach den richtigen CSS-Klassen). Hier ist der Code, den Sie verwenden sollten:

.wplng-switcher.theme-light-simple-smooth .switcher-content {
  background-color: #5e33d9;
  border: 1px solid #5e33d9;
}

.wplng-switcher.theme-light-simple-smooth .switcher-content .wplng-language {
  background-color: #ffffff;
  border: 1px solid #5e33d9;
  color: #5e33d9;
}

Ansonsten können Sie den Code auf diese Weise vereinfachen, um alle CSS-Klassen zu vermeiden, ohne zu vergessen, hinzuzufügen !important für bestimmte Regeln. Das Ergebnis ist dasselbe:

.switcher-content {
  background-color: #5e33d9 !important;
  border: 1px solid #5e33d9 !important;
}

.wplng-language {
  background-color: #ffffff !important;
  border: 1px solid #5e33d9 !important;
  color: #5e33d9 !important;
}

---

Auf diese Weise können Sie alles ändern, was der CSS-Code erlaubt: fügen Sie Schatten, Übergänge, Zustände auf Mouseover, etc. hinzu.

/* add a shadow to the switcher */

.switcher-content {
  box-shadow: 5px 5px 0px 0px #5e33d9;
  transition: 500ms ease;
}

/* obtain a rounded switcher */

.switcher-content {
  border-radius: 100px;
}

---

Und um mit dem benutzerdefinierten CSS-Code zu beenden, ist hier der auf unserer Website verwendete:

.switcher-content {
  box-shadow: 8px 8px 0px 0px #bcfa99;
  transition: 500ms ease;
	
}

.switcher-content:hover {
  box-shadow: 10px 10px 0px 0px #bcfa99;
}

.switcher-content .wplng-languages .wplng-language:hover .language-name {
  color: #bcfa99;
}

4 - Wählen Sie die Position des Sprachwählers aus

Nun, da Ihr Sprachschalter vollständig angepasst ist, ist es Zeit, seinen Standort auf Ihrer Website zu definieren!

4.1 - Sprachauswahl automatisch anzeigen

Gehen Sie zum wpLingua > Schalter > Switcher einfügen Tab, um einen vordefinierten Ort zu wählen.

4.2 - Fügen Sie die Sprachauswahl manuell mit einem Shortcode ein.

4.3 - Einfügen des Sprachwählers in das Navigationsmenü eines klassischen Designs

4.4 - Einfügen des Sprachwählers in das Navigationsmenü eines blockbasierten Designs

5 - Passen Sie den Sprachselektor mit wpLingua vollständig an!

Wir hoffen, dass dieser Leitfaden Ihnen ein klares und umfassendes Verständnis der Anpassung des Sprachschalters in wpLingua vermittelt hat.

Denken Sie daran, die Flexibilität und Anpassungsmöglichkeiten von wpLingua sind so konzipiert, dass Ihre Website nicht nur effektiv in mehreren Sprachen kommuniziert, sondern auch eine kohärente und ansprechende Ästhetik pflegt.

Sollten Sie weitere Fragen haben oder zusätzliche Hilfe benötigen, ist unser Support-Team immer hier um zu helfen. Ihr Feedback und Ihre Erkenntnisse sind für uns von unschätzbarem Wert, da wir kontinuierlich bestrebt sind, wpLingua zu verbessern.