Autre intégration - Comment changer la position du sélecteur de langue ?

Dans cet article, vous apprendrez comment changer la position du sélecteur de langue de Weglot si vous utilisez une intégration différente de WordPress et Shopify.

1. Utilisez la fonction Switcher Editor

L'éditeur de sélecteur vous permet de déplacer le sélecteur de langue dans le contexte de votre site web en faisant glisser le bouton sur un aperçu de votre site web.

Pour l'utiliser, vous pouvez suivre cet article : Comment utiliser l'éditeur Switcher ?

⚠️ Notez que votre site Web doit être en ligne et accessible pour pouvoir utiliser le Switcher Editor.

2. Les crochets du lien linguistique

Vous avez la possibilité de créer des éléments linguistiques dans votre menu national, par exemple, et de les relier aux crochets de traduction conformément à ce guide.

Par exemple, vous créez un menu"Langues" avec les sous-menus "Anglais" et "Français".

L'anglais aura le lien #Weglot-fr et le français aura le lien #Weglot-fr

Notez que la majuscule du " W" est importante.

Si vous avez des difficultés à trouver le bon code court, vous pouvez taper votre langue ici et utiliser le code court correspondant : https://weglot.com/documentation/available-languages/

3. L'option Weglot_here

Copiez et intégrez le code ci-après à l'endroit désiré dans votre code pour afficher le sélecteur de langue :

<div id="weglot_here"></div>

4. L'option "Switcher"

Vous pouvez également intégrer manuellement le sélecteur à n'importe quel élément présent sur votre site web en ajoutant la balise aiguilleurs à l'option Weglot.initialize code

Pour ce faire, allez sur la page où se trouve votre extrait de code Weglot. Vous devriez voir le code suivant (avec votre propre clé API à la place de "YOUR_API_KEY") :

<!--Start Weglot Script-->
<script src=“//cdn.weglot.com/weglot.min.js”></script>
<script id=“has-script-tags”>Weglot.initialize({ api_key:“YOUR_API_KEY” })</script>
<!--End Weglot Script-->

,   
    switchers: [
    {
    button_style: {
        full_name: true,
        with_name: true,
        is_dropdown: true,
        with_flags: true,
        flag_type: "circle"
    },
    location: {
        target: ".header-nav", // You'll probably have to change it (see the step below in order to find the correct CSS selector)
        sibling: null
        }
    }
]
});
</script>

Important : n'oubliez pas la virgule après votre clé API.

Le morceau de code qui est important ici est le code .header-nav car il détermine l'emplacement de votre sélecteur de langue. Il doit être remplacé par le sélecteur CSS de l'élément parent dans lequel vous souhaitez placer le sélecteur de langue.

⚠️ Pour trouver le sélecteur CSS (la "cible") :

• Cliquez avec le bouton droit de la souris sur l'élément sur lequel vous voulez placer le sélecteur de langue.
• Cliquez sur "Inspecter".
• Utilisez la flèche en haut à gauche de la console.
• Cliquez avec le bouton droit de la souris sur l'élément dans la console.
• Copier > copier le sélecteur
• Collez le code du champ target entre les guillemets.

Ainsi, par exemple, si vous voulez l'ajouter à votre menu :

<nav class="menu">

cible : "nav.menu",

Vous pouvez trouver plus d'informations sur cette méthode dans notre Documentation développeurs

5. Informations complémentaires (Webflow et Squarespace)

Si vous utilisez Squarespace, le sélecteur de langue est géré directement par Squarespace, nous vous recommandons donc de suivre leur documentation.

Si vous utilisez Webflow, n'hésitez pas à essayer ce guide. Il vous permettra de créer de jolis sélecteurs de langue pour votre site web.