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.

Avec Weglot, vous pouvez personnaliser l'apparence de votre sélecteur de langue. Il existe plusieurs façons de procéder :

1. Modifier les options du sélecteur de langue

Pour personnaliser votre sélecteur de langue, rendez-vous dans votre Dashboard Weglot > Projets > Sélectionnez un projet > Paramètres > Sélecteur de langue.

À partir de là, vous pouvez personnaliser plusieurs options d'affichage, notamment :

• Le nom de la langue (par exemple « en » pour l'anglais)
• 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".

Plus bas sur la page, vous trouverez la section « Langues et apparence ». Vous pouvez y faire glisser et déposer les langues pour modifier l'ordre dans lequel elles apparaissent dans le sélecteur de langue.

Cette section vous permet de personnaliser les drapeaux et les noms de langues affichés dans votre sélecteur de langue.

2. Modifier le nom de la langue et le drapeau

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

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

À cet endroit, vous pouvez modifier le nom de la langue afin qu'il corresponde au nom que vous souhaitez voir s'afficher dans le sélecteur de langue de votre site web en ligne :

Une fois que vous avez modifié la section « Nom dans la langue locale », vous pouvez cliquer sur le bouton « Enregistrer ».

Pour modifier le drapeau, assurez-vous d'avoir activé l'option « Afficher les drapeaux des langues dans le bouton » dans les paramètres de votre sélecteur.

Vous pouvez également cliquer sur « Sélectionner un drapeau » pour choisir un drapeau. Vous pouvez utiliser la barre de recherche pour vous aider à trouver un drapeau :

Retournez maintenant sur votre site web : vous verrez alors le drapeau qui vient d'être ajouté dans le menu de sélection de la langue.

De plus, si vous souhaitez supprimer le drapeau ajouté précédemment et revenir au drapeau d'origine, cliquez sur «Sélectionner un drapeau » dans le sélecteur de drapeaux ; cela supprimera le drapeau :

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

Dans votre Dashboard Weglot > Paramètres > Sélecteur de langue, vous avez la possibilité d'ajouter du code CSS personnalisé :

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 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 !