Le sélecteur de langue est l'élément de navigation principal pour votre trafic international. MultiLipi fournit un éditeur à double interface, vous permettant de contrôler le comportement et l'esthétique de cet élément indépendamment pour les vues de bureau et mobiles.
Ce guide couvre la configuration de Mises en page, Positionnement, et Style de marque via le Centre de Commande MultiLipi.
1. Accès à l'éditeur d'interface
Pour commencer à personnaliser votre intégration frontend :
- 1Naviguez vers votre Tableau de bord MultiLipi.
- 2Ouvrir Paramètres depuis le menu de gauche.
- 3Sélectionnez Sélecteur de langue.
💡 Astuce de pro : Vous entrerez dans l'éditeur de commutateurs, qui comprend une toile d'aperçu en temps réel. Utilisez le commutateur en haut pour basculer entre Ordinateur et Mobile vues pour assurer la réactivité sur tous les appareils.
2. Étape 1 : Sélection de l'architecture (Positionnement)
Définissez comment le sélecteur se comporte dans votre DOM. Vous avez deux modes de déploiement :
Mode A : Flottant (Défaut)
Comportement : Le sélecteur flotte au-dessus de votre contenu, ancré dans un coin spécifique de l'écran (par exemple, en bas à droite).
Cas d'utilisation : Idéal pour une visibilité immédiate sans modifier le code de mise en page existant de votre site web.
Mode B : Intégré (Intégré)
Comportement : Le sélecteur est injecté dans un élément HTML spécifique que vous définissez (par exemple, dans la barre de navigation ou le pied de page).
⚠️ Le Protocole de Repli
Si votre conteneur HTML spécifié ne peut pas être trouvé sur une page particulière, MultiLipi's Logique de repli restaure automatiquement le sélecteur en "Mode Flottant". Cela garantit que les utilisateurs ne sont jamais bloqués hors de la sélection de la langue, même si la mise en page change.
3. Étape 2 : Identité visuelle (Modèles et couleurs)
Alignez le commutateur avec le système de conception de votre marque.
Sélection du modèle
Choisissez parmi notre bibliothèque de modèles d'interface utilisateur préconfigurés pour correspondre à l'esthétique de votre site :
Intégration de la palette
Remplacez les styles par défaut pour correspondre aux directives de votre marque en utilisant le sélecteur de couleurs intégré ou les valeurs RVB brutes :
- •Couleur de fond : Faites correspondre les styles de votre barre de navigation ou de vos boutons.
- •Couleur du texte : Assurez un contraste élevé pour l'accessibilité (conformité WCAG).
- •Couleur d'arrière-plan au survol : Définit la couleur de surbrillance lorsqu'un utilisateur déplace son curseur sur une option de langue dans le menu déroulant, offrant un retour tactile immédiat.
✨ Configurez les effets de survol interactifs
Donnez à votre sélecteur de langue une sensation premium et native en ajoutant des états de survol interactifs.
- 1Sous l'onglet Style visuel , localisez le nouvel élément ajouté Couleur d'arrière-plan au survol champ.
- 2Cliquez pour ouvrir le sélecteur de couleur ou saisissez manuellement une valeur RGB/RGBA exacte pour respecter les directives de votre marque.
- 3Cette couleur s'affichera dynamiquement chaque fois qu'un utilisateur passera son curseur sur une option de langue dans le menu déroulant, offrant un retour tactile immédiat.
Options d'affichage : Ordre des langues
Vous n'avez plus à vous contenter d'une liste alphabétique. Vous pouvez désormais prioriser des langues spécifiques dans votre menu déroulant en fonction de vos principaux marchés cibles.
Définir l'ordre du sélecteur de langue
- 1Faites défiler jusqu'à la Ordre du sélecteur de langue section dans la barre latérale gauche de l'éditeur du sélecteur.
- 2Vous verrez une liste de blocs de toutes vos langues cibles actives (par ex.,)
EN,AR,FI,FR). - 3Cliquez sur le Haut (↑) et Bas (↓) flèches à côté de chaque bloc de langue pour réorganiser leur priorité d'affichage.
- 4La langue placée en haut de cette liste apparaîtra en premier lorsqu'un utilisateur ouvrira le menu déroulant.
💡 Astuce de pro : Épinglez votre langue générant le plus de trafic dans la position supérieure. Par exemple, si la plupart de vos visiteurs internationaux proviennent d'Allemagne, placer DE en premier réduit les clics nécessaires pour basculer — améliorant l'expérience utilisateur et réduisant le taux de rebond sur vos pages traduites.
4. Étape 3 : Style avancé (CSS personnalisé)
Pour les développeurs nécessitant un contrôle pixel par pixel, vous pouvez injecter des règles CSS personnalisées directement dans le DOM fantôme du widget.
Sélecteurs CSS courants :
#dynamicDropdown- Cible le conteneur principal de la liste déroulante.#lang-switcher-selected-lang .fi- Cible l'icône du drapeau de la langue actuellement sélectionnée.
Exemple de configuration :
/* Remove border radius for a sharp, square design */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Customize the dropdown background */
#dynamicDropdown {
background-color: #ffffff;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}💎 Note du développeur : Le CSS personnalisé vous permet de remplacer toute propriété visuelle tout en conservant la logique fonctionnelle du sélecteur. Ceci est particulièrement utile pour faire correspondre des systèmes de conception complexes ou implémenter des variations de mode sombre.
5. Déploiement et vérification
Une fois votre configuration terminée :
Aperçu
Basculez entre les modes Bureau et Mobile dans l'éditeur pour vérifier la cohérence visuelle.
Sauvegarder
Cliquer Sauvegarder pour pousser les modifications sur votre site de production en direct instantanément.
Réinitialiser
Si vous avez besoin de recommencer, utilisez le Réinitialiser fonction pour revenir aux styles par défaut de MultiLipi.
✅ Succès : Votre sélecteur de langue est maintenant en ligne ! Les modifications se propagent instantanément sur toutes les pages où MultiLipi est déployé. Aucune mise en cache ou actualisation de page requise pour la plupart des configurations.