Der Sprachumschalter ist das primäre Navigationselement für Ihren internationalen Traffic. MultiLipi bietet einen Dual-Interface-Editor, mit dem Sie das Verhalten und die Ästhetik dieses Elements unabhängig für Desktop- und Mobil-Ansichten steuern können.
Diese Anleitung behandelt die Konfiguration von Layouts, Positionierung, und Marken-Styling über das MultiLipi Command Center.
1. Zugriff auf den Interface-Editor
Um mit der Anpassung Ihrer Frontend-Integration zu beginnen:
- 1Navigieren Sie zu Ihrem MultiLipi Dashboard.
- 2Öffnen Einstellungen aus dem linken Menü.
- 3Wählen Sie Sprachumschalter.
💡 Profi-Tipp: Sie gelangen zum Switch Editor, der eine Echtzeit-Vorschauanzeige enthält. Verwenden Sie den Schalter oben, um zwischen Desktop und Mobil Ansichten zu wechseln, um die Reaktionsfähigkeit auf verschiedenen Geräten sicherzustellen.
2. Schritt 1: Auswahl der Architektur (Positionierung)
Definieren Sie, wie sich der Schalter innerhalb Ihres DOM verhält. Sie haben zwei Bereitstellungsmodi:
Modus A: Schwebend (Standard)
Verhalten: Der Umschalter schwebt über Ihrem 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 ändern.
Modus B: Eingebettet (Integriert)
Verhalten: Der Umschalter wird in ein bestimmtes HTML-Element eingefügt, das Sie definieren (z. B. in der Navigationsleiste oder im Footer).
⚠️ Das Fallback-Protokoll
Wenn Ihr angegebener HTML-Container auf einer bestimmten Seite nicht gefunden werden kann, wird MultiLipis Fallback-Logik wechselt automatisch zurück zum "Schwebenden Modus". Dies stellt sicher, dass Benutzer nie vom Sprachwechsel ausgeschlossen werden, selbst wenn sich das Layout ändert.
3. Schritt 2: Visuelle Identität (Vorlagen & Farben)
Richten Sie den Umschalter an Ihrem Markendesignsystem aus.
Vorlagenauswahl
Wählen Sie aus unserer Bibliothek von vorkonfigurierten UI-Mustern, um die Ästhetik Ihrer Website anzupassen:
Farbpaletten-Integration
Überschreiben Sie Standardstile, um sie an Ihre Markenrichtlinien anzupassen, indem Sie den integrierten Farbwähler oder rohe RGB-Werte verwenden:
- •Hintergrundfarbe: Passen Sie die Stile Ihrer Navigationsleiste oder Schaltfläche an.
- •Textfarbe: Stellen Sie einen hohen Kontrast für Barrierefreiheit sicher (WCAG-Konformität).
4. Schritt 3: Erweiterte Stile (Benutzerdefiniertes CSS)
Für Entwickler, die pixelgenaue Kontrolle benötigen, können Sie benutzerdefinierte CSS-Regeln direkt in den Shadow 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 Flaggen-Symbol 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 ermöglicht es Ihnen, jede visuelle Eigenschaft zu überschreiben und gleichzeitig die funktionale Logik des Umschalters beizubehalten. Dies ist besonders nützlich, um komplexe Designsysteme abzugleichen oder Dark-Mode-Varianten zu implementieren.
5. Bereitstellung & Verifizierung
Sobald Ihre Konfiguration abgeschlossen ist:
Vorschau
Wechseln Sie im Editor zwischen Desktop- und Mobilmodus, um die visuelle Konsistenz zu überprüfen.
Speichern
Klicken Sie auf Speichern um die Änderungen sofort auf Ihre Live-Produktionsseite zu übertragen.
Zurücksetzen
Wenn Sie von vorne beginnen müssen, verwenden Sie die Zurücksetzen Funktion, um zu den Standard-MultiLipi-Stilen zurückzukehren.
✅ Erfolg: Ihr Sprachumschalter ist jetzt live! Änderungen werden sofort auf allen Seiten verbreitet, auf denen MultiLipi eingesetzt wird. Für die meisten Konfigurationen ist kein Cache-Löschen oder Seitenaktualisierung erforderlich.