MultiLipi offre plus de 20 modèles de sélecteurs de langue intégrés pour vous aider à démarrer rapidement. Cependant, si vous souhaitez que votre bascule de langue corresponde parfaitement à l'esthétique unique de votre marque, vous pouvez utiliser nos CSS personnalisé fonctionnalité pour remplacer les styles par défaut.
Dans votre éditeur de sélecteur, cliquez simplement sur le Modifier le CSS bouton en haut de l'écran et collez votre code.
Pour vous aider à trouver l'inspiration, 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 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 modifier les couleurs, les formes, les animations, les ombres, et plus encore, sans toucher à aucun code complexe.
Cohérence de la marque
Adaptez les couleurs, les polices et les directives de style exactes de votre marque
Démarquez-vous
Créez des conceptions 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
Toutes les conceptions sont optimisées pour la performance et l'accessibilité
Comment appliquer ces conceptions (étape par étape)
Ouvrir l'éditeur de votre 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 l'interface de votre éditeur de sélecteur.
Copier votre design choisi
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 qu'elles correspondent à 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-sélecteur-conteneur 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 du bouton de bascule principal */
.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 du menu déroulant */
.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 des éléments de langue individuels */
.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 "Editorial Text" Inline
L'ambiance : Design minimaliste centré sur le texte, utilisant une typographie serif élégante et zéro 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;
}
/* Le soulignement animé */
.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 du conteneur principal */
.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 des boutons individuels en forme de pilule */
.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;
}
/* État de la langue active */
.ml-switcher-btn.active {
background-color: rgba(59, 130, 246, 0.1) !important;
color: #3b82f6 !important;
font-weight: 600 !important;
}4. Le "Dark Tech Terminal"
L'ambiance : Inspiré par les outils de développement et les plateformes Web3. Il utilise un thème sombre à contraste élevé, une disposition de police élégante hybride monospace 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 "Focus Centré" (astuce CSS)
L'ambiance : Inspiré par des marques mondiales massives. Cette brillante astuce CSS force une liste déroulante standard à se détacher et à s'étendre en un aperçu plein écran et flouté avec des cartes de langue centrées.
✨ Idéal pour : Entreprises mondiales, e-commerce massif, suites logicielles complexes
/* 1. Styliser le 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. Styliser les éléments individuels du menu déroulant 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 ajuster 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 couleur comme #3B82F6 ou rgba(59, 130, 246, 0.5). Remplacez celles-ci par les couleurs de votre marque.
Exemple : Changer arrière-plan : #3B82F6 ; à arrière-plan : #FF6B6B ; (la couleur de votre marque)
📏 Ajustement des tailles
Changer remplissage, taille-police, ou rayon-bordure valeurs pour rendre le bouton plus grand ou plus petit.
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'; → police-famille : '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 un contraste élevé pour l'accessibilité
Assurez-vous que le texte et l'arrière-plan ont un contraste de couleur 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 les transitions fluides de moins de 0,3 seconde.
Éviter de remplacer la fonctionnalité principale
Ne masquez pas complètement le sélecteur et ne le rendez pas non cliquable. Les utilisateurs doivent y accéder facilement.
Adapter au thème de votre site web
Choisissez un design qui complète le design de votre site existant. Ne le 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 dans différents navigateurs (Chrome, Safari, Firefox)
Copier du CSS provenant de sources non fiables — utilisez toujours des 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.
À titre de 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. ✨
Remarque : Ces extraits ciblent le .ml-sélecteur-conteneur et .ml-switcher-btn classes. Ajustez les noms des classes si vous utilisez un modèle de base radicalement différent.