Der Sprachumschalter ist das primäre Navigationselement für Ihren internationalen Verkehr. MultiLipi bietet einen Editor mit zwei Schnittstellen, mit dem Sie das Verhalten und die Ästhetik dieses Elements unabhängig für Desktop- und Mobilansichten steuern können.
Dieser Leitfaden behandelt die Konfiguration von Layouts , Positionierung und Markendesign über das MultiLipi Command Center.
1. Zugriff auf den Interface-Editor
Um mit der Anpassung Ihrer Frontend-Integration zu beginnen:
- 1 Navigiere zu deinem MultiLipi Dashboard .
- 2 Offen Einstellungen Aus dem linken Menü.
- 3 Auswählen Sprachumschalter .
💡 Profi-Tipp: Sie betreten den Switch Editor, der eine Echtzeit-Vorschau-Leinwand bietet. Benutze den Schalter oben zum Wechseln zwischen ihnen Desktop und Mobil Ansichten, um eine Reaktionsfähigkeit über Geräte hinweg sicherzustellen.
2. Schritt 1: Auswahl der Architektur (Positionierung)
Definiere, wie sich der Switcher innerhalb deines DOM verhält. Du hast zwei Einsatzmodi:
Modus A: Schwebend (Standard)
Verhalten: Der Switcher schwebt über deinem Inhalt und ist an einer bestimmten Ecke des Bildschirms verankert (z. B. unten rechts).
Anwendungsfall: Am besten für sofortige Sichtbarkeit, ohne den bestehenden Layout-Code Ihrer Website zu verändern.
Modus B: Eingebettet (Integriert)
Verhalten: Der Switcher wird in ein bestimmtes HTML-Element eingefügt, das du definiert (z. B. innerhalb der Navigationsleiste oder des Fußes).
⚠️ Das Rückfallprotokoll
Wenn Ihr angegebener HTML-Container auf einer bestimmten Seite nicht gefunden werden kann, ist MultiLipi Rückfall-Logik setzt den Schalter automatisch auf "Floating Mode" zurück. Dies stellt sicher, dass Nutzer niemals von der Sprachauswahl ausgeschlossen werden, selbst wenn sich das Layout ändert.
3. Schritt 2: Visuelle Identität (Vorlagen & Farben)
Richten Sie den Switcher auf das Design System Ihrer Marke aus.
Vorlagenauswahl
Wählen Sie aus unserer Bibliothek vorkonfigurierter UI-Muster, die zum Stil Ihrer Seite passen:
Palettenintegration
Überschreiben Sie Standardstile, um Ihre Markenrichtlinien mit dem integrierten Farbwähler oder den rohen RGB-Werten zu überschreiben:
- • Hintergrundfarbe: Passen Sie Ihre Navigationsleiste oder Tastenstile an.
- • Textfarbe: Sicherstellen Sie einen hohen Kontrast für die Barrierefreiheit (WCAG-Konformität).
4. Schritt 3: Erweitertes Styling (benutzerdefiniertes CSS)
Für Entwickler, die pixelgenaue Steuerung benötigen, kann man benutzerdefinierte CSS-Regeln direkt in das Schatten-DOM des Widgets einfügen.
Gängige CSS-Selektoren:
#dynamicDropdown- Zielt auf den Hauptcontainer der Dropdown-Liste.#lang-switcher-selected-lang .fi- Zielt auf das Flaggensymbol der aktuell ausgewählten Sprache.
Beispielkonfiguration:
/* Remove border radius for a sharp, square design */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Customize the dropdown background */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 Entwicklerhinweis: Benutzerdefiniertes CSS erlaubt es, jede visuelle Eigenschaft zu überschreiben und gleichzeitig die funktionale Logik des Switchers beizubehalten. Dies ist besonders nützlich, um komplexe Designsysteme abzugleichen oder Dunkelmodus-Variationen umzusetzen.
5. Einsatz & Verifizierung
Sobald Ihre Konfiguration abgeschlossen ist:
Vorschau
Wechsle im Editor zwischen Desktop- und Mobilmodus, um die visuelle Konsistenz zu überprüfen.
Retten
Klicken Retten Um die Änderungen sofort auf Ihren Live-Produktionsstandort zu verschieben.
Zurücksetzen
Wenn du neu anfangen musst, nutze die Zurücksetzen Funktion zur Rückkehr zu den Standard-MultiLipi-Stilen.
✅ Erfolg: Dein Sprachwechsel ist jetzt aktiv! Änderungen breiten sich sofort auf allen Seiten aus, auf denen MultiLipi eingesetzt wird. Für die meisten Konfigurationen ist kein Cache-Leeren oder Seitenaktualisieren erforderlich.