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 de la langue et le type de drapeaux (carré, cercle, rectangle)
• Le type d'aiguilleur (liste/dropdown)

Si vous effectuez des modifications ici, assurez-vous de cliquer sur "Enregistrer les modifications".

Vous trouverez également la section "Apparence des langues" 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 langues :

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. Modifier le nom de la langue et le drapeau

Pour changer le nom de la langue et le drapeau, vous pouvez vous rendre sur la même page, c'est-à-dire sur votre Weglot Dashboard > Projets > Sélectionner un projet > Paramètres > Sélecteur de langue.

Allez dans la section "Apparence des langues" et utilisez le stylo à droite.

Vous pouvez y modifier le nom de la langue, afin d'afficher le nom que vous souhaitez dans votre sélecteur sur votre site web :

Une fois que vous avez modifié la section "Nom de la langue locale", vous pouvez cliquer sur le bouton "Modifier".

Pour changer le drapeau, assurez-vous que vous avez activé l'option "Afficher les drapeaux de langue dans le bouton" dans les paramètres de votre commutateur.

Dans la section "Apparence des langues", cliquez sur "Sélectionner un drapeau" pour sélectionner un drapeau (1). Vous pouvez également utiliser la barre de recherche (2) pour vous aider à trouver un drapeau :

Maintenant, retournez sur votre site web, et vous pourrez voir le nouveau drapeau ajouté dans le sélecteur de langue. Dans notre exemple, nous avons le drapeau des États-Unis d'Amérique ci-dessous :

De même, si vous souhaitez supprimer le drapeau précédemment ajouté et revenir au drapeau original, cliquez sur"Sélectionner un drapeau" dans le sélecteur de drapeaux, et le drapeau devrait être supprimé :

3. Utiliser l'éditeur de commutateur

Pour une utilisation générale de l'éditeur Switcher, veuillez consulter la documentation dédiée suivante :

Comment utiliser l'éditeur Switcher ?

Vous y trouverez plusieurs sections vous permettant de créer votre propre design de commutateur ou d'utiliser certains des modèles Weglot.

Pour en utiliser un, veuillez consulter la section sur le style du commutateur :

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. Ajouter quelques feuilles de style CSS personnalisées

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.

5. Créez votre propre commutateur 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 ? N'hésitez pas à nous en faire part !