Il selettore di 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 MultiLipi Command Center.
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 Language Switcher.
💡 Suggerimento Pro: Entrerai nell'Editor dello Switcher, che presenta un'area di 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 il selettore si comporta all'interno del tuo DOM. Hai due modalità di distribuzione:
Modalità A: Fluttuante (Predefinito)
Comportamento: Il commutatore si sovrappone al tuo contenuto, ancorato a un angolo specifico dello schermo (ad esempio, in basso a destra).
Caso d'uso: Ideale per una visibilità immediata senza alterare il codice di layout esistente del tuo sito web.
Modalità B: Incorporato (Integrato)
Comportamento: Il commutatore viene iniettato in un elemento HTML specifico da te definito (ad esempio, all'interno della barra di navigazione o del piè di pagina).
⚠️ Il protocollo di fallback
Se il contenitore HTML specificato non viene trovato in una determinata pagina, il sistema di MultiLipi Logica di fallback riporta automaticamente il selettore alla "Modalità Fluttuante". Ciò garantisce che gli utenti non vengano mai esclusi dalla selezione della lingua, anche se il layout cambia.
3. Passaggio 2: Identità visiva (Modelli e colori)
Allinea lo switcher al Design System del tuo brand.
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 tue linee guida del 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 del testo: Garantire un elevato contrasto per l'accessibilità (conformità WCAG).
- •Colore di sfondo al passaggio del mouse: Imposta il colore di evidenziazione quando un utente sposta il cursore su un'opzione di lingua nel menu a discesa, fornendo un riscontro visivo immediato.
✨ Configura gli effetti interattivi al passaggio del mouse
Conferisci al tuo selettore di lingua un aspetto nativo e di alta qualità aggiungendo stati interattivi al passaggio del mouse.
- 1Sotto la scheda Stile visivo , individua il campo appena aggiunto Colore di sfondo al passaggio del mouse campo.
- 2. Fai clic per aprire il selettore di colori o inserisci manualmente un valore RGB/RGBA esatto per rispettare le linee guida del tuo marchio.
- 3Questo colore verrà visualizzato dinamicamente ogni volta che un utente passa con il cursore su un'opzione di lingua nel menu a discesa, garantendo un riscontro visivo immediato.
Opzioni di visualizzazione: Ordine di attivazione della lingua
Non devi più accontentarti di un elenco alfabetico. Ora puoi dare la priorità a lingue specifiche nel tuo menu a discesa in base ai tuoi mercati di riferimento principali.
Imposta l'ordine di attivazione delle lingue
- 1Scorri verso il basso fino al Ordine di attivazione delle lingue sezione nella barra laterale sinistra dell'Editor del selettore.
- 2Vedrai un elenco a blocchi di tutte le tue lingue di destinazione attive (ad es.
IT,AR,FI,FR). - 3Fai clic sul Su (↑) e Giù (↓) frecce accanto a ciascun blocco di lingua per riorganizzarne la priorità di visualizzazione.
- 4La lingua posizionata in cima a questo elenco apparirà per prima quando un utente apre il menu a discesa.
💡 Suggerimento Pro: Fissa la tua lingua con il traffico più elevato nella posizione superiore. Ad esempio, se la maggior parte dei tuoi visitatori internazionali proviene dalla Germania, posizionando DE per primo si riducono i clic necessari per passare da una lingua all'altra, migliorando l'esperienza utente e riducendo la frequenza di rimbalzo sulle pagine tradotte.
4. Passaggio 3: Stile avanzato (CSS personalizzato)
Per gli sviluppatori che richiedono un controllo preciso, è possibile iniettare regole CSS personalizzate direttamente nello 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:
/* 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 per lo sviluppatore: Il CSS personalizzato ti consente di sovrascrivere qualsiasi proprietà visiva mantenendo la logica funzionale dello switcher. Questo è particolarmente utile per abbinare sistemi di design complessi o implementare variazioni in 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
Fai clic Salva per inviare istantaneamente le modifiche al tuo sito di produzione live.
Reset
Se hai bisogno di ricominciare, usa il Reset funzione per tornare agli stili predefiniti di MultiLipi.
✅ Successo: Il tuo language switcher è ora attivo! Le modifiche si propagano istantaneamente su tutte le pagine in cui MultiLipi è distribuito. Non è necessaria la pulizia della cache o l'aggiornamento della pagina per la maggior parte delle configurazioni.