Il selettore della lingua è l'elemento di navigazione principale per il tuo traffico internazionale. MultiLipi fornisce un editor a doppia interfaccia, che ti consente di controllare il comportamento e l'estetica di questo elemento in modo indipendente per i 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 dell'Interfaccia
Per iniziare a personalizzare la tua integrazione frontend:
- 1Naviga al tuo Dashboard MultiLipi.
- 2Apri Impostazioni dal menu di sinistra.
- 3Seleziona Selettore lingua.
💡 Suggerimento Pro: Entrerai nell'Editor Switch, che presenta un'anteprima in tempo reale. Usa l'interruttore in alto per passare da Desktop e Mobile visualizzazioni per garantire la reattività su tutti i dispositivi.
2. Passaggio 1: Selezione dell'architettura (Posizionamento)
Definisci come si comporta lo switcher all'interno del tuo DOM. Hai due modalità di distribuzione:
Modalità A: Fluttuante (Predefinita)
Comportamento: L'interruttore si posiziona sopra i tuoi contenuti, ancorato a un angolo specifico dello schermo (es. in basso a destra).
Caso d'uso: Ideale per visibilità immediata senza alterare il codice di layout esistente del tuo sito web.
Modalità B: Incorporata (Integrata)
Comportamento: Lo switcher viene iniettato in un elemento HTML specifico che definisci (ad esempio, all'interno della barra di navigazione o del piè di pagina).
☠☠ Il Protocollo di Riserva
Se il tuo contenitore HTML specificato non viene trovato in una particolare pagina, MultiLipi Logica di fallback ripristina automaticamente l'switcher alla "Modalità Fluttuante". Ciò garantisce che gli utenti non vengano mai bloccati dalla selezione della lingua, anche se il layout cambia.
3. Passaggio 2: Identità visiva (Modelli e colori)
Allinea lo switcher con il Design System del tuo marchio.
Selezione del Modello
Scegli dalla nostra libreria di pattern UI preconfigurati per abbinare l'estetica del tuo sito:
Integrazione Palette
Sovrascrivi gli stili predefiniti per adattarli alle linee guida del tuo brand utilizzando il Selettore Colore integrato o i valori RGB grezzi:
- •Colore di sfondo: Abbina gli stili della tua barra di navigazione o dei tuoi pulsanti.
- •Colore testo: Garantire un elevato contrasto per l'accessibilità (conformità WCAG).
4. Passaggio 3: Stile avanzato (CSS personalizzato)
Per gli sviluppatori che richiedono un controllo pixel-perfect, è possibile iniettare regole CSS personalizzate direttamente nel shadow DOM del widget.
Selettori CSS comuni:
#dynamicDropdown- Mira al contenitore principale dell'elenco a discesa.#lang-switcher-selected-lang .fi- Mira all'icona della bandiera della lingua attualmente selezionata.
Configurazione di esempio:
/* Rimuove il raggio del bordo per un design netto e squadrato */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Personalizza lo sfondo del menu a discesa */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}✨ Nota per lo Sviluppatore: Il CSS personalizzato ti consente di sovrascrivere qualsiasi proprietà visiva mantenendo la logica funzionale dell'interruttore. Questo è particolarmente utile per adattarsi a sistemi di design complessi o implementare variazioni della modalità scura.
5. Distribuzione e verifica
Una volta completata la configurazione:
Anteprima
Passa tra le modalità Desktop e Mobile nell'editor per verificare la coerenza visiva.
Salva
Clicca Salva per inviare le modifiche al tuo sito di produzione live istantaneamente.
Ripristina
Se è necessario ricominciare, utilizzare Ripristina funzione per ripristinare gli stili predefiniti di MultiLipi.
✅ Successo: Il tuo language switcher è ora attivo! Le modifiche si propagano istantaneamente in tutte le pagine in cui MultiLipi è distribuito. Non è necessaria la cancellazione della cache o l'aggiornamento della pagina per la maggior parte delle configurazioni.