Comment modifier le design du sélecteur de langue ?

Dans cet article, vous apprendrez à personnaliser votre sélecteur de langue et à en modifier l'apparence.

Grâce à Weglot, vous pouvez modifier 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

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 :

Cette section vous permet de modifier les drapeaux affichés sur votre sélecteur de langue. Vous pouvez afficher le drapeau d'un autre pays ou votre propre drapeau. Vous pouvez également modifier l'apparence du sélecteur de langue en changeant les noms 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 créer un sélecteur personnalisé.

Vous devrez le concevoir vous-même 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 !