Der „Sprachumschalter“ ist die Brücke des Benutzers zu Ihrer lokalisierten Infrastruktur. MultiLipi unterstützt zwei verschiedene Injektionsmethoden, um ein Gleichgewicht zwischen einfacher Bereitstellung und Designintegrität zu schaffen. Sie können ihn als persistenten schwebenden Überlagerung (am besten für einen schnellen Start) oder als tief integriertes eingebettetes Element (am besten für benutzerdefiniertes Design) bereitstellen.
Diese Anleitung beschreibt die Navigationsschritte und technischen Unterschiede zwischen beiden Strategien.
1. Konfigurationsprotokoll (Navigation)
Zugriff auf die Benutzeroberflächen-Steuerelemente.
Um die Positionierungsstrategie zu konfigurieren, folgen Sie diesem Pfad in Ihrem Command Center:
Schritt 1: Dashboard aufrufen
Melden Sie sich bei Ihrem MultiLipi-Konto an, um zur Startansicht zu gelangen.
Schritt 2: Projekt auswählen
Klicken Sie auf die spezifische Projektkachel für die Website, die Sie konfigurieren möchten.
Schritt 3: Einstellungen aufrufen
Klicken Sie in der linken Seitenleiste auf Einstellungen.
Schritt 4: Modul lokalisieren
Wählen Sie aus dem Untermenü oder der Einstellungsliste Sprachumschalter.
Aktion:
Hier sehen Sie die Option, zwischen den Modi „Schwebend“ und „Eingebettet“ zu wechseln.
2. Der schwebende Umschalter (Overlay-Modus)
Schnelle Bereitstellung durch JS-Injektion.
Was ist das?
Der schwebende Schalter ist ein autonomes Widget, das über JavaScript in das DOM eingefügt wird. Es befindet sich auf der Z-Achse über dem Inhalt Ihrer Website und ist an einer Ecke des Viewports verankert.
Positionierung: Konfigurierbar für jedes der vier Quadranten:
- •Unten links (Standard) / Unten rechts
- •Oben links / Oben rechts
Architektonischer Vorteil:
- •Null Code: Keine HTML-Bearbeitung erforderlich. Funktioniert sofort nach der Skript-Injektion.
- •Universelle Kompatibilität: Garantiert die Darstellung auf jeder Plattform (WordPress, Shopify, Webflow) ohne Beeinträchtigung des Layout-Flusses.
- •Mobilfreundlich: Passt sich automatisch an und positioniert sich für kleinere Ansichten neu.
Ideal für: Teams, die eine "Plug-and-Play"-Lösung benötigen, ohne einen Frontend-Entwickler einzubinden.
3. Der eingebettete Umschalter (Integrationsmodus)
Nahtlose DOM-Einfügung.
Was ist das?
Der eingebettete Umschalter ermöglicht es Ihnen, den Sprachumschalter direkt in einen bestimmten Container innerhalb Ihrer HTML-Struktur einzufügen, wie z. B. Ihre Navigationsleiste (
Der Mechanismus: Sie geben einen spezifischen CSS-Selektor (ID oder Klasse) im MultiLipi-Dashboard an.
Beispiel-Eingabe: #menu-language-item oder .navbar-right.
Die Aktion: Unser Skript scannt das DOM nach diesem spezifischen Selektor und rendert den Umschalter innerhalb dieses Elements, wobei die Layoutbeschränkungen seines übergeordneten Elements übernommen werden.
Ideal für: Designer, die pixelgenaue Kontrolle benötigen und möchten, dass sich der Schalter wie ein nativer Bestandteil des UI-Menüsystems anfühlt.
4. Das Failover-Protokoll (Sicherheitslogik)
Sicherstellung der Verfügbarkeit der Benutzeroberfläche.
In dynamischen Webumgebungen können IDs und Klassen variieren. Was passiert, wenn Sie einen eingebetteten Umschalter bereitstellen, der auf #nav-lang abzielt, aber Ihr Entwickler benennt diese ID versehentlich in #nav-menu um?
MultiLipi führt ein automatisches Failover durch:
- •Scannen: Das Skript versucht, den Ziel-CSS-Selektor zu lokalisieren.
- •Fehler: Wenn das Ziel nicht gefunden wird (null), meldet das Skript einen Fehler.
- •Wiederherstellung: Es wird automatisch zum schwebenden Modus zurückgekehrt.
- •Ergebnis: Der Umschalter erscheint in der standardmäßigen schwebenden Position (z. B. unten rechts), sodass der Benutzer immer noch die Sprache ändern kann, auch wenn das Layout beschädigt ist.
- •Fehlerbehebung: Eine Konsolenwarnung wird protokolliert, damit Ihre Entwickler den Selektor beheben können.