Comment modifier le design du sélecteur de langue ?
Dans cet article, vous découvrirez comment personnaliser votre sélecteur de langue et modifier son apparence.
En utilisant Weglot, vous avez la possibilité de changer le design de votre sélecteur de langue. Pour ce faire, plusieurs possibilités s'offrent à vous :
1. Modifier les options du sélecteur de langue
2. Ajouter du CSS personnalisé
3. Utiliser le "Switcher Editor"
4. Créez votre propre sélecteur personnalisé
1. Modifier les options du sélecteur de langue
Si vous allez sur votre Weglot Dashboard > Projects > Select a project >Settings > Language switcher, vous aurez la possibilité de changer certains éléments et l'affichage :
- Le nom de la langue (comme "en" pour l'anglais, par exemple)
- Le nom complet de la langue
- Les drapeaux, et le type de drapeaux (carré, cercle, rectangle)
- Le type de bouton (liste/déroulement)
Si vous apportez des modifications ici, veillez à cliquer sur "Save changes".
Vous trouverez également la section "Apparence du sélecteur" plus bas sur la page, où vous pouvez glisser-déposer la langue de votre choix et modifier sa position dans le sélecteur de langue :
Si vous préférez afficher le drapeau d'un autre pays sur votre sélecteur de langue ou utiliser votre propre drapeau, vous pouvez les modifier en conséquence dans cette section. Ici, vous pouvez modifier l'apparence du sélecteur de langue en changeant le nom des langues et les drapeaux affichés. (Voir : Comment puis-je changer les drapeaux du sélecteur de langue ?)
2. Ajouter du CSS personnalisés
Sur votre Weglot Dashboard > Paramètres > Sélecteur de langue, vous avez la possibilité d'ajouter des feuilles de style CSS personnalisées :
N'hésitez pas à vous inspirer de différents styles et à ajouter votre propre CSS. Vous trouverez des exemples de CSS personnalisés dans la partie suivante.
3. Utiliser le "Switcher Editor"
Pour une utilisation générale du "Switcher Editor", veuillez consulter la documentation dédiée suivante :
Comment utiliser le "Switcher Editor" ?
Vous y trouverez plusieurs sections vous permettant de créer votre propre design de sélecteur ou d'utiliser certains des modèles Weglot.
Pour en utiliser un, veuillez consulter la section sur le style du sélecteur :
Une fois dans la section, vous trouverez une série de modèles à utiliser pour votre site web.
Il suffit de cliquer dessus pour en sélectionner un et le placer où vous le souhaitez sur votre page web.
4. Créez votre propre sélecteur personnalisé
Si vous préférez avoir votre propre sélecteur conçu pour correspondre aux codes CSS de votre site web, vous pouvez le faire en créant un sélecteur personnalisé.
Vous devrez configurer vous-même son design et utiliser les fonctions de Weglot pour que les liens ciblent les langues que vous avez choisies.
Pour ce faire, veuillez consulter notre documentation à l'intention des développeurs sur les fonctions JavaScript utiles à utiliser :
https://developers.weglot.com/javascript/link-hooks
Vous avez des commentaires sur cet article ? Faites-le nous savoir !