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).
- •Hintergrundfarbe beim Überfahren: Legt die Hervorhebungsfarbe fest, wenn ein Benutzer den Mauszeiger über eine Sprachoption im Dropdown-Menü bewegt – für sofortiges taktiles Feedback.
✨ Interaktive Hover-Effekte konfigurieren
Verleihen Sie Ihrem Sprachumschalter ein hochwertiges, natives Gefühl, indem Sie interaktive Hover-Zustände hinzufügen.
- 1Unter dem Visuelle Gestaltung Tab finden Sie die neu hinzugefügte Hintergrundfarbe beim Überfahren Feld.
- 2Klicken Sie, um den Farbwähler zu öffnen, oder geben Sie manuell einen exakten RGB/RGBA Wert ein, der Ihren Markenrichtlinien entspricht.
- 3Diese Farbe wird dynamisch angezeigt, wenn ein Benutzer den Mauszeiger über eine Sprachoption im Dropdown-Menü bewegt, und bietet sofortiges taktiles Feedback.
Anzeigeoptionen: Reihenfolge der Sprachumschalter
Sie müssen sich nicht mehr mit einer alphabetischen Liste zufriedengeben. Sie können jetzt bestimmte Sprachen in Ihrem Dropdown basierend auf Ihren primären Zielmärkten priorisieren.
Legen Sie die Reihenfolge der Sprachumschalter fest
- 1Scrollen Sie nach unten zum Reihenfolge der Sprachumschalter Abschnitt in der linken Seitenleiste des Umschalter-Editors.
- 2Sie sehen eine Blockliste aller Ihrer aktiven Zielsprachen (z. B.
EN,AR,FI,FR). - 3Klicken Sie auf die Hoch (↑) und Runter (↓) Pfeile neben jedem Sprachblock, um deren Anzeigepriorität neu anzuordnen.
- 4Die Sprache, die oben in dieser Liste platziert wird erscheint zuerst, wenn ein Benutzer das Dropdown-Menü öffnet.
💡 Profi-Tipp: Pinnen Sie Ihre meistbesuchte Sprache an die oberste Stelle. Wenn beispielsweise die meisten Ihrer internationalen Besucher aus Deutschland kommen, reduziert die Platzierung von DE an erster Stelle die Klicks, die zum Wechseln benötigt werden – verbessert die Benutzererfahrung und reduziert die Absprungrate auf Ihren übersetzten Seiten.
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.