MultiLipi offre oltre 20 modelli di selettore di lingua integrati per iniziare rapidamente. Tuttavia, se desideri che il tuo selettore di lingua corrisponda perfettamente all'estetica unica del tuo brand, puoi utilizzare la nostra CSS Personalizzato funzionalità per sovrascrivere gli stili predefiniti.
Nell'Editor del selettore, fai semplicemente clic sul pulsante Modifica CSS nella parte superiore dello schermo e incolla il tuo codice.
Per aiutarti a trarre ispirazione, il nostro team di progettazione ha creato 5 modelli CSS premium. Copia semplicemente gli snippet di codice qui sotto e incollali nel tuo editor CSS personalizzato!
Cos'è il CSS personalizzato e perché dovresti usarlo?
CSS (Cascading Style Sheets) è il linguaggio di design che controlla l'aspetto dei siti web. Pensalo come "trucco e abbigliamento" per il tuo sito web. Con CSS personalizzato, puoi cambiare colori, forme, animazioni, ombre e altro ancora, senza toccare alcun codice complesso.
Coerenza del marchio
Abbina i colori esatti del tuo brand, i font e le linee guida di stile
Distinguersi
Crea design unici che ti differenziano dai concorrenti
Nessun sviluppatore necessario
Copia e incolla codice pronto all'uso: non sono richieste competenze di programmazione
Ottimizzato per la SEO
Tutti i design sono ottimizzati per prestazioni e accessibilità
Come Applicare Questi Design (Passo dopo Passo)
Apri il tuo Editor Switcher
Accedi alla tua dashboard MultiLipi e naviga nelle impostazioni del tuo Language Switcher.
Fai clic sul pulsante " Modifica CSS"
Cerca il pulsante CSS personalizzato nella parte superiore dell'interfaccia del tuo Editor Switcher.
Copia il Design Scelto
Scorri verso il basso fino ai modelli di design sottostanti e fai clic sul pulsante "Copia Codice" sul tuo stile preferito.
Incolla il Codice
Incolla il codice CSS copiato nel pannello dell'editor CSS personalizzato.
Personalizza (Opzionale)
Regola colori, dimensioni o font per abbinarli al tuo brand. Spiegheremo le personalizzazioni comuni di seguito.
Salva e Anteprima
Fai clic su "Salva modifiche" e visualizza in anteprima il tuo switcher sul tuo sito web!
5 Modelli di Design Premium
Fai clic su "Copia codice" per ottenere istantaneamente il CSS. Questi snippet mirano alle classi predefinite .ml-switcher-container e .ml-switcher-btn .
1. La "Pillola Enterprise"
L'atmosfera: Un classico trigger a discesa, ricco di informazioni, progettato per creare fiducia. Utilizza bordi puliti, ombre morbide e sottili interazioni al passaggio del mouse per apparire solido e professionale.
✨ Ideale per: Siti aziendali, SaaS B2B, Finanza e Sanità
/* Style the main toggle button */
.ml-switcher-container {
background-color: #ffffff !important;
border-radius: 50px !important;
padding: 8px 16px !important;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.ml-switcher-container:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
border-color: #cbd5e1 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 6px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 8px !important;
color: #475569 !important;
font-family: 'Inter', sans-serif !important;
transition: background 0.2s, color 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: #f8fafc !important;
color: #0f172a !important;
}2. Il "Testo Editoriale" Inline
L'atmosfera: Design minimalista, incentrato sul testo, che utilizza un'elegante tipografia serif e zero bordi. Si basa su un delicato sottolineato animato per mostrare l'interattività senza interrompere l'estetica del sito.
✨ Ideale per: Alta moda, marchi di lusso, riviste editoriali e portfolio boutique
/* Rimuovi tutti i contenitori di sfondo */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Stile dei pulsanti di testo */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Grigio smorzato */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* La Sottolineatura Animata */
.ml-switcher-btn::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background-color: #000000 !important;
transition: width 0.3s ease-in-out !important;
}
.ml-switcher-btn:hover {
color: #000000 !important;
}
.ml-switcher-btn:hover::after {
width: 100% !important;
}3. La "Dynamic Island"
L'atmosfera: Un design mobile-first che stilizza l'interruttore come una pillola elegante, evidenziando la lingua attiva con un effetto di morphing su sfondo blu tenue.
✨ Ideale per: Startup tecnologiche moderne, app consumer e landing page minimaliste
/* Style the main container wrapper */
.ml-switcher-container {
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 50px !important;
padding: 4px !important;
box-shadow: 0 4px 12px rgba(0,0,0,0.04) !important;
}
/* Style the individual pill buttons */
.ml-switcher-btn {
color: #64748b !important;
font-family: 'Inter', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 6px 16px !important;
border-radius: 50px !important;
transition: all 0.2s !important;
}
.ml-switcher-btn:hover {
background: #f8fafc !important;
color: #0f172a !important;
}
/* Active Language State */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. Il "Dark Tech Terminal"
L'atmosfera: Ispirato agli strumenti per sviluppatori e alle piattaforme Web3. Utilizza un tema scuro ad alto contrasto, un layout di font monospace-hybrid elegante e un sottile bagliore blu elettrico al passaggio del mouse.
✨ Ideale per: Documentazione per sviluppatori, progetti Web3, piattaforme crypto e SaaS in modalità scura
/* Style the main toggle button */
.ml-switcher-container {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 8px 16px !important;
color: #9ca3af !important;
font-family: 'Space Mono', monospace !important;
transition: all 0.3s ease !important;
}
.ml-switcher-container:hover {
border-color: #3b82f6 !important;
color: #f3f4f6 !important;
}
/* Style the dropdown menu */
.ml-switcher-dropdown {
background: #111827 !important;
border: 1px solid #1f2937 !important;
border-radius: 6px !important;
padding: 6px !important;
box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
/* Style the individual language items */
.ml-switcher-dropdown-item {
border-radius: 4px !important;
color: #6b7280 !important;
font-family: 'Space Mono', monospace !important;
font-size: 12px !important;
transition: all 0.2s !important;
}
.ml-switcher-dropdown-item:hover {
background: rgba(59, 130, 246, 0.1) !important;
color: #e5e7eb !important;
}5. La modale "Centered Focus" (CSS Hack)
L'atmosfera: Ispirato da marchi globali di grandi dimensioni. Questo brillante CSS hack costringe un menu a discesa standard a staccarsi ed espandersi in un overlay a schermo intero e sfocato con schede linguistiche centrate.
✨ Ideale per: Aziende globali, e-commerce di grandi dimensioni, suite software complesse
/* 1. Style the main trigger button */
.ml-switcher-container {
background: #ffffff !important;
border: 1px solid #d1d5db !important;
padding: 10px 20px !important;
border-radius: 8px !important;
font-family: 'Inter', sans-serif !important;
font-weight: 500 !important;
color: #374151 !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}
.ml-switcher-container:hover {
background: #f9fafb !important;
}
/* 2. THE HACK: Turn the dropdown into a full-screen overlay */
.ml-switcher-dropdown {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.6) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* Center the items in the middle of the screen */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Remove default dropdown styling */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Style the individual language items as large modal cards */
.ml-switcher-dropdown-item {
background: #ffffff !important;
border: 1px solid transparent !important;
border-radius: 12px !important;
padding: 16px 24px !important;
margin: 6px 0 !important;
width: 90% !important;
max-width: 400px !important;
text-align: center !important;
font-family: 'Inter', sans-serif !important;
font-size: 16px !important;
font-weight: 500 !important;
color: #111827 !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
transition: all 0.2s ease !important;
}
/* Hover state for the modal cards */
.ml-switcher-dropdown-item:hover {
border-color: #3b82f6 !important;
color: #2563eb !important;
transform: translateY(-2px) !important;
box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15) !important;
}Guida alla personalizzazione semplice (per utenti non tecnici)
Vuoi modificare questi design per abbinarli perfettamente al tuo marchio? Ecco le personalizzazioni più comuni che puoi effettuare:
🎨 Modifica dei colori
Cerca i codici colore come #3B82F6 o rgba(59, 130, 246, 0.5). Sostituisci questi con i colori del tuo marchio.
Esempio: Modifica background: #3B82F6; a background: #FF6B6B; (il colore del tuo marchio)
📏 Regolazione delle dimensioni
Modifica padding, font-size, o border-radius i valori per rendere il pulsante più grande o più piccolo.
Esempio: padding: 8px 16px; → padding: 12px 24px; (pulsante più grande)
✍️ Modifica dei caratteri
Aggiorna font-family per adattarlo alla tipografia del tuo sito web.
Esempio: font-family: 'Inter'; → font-family: 'Roboto';
Best Practices e suggerimenti di ottimizzazione
Testa sui dispositivi mobili
Visualizza sempre in anteprima il tuo selettore personalizzato su telefoni cellulari e tablet. Oltre il 60% del traffico web globale è mobile.
Usa un elevato contrasto per l'accessibilità
Assicurati che il testo e lo sfondo abbiano un contrasto di colore sufficiente (punta a un rapporto di 4.5:1) per gli utenti con problemi di vista.
Mantieni le animazioni discrete
Le animazioni appariscenti possono distrarre gli utenti. Attieniti a transizioni fluide inferiori a 0,3 secondi.
Evita di sovrascrivere la funzionalità principale
Non nascondere completamente il selettore o renderlo non cliccabile. Gli utenti devono potervi accedere facilmente.
Abbina il tema del tuo sito web
Scegli un design che completi il design del tuo sito esistente. Non farlo risaltare in modo imbarazzante.
Errori comuni da evitare
Usare troppe animazioni contemporaneamente: rallenta il tuo sito
Impostare dimensioni dei caratteri inferiori a 12px: gli utenti non possono leggere testi minuscoli
Dimenticare di testare su browser diversi (Chrome, Safari, Firefox)
Copiare CSS da fonti non attendibili: usa sempre modelli ufficiali
Non salvare un backup prima di apportare modifiche importanti
Impatto sulle prestazioni
Tutti questi design CSS sono ultraleggeri e non rallenteranno il tuo sito web. Il CSS viene renderizzato istantaneamente dal browser e questi stili aggiungono meno di 2KB alla dimensione della tua pagina.
Per riferimento, 2KB è circa la dimensione di una singola emoji. La velocità del tuo sito web e i tuoi posizionamenti SEO rimarranno invariati. ✨
Nota: Questi snippet prendono di mira il predefinito .ml-switcher-container e .ml-switcher-btn classi. Modificare i nomi delle classi se si utilizza un modello di base radicalmente diverso.