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 Bureau et Mobile.
Ce guide couvre la configuration de Mises en page, Positionnementet 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.
- 2Ouvre Paramètres depuis le menu de gauche.
- 3Choisir Commutateur de langage.
💡 Conseil de pro : Vous entrerez dans l'éditeur de sélecteur, qui comprend une toile de prévisualisation en temps réel. Utilisez le bouton bascule en haut pour basculer entre Bureau 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 (Par défaut)
Comportement : Le sélecteur flotte au-dessus de votre contenu, ancré à 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 revertit automatiquement le sélecteur en "Mode flottant". Cela garantit que les utilisateurs ne sont jamais bloqués dans la sélection de la langue, même si la disposition change.
3. Étape 2 : Identité Visuelle (Modèles et Couleurs)
Alignez le sélecteur 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 qu'ils correspondent à vos directives de marque en utilisant le sélecteur de couleurs intégré ou des 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 pixelisé, vous pouvez injecter des règles CSS personnalisées directement dans le DOM shadow 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 :
/* Supprimer l'arrondi des bords pour un design net et carré */
#lang-switcher-selected-lang .fi {
border-radius: 0px;
}
/* Personnaliser l'arrière-plan du menu déroulant */
#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éinitialisation
Si vous devez recommencer, utilisez le Réinitialisation fonction pour revenir aux styles par défaut de MultiLipi.
✅ Succès : Votre sélecteur de langue est maintenant actif ! Les modifications se propagent instantanément sur toutes les pages où MultiLipi est déployé. Aucune mise en cache ou actualisation de page n'est requise pour la plupart des configurations.