MultiLipi propose plus de 20 modèles de sélecteurs de langue intégrés pour vous permettre de démarrer rapidement. Cependant, si vous souhaitez que votre sélecteur de langue corresponde parfaitement à l'esthétique unique de votre marque, vous pouvez utiliser nos CSS personnalisé fonction pour remplacer les styles par défaut.
Dans votre éditeur de sélecteur, cliquez simplement sur Modifier le CSS bouton en haut de l'écran et collez votre code.
Pour vous aider à vous inspirer, notre équipe de conception a créé 5 modèles CSS premium. Copiez simplement les extraits de code ci-dessous et collez-les dans votre éditeur CSS personnalisé !
Qu'est-ce que le CSS personnalisé et pourquoi devriez-vous l'utiliser ?
CSS (Cascading Style Sheets) est le langage de conception qui contrôle l'apparence des sites web. Considérez-le comme le "maquillage et les vêtements" de votre site web. Avec le CSS personnalisé, vous pouvez changer les couleurs, les formes, les animations, les ombres, et plus encore — sans toucher à aucun code complexe.
Cohérence de la marque
Adaptez vos couleurs, polices et directives de style exactes à votre marque
Démarquez-vous
Créez des designs uniques qui vous différencient de vos concurrents
Aucun développeur requis
Copiez et collez du code prêt à l'emploi — aucune compétence en codage requise
Optimisé pour le SEO
Tous les modèles sont optimisés pour la performance et l'accessibilité
Comment appliquer ces conceptions (étape par étape)
Ouvrir l'éditeur de sélecteur
Connectez-vous à votre tableau de bord MultiLipi et accédez aux paramètres de votre sélecteur de langue.
Cliquez sur le bouton " Modifier le CSS"
Recherchez le bouton CSS personnalisé en haut de votre interface d'édition Switcher.
Copiez la conception choisie
Faites défiler vers le bas jusqu'aux modèles de conception ci-dessous et cliquez sur le bouton "Copier le code" de votre style préféré.
Coller le code
Collez le code CSS copié dans le panneau de l'éditeur CSS personnalisé.
Personnaliser (facultatif)
Ajustez les couleurs, les tailles ou les polices pour correspondre à votre marque. Nous expliquerons les personnalisations courantes ci-dessous.
Enregistrer et prévisualiser
Cliquez sur "Enregistrer les modifications" et prévisualisez votre sélecteur en direct sur votre site web !
5 Modèles de conception premium
Cliquez sur "Copier le code" pour récupérer instantanément le CSS. Ces extraits ciblent le... .ml-switcher-container et .ml-switcher-btn classes.
1. La "Pilule Entreprise"
L'ambiance : Un déclencheur de menu déroulant classique et dense en informations, conçu pour instaurer la confiance. Il utilise des bordures épurées, des ombres douces et des interactions subtiles au survol pour paraître solide et professionnel.
✨ Idéal pour : Sites d'entreprise, SaaS B2B, Finance et Santé
/* 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. Le texte "éditorial" en ligne
L'ambiance : Design minimaliste et centré sur le texte utilisant une typographie serif élégante et sans bordures. Il repose sur un léger soulignement animé pour montrer l'interactivité sans perturber l'esthétique du site.
✨ Idéal pour : marques de haute couture, de luxe, magazines éditoriaux et portfolios de boutiques
/* Supprimer tous les conteneurs d'arrière-plan */
.ml-switcher-container {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Styliser les boutons texte */
.ml-switcher-btn {
background: transparent !important;
color: #a1a1aa !important; /* Gris atténué */
font-family: 'Playfair Display', serif !important;
font-weight: 400 !important;
font-size: 18px !important;
position: relative !important;
transition: color 0.3s ease !important;
}
/* La ligne de soulignement animée */
.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'ambiance : Une conception mobile d'abord qui stylise le commutateur comme une pilule élégante, mettant en évidence la langue active avec un effet de morphing doux sur fond bleu.
✨ Idéal pour : Startups technologiques modernes, applications grand public et pages de destination minimalistes
/* 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. Le « Terminal Tech Sombre »
L'ambiance : Inspiré par les outils de développement et les plateformes Web3. Il utilise un thème sombre à fort contraste, une disposition de polices hybrides monospace élégante et une subtile lueur bleu électrique au survol.
✨ Idéal pour : Documentation développeur, projets Web3, plateformes crypto et SaaS en mode sombre
/* 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" (astuce CSS)
L'ambiance : Inspiré par des marques mondiales massives. Ce brillant hack CSS force un menu déroulant standard à se détacher et à s'étendre en une superposition plein écran et floue avec des cartes de langue centrées.
✨ Idéal pour : Grandes entreprises mondiales, e-commerce massif, suites logicielles complexes
/* 1. Style du bouton principal de déclenchement */
.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. LE HACK : Transformer le menu déroulant en superposition plein écran */
.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;
/* Centrer les éléments au milieu de l'écran */
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Supprimer le style par défaut du menu déroulant */
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: 9999 !important;
}
/* 3. Style des éléments de langue individuels comme de grandes cartes modales */
.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;
}
/* État au survol des cartes modales */
.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;
}
Guide de personnalisation facile (pour les utilisateurs non techniques)
Vous souhaitez modifier ces conceptions pour qu'elles correspondent parfaitement à votre marque ? Voici les personnalisations les plus courantes que vous pouvez apporter :
🎨 Changer les couleurs
Recherchez des codes de couleur comme #3B82F6 ou rgba(59, 130, 246, 0.5). Remplacez celles-ci par les couleurs de votre marque.
Exemple : Modifier background: #3B82F6; À background: #FF6B6B; (votre couleur de marque)
📏 Ajustement des tailles
Changement padding, font-sizeou border-radius valeurs pour agrandir ou réduire le bouton.
Exemple: padding: 8px 16px; → padding: 12px 24px; (bouton plus grand)
✍️ Changer les polices
Mettre à jour font-family pour correspondre à la typographie de votre site web.
Exemple: font-family: 'Inter'; → font-family: 'Roboto';
Meilleures pratiques et conseils d'optimisation
Tester sur les appareils mobiles
Prévisualisez toujours votre sélecteur personnalisé sur les téléphones mobiles et les tablettes. Plus de 60 % du trafic web mondial est mobile.
Utiliser le contraste élevé pour l'accessibilité
Assurez-vous que le texte et l'arrière-plan ont un contraste de couleurs suffisant (visez un ratio de 4,5:1) pour les utilisateurs malvoyants.
Garder les animations subtiles
Les animations tape-à-l'œil peuvent distraire les utilisateurs. Privilégiez des transitions fluides inférieures à 0,3 seconde.
Éviter de remplacer les fonctionnalités de base
Ne masquez pas complètement le sélecteur et ne le rendez pas non cliquable. Les utilisateurs doivent y accéder facilement.
Adaptez à l'apparence de votre site web
Choisissez une conception qui complète la conception de votre site existant. Ne la faites pas ressortir de manière maladroite.
Erreurs courantes à éviter
Utiliser trop d'animations à la fois — cela ralentit votre site
Définir des tailles de police inférieures à 12px - les utilisateurs ne peuvent pas lire un texte minuscule
Oublier de tester sur différents navigateurs (Chrome, Safari, Firefox)
Copie de CSS provenant de sources non fiables—utilisez toujours les modèles officiels
Ne pas sauvegarder une copie de sauvegarde avant d'apporter des modifications majeures
Impact sur les performances
Toutes ces conceptions CSS sont ultra-léger et ne ralentiront pas votre site Web. Le CSS est rendu instantanément par le navigateur, et ces styles ajoutent moins de 2 Ko à la taille de votre page.
Pour référence, 2 Ko correspondent à peu près à la taille d'un seul emoji. La vitesse de votre site Web et votre classement SEO resteront inchangés. ✨
Note: Ces extraits ciblent le défaut .ml-switcher-container et .ml-switcher-btn classes. Ajustez les noms de classe si vous utilisez un modèle de base radicalement différent.