Il cambiatore di lingua è l'elemento principale di navigazione per il tuo traffico internazionale. MultiLipi offre un editor a doppia interfaccia, che permette di controllare indipendentemente il comportamento e l'estetica di questo elemento per le viewport Desktop e Mobile.
Questa guida copre la configurazione di Layout , Posizionamento e Stile del marchio tramite il Centro di Comando MultiLipi.
1. Accesso all'Editor di Interfaccia
Per iniziare a personalizzare la tua integrazione frontend:
- 1 Naviga verso il tuo Cruscotto MultiLipi .
- 2 Open Impostazioni dal menu a sinistra.
- 3 Selezionare Selettore di lingua .
💡 Suggerimento professionale: Accederai all'Editor Switch, che offre una tela di anteprima in tempo reale. Usa il toggle in alto per passare da uno all'altro Desktop e Mobile Viste per garantire la reattività su tutti i dispositivi.
2. Passo 1: Selezione dell'architettura (posizionamento)
Definisci come si comporta il switcher all'interno del tuo DOM. Hai due modalità di dispiegamento:
Modalità A: Fluttuante (Predefinita)
Comportamento: Lo switcher si posiziona sopra i tuoi contenuti, ancorato a un angolo specifico dello schermo (ad esempio, in basso a destra).
Caso d'uso: È ideale per una visibilità immediata senza modificare il codice di layout esistente del tuo sito.
Modalità B: Embedded (Integrato)
Comportamento: Lo switcher viene inserito in uno specifico elemento HTML che definisci (ad esempio, all'interno della barra di navigazione o del Footer).
⚠️ Il Protocollo di Riserva
Se il contenitore HTML specificato non si trova su una pagina particolare, MultiLipi Logica di Riserva riporta automaticamente il commutatore in "Modalità Fluttuante." Questo garantisce che gli utenti non vengano mai bloccati dalla selezione della lingua, anche se il layout cambia.
3. Passo 2: Identità Visiva (Modelli e Colori)
Allinea lo switcher al Design System del tuo marchio.
Selezione del Modello
Scegli dalla nostra libreria di modelli UI preconfigurati per adattarsi all'estetica del tuo sito:
Integrazione della Palette
Sovrascrivi gli stili predefiniti per farli rispecchiare delle linee guida del tuo brand usando il Color Picker integrato o i valori RGB grezzi:
- • Colore di sfondo: Abbina lo stile della barra di navigazione o dei pulsanti.
- • Colore del testo: Garantire un alto contrasto per l'accessibilità (conformità WCAG).
4. Passo 3: Styling avanzato (CSS personalizzato)
Per gli sviluppatori che richiedono un controllo pixel-perfect, puoi iniettare regole CSS personalizzate direttamente nel DOM ombra del widget.
Selezionatori CSS comuni:
#dynamicDropdown- Mira al contenitore principale della lista a tendina.#lang-switcher-selected-lang .fi- Mira all'icona della bandiera della lingua attualmente selezionata.
Configurazione di esempio:
/* 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);
}💎 Nota dello sviluppatore: Il CSS personalizzato ti permette di sovrascrivere qualsiasi proprietà visiva mantenendo la logica funzionale dello switcher. Questo è particolarmente utile per abbinare sistemi di progettazione complessi o per implementare variazioni in modalità scura.
5. Dispiegazione e verifica
Una volta completata la configurazione:
Anteprima
Alterna tra modalità Desktop e Mobile nell'editor per verificare la coerenza visiva.
Salvare
Clic Salvare Di spingere istantaneamente i cambiamenti al sito di produzione live.
Resettare
Se devi ricominciare da capo, usa il Resettare funzione per tornare agli stili predefiniti di MultiLipi.
✅ Successo: Il tuo cambio di lingua è ora attivo! I cambiamenti si propagano istantaneamente su tutte le pagine in cui MultiLipi è implementato. Nessuna pulizia della cache o aggiornamento della pagina necessaria per la maggior parte delle configurazioni.