MultiLipi Ti offre il pieno controllo sull'aspetto e sul comportamento del selettore di lingua, sia per desktop che per dispositivi mobili. Che tu stia puntando a una perfetta integrazione del design o a un'accessibilità più visibile, la personalizzazione del tuo switcher può migliorare l'esperienza dell'utente e mantenere la coerenza del design tra le pagine multilingue.

Guida all'installazione passo passo

1. Passare alle impostazioni del selettore di lingua

Per iniziare a personalizzare il selettore di lingua:

  • Vai al tuo Cruscotto MultiLipi

  • Selezionare Selettore di lingua dal Impostazioni nel menu a sinistra.
    Navigazione nella barra laterale che evidenzia l'opzione delle impostazioni del selettore di lingua

2. Modifica il layout e l'aspetto dello switcher

Una volta all'interno dell'editor di interruttori, vedrai una dashboard dedicata con opzioni di personalizzazione per entrambi Desktop e Mobile Interfacce. Pannello Switch Editor con le opzioni di attivazione/disattivazione Desktop e Mobile

3. Modello (stile switcher)

Scegli tra gli stili di switcher predefiniti che meglio si adattano all'interfaccia utente del tuo sito web: Elenco a discesa dello stile del selettore di lingua con modelli predefiniti

4. Posizionamento dello switcher

Imposta la posizione del selettore di lingua sullo schermo:

  • Galleggiante (posizionamento in base agli angoli, ad esempio in basso a sinistra)
  • Incluso (inserito in un elemento HTML specifico)

La logica di fallback garantisce che lo switcher torni a essere mobile se il punto incorporato non viene trovato.

Opzioni di posizione per il selettore di lingua, incluso il posizionamento mobile e incorporato

5. Personalizza i colori dello switcher

Scegli la tua tavolozza di colori in modo che corrisponda al tuo marchio. Mettere:

  • Colore di sfondo
  • Colore del testo

Utilizzare i valori RGB o il selettore colore integrato. Pannello di personalizzazione del colore per il selettore di lingua

6. CSS personalizzato avanzato (opzionale)

Per un controllo completo, inserisci le tue regole CSS per modellare lo switcher esattamente come desideri.

Esempio:

Css- CopiaModifica

#lang-switcher-selected-lang .fi {

raggio del bordo: 0px;

}

#dynamicDropdown {

/* i tuoi stili */

}

Area di testo CSS personalizzata per la personalizzazione avanzata del selettore di lingua

7. Salva o ripristina

  • Clic Salvare per applicare le modifiche.

  • Clic Resettare per ripristinare la progettazione predefinita.

Anteprima finale

Tutte le personalizzazioni vengono visualizzate istantaneamente in anteprima in tempo reale, consentendoti di passare dalla modalità desktop a quella mobile per garantire la coerenza tra i tipi di dispositivi.

Avvolgendo

L'editor del selettore di lingua in MultiLipi ti consente di:

  • Scegli il tuo stile di visualizzazione ideale
  • Regola la posizione esatta
  • Abbina i colori al tema del tuo sito web
  • Usa CSS personalizzati per la massima flessibilità

Perfeziona la tua esperienza utente per un pubblico multilingue, il tutto in pochi clic.