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).
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.