MultiLipi offre oltre 20 modelli di selettore lingua integrati per iniziare rapidamente. Tuttavia, se desideri che il tuo selettore lingua corrisponda perfettamente all'estetica unica del tuo marchio, puoi utilizzare il nostro CSS personalizzato funzionalità per sovrascrivere gli stili predefiniti.
Nel tuo Editor Switcher, fai semplicemente clic sul Modifica CSS pulsante in alto sullo 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 il "trucco e i vestiti" del 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 differenzino 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 l'editor del tuo switcher
Accedi alla tua dashboard MultiLipi e vai alle impostazioni del tuo selettore di lingua.
Fai clic sul Pulsante " Modifica CSS"
Cerca il pulsante Custom CSS nella parte superiore dell'interfaccia dell'Editor Switcher.
Copia il tuo 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 adattarli al tuo brand. Spiegheremo di seguito le personalizzazioni comuni.
Salva e Anteprima
Fai clic su "Salva modifiche" e visualizza in anteprima il tuo selettore live sul tuo sito web!
5 modelli di design premium
Fai clic su "Copia codice" per ottenere istantaneamente il CSS. Questi snippet si rivolgono al predefinito .ml-switcher-container e .ml-switcher-btn classi.
1. La "Pillola Enterprise"
L'atmosfera: Un classico trigger a discesa, denso di informazioni, progettato per creare fiducia. Utilizza bordi puliti, ombre morbide e sottili interazioni al passaggio del mouse per dare un aspetto solido e professionale.
✨ Ideale per: Siti aziendali, SaaS B2B, Finanza e Sanità
/* Stile il pulsante di commutazione principale */
.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;
}
/* Stile il menu a discesa */
.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;
}
/* Stile le singole voci della lingua */
.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 e 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: Marchi di alta moda, marchi di lusso, riviste editoriali e portfolio di 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 elegante pillola, evidenziando la lingua attiva con un effetto di morphing con sfondo blu tenue.
✨ Ideale per: Startup tecnologiche moderne, app per consumatori e landing page minimaliste
/* Stile del wrapper del contenitore principale */
.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;
}
/* Stile dei singoli pulsanti a pillola */
.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;
}
/* Stato della lingua attiva */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. Il "Terminale Tecnologico Oscuro"
L'atmosfera: Ispirato da strumenti per sviluppatori e piattaforme Web3. Utilizza un tema scuro ad alto contrasto, un elegante layout di font monospace-hybrid e un sottile bagliore blu elettrico al passaggio del mouse.
✨ Ideale per: documentazione per sviluppatori, progetti Web3, piattaforme crypto e SaaS con modalità scura
/* Stile il pulsante di commutazione principale */
.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;
}
/* Stile il menu a discesa */
.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;
}
/* Stile le singole voci della lingua */
.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 "Focus centrato" (trucco CSS)
L'atmosfera: Ispirato da enormi marchi globali. Questo brillante hack CSS costringe un menu a discesa standard a staccarsi ed espandersi in un overlay a schermo intero e sfocato con schede linguistiche centrate.
✨ Ideale per: Imprese globali, e-commerce di grandi dimensioni, suite software complesse
/* 1. Stile il pulsante principale di attivazione */
.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. L'HACK: Trasforma il menu a tendina in un overlay a schermo intero */
.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;
/* Centra gli elementi al centro dello schermo */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Rimuovi lo stile predefinito del menu a tendina */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Stile i singoli elementi del menu a tendina come grandi schede modali */
.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;
}
/* Stato hover per le schede modali */
.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 adattarli perfettamente al tuo brand? Ecco le personalizzazioni più comuni che puoi apportare:
🎨 Cambiare Colori
Cerca codici colore come #3B82F6 o rgba(59, 130, 246, 0.5). Sostituisci questi con i colori del tuo brand.
Esempio: Cambia background: #3B82F6; A background: #FF6B6B; (colore del tuo brand)
📏 Regolazione delle Dimensioni
Cambiamento padding, dimensione del carattereo border-radius valori per rendere il pulsante più grande o più piccolo.
Esempio: padding: 8px 16px; → padding: 12px 24px; (pulsante più grande)
✍️ Modifica dei Caratteri
Aggiornamento font-family per abbinare la tipografia del tuo sito web.
Esempio: font-family: 'Inter'; → font-family: 'Roboto';
Migliori Pratiche e Suggerimenti per l'Ottimizzazione
Test sui Dispositivi Mobili
Anteprima sempre il tuo switcher personalizzato su telefoni cellulari e tablet. Oltre il 60% del traffico web globale è mobile.
Usa Contrasti Elevati per l'Accessibilità
Assicurati che testo e sfondo abbiano un contrasto di colore sufficiente (punta a un rapporto di 4,5:1) per gli utenti con disabilità visive.
Mantieni le Animazioni Sottili
Animazioni appariscenti possono distrarre gli utenti. Attieniti a transizioni fluide inferiori a 0,3 secondi.
Evita di Sovrascrivere Funzionalità Core
Non nascondere completamente lo switcher 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 font inferiori a 12px: gli utenti non riescono a leggere testi minuscoli
Dimenticare di testare su browser diversi (Chrome, Safari, Firefox)
Copiare CSS da fonti non attendibili — utilizzare sempre modelli ufficiali
Non salvare un backup prima di apportare modifiche importanti
Impatto sulle prestazioni
Tutti questi design CSS sono ultra-leggero 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 mirano al predefinito .ml-switcher-container e .ml-switcher-btn classi. Regola i nomi delle classi se stai utilizzando un template di base radicalmente diverso.