Altre integrazioni - Come modificare la posizione del selettore di lingua?

In questo articolo scoprirete come cambiare la posizione del selettore di lingua di Weglot se utilizzate un'integrazione diversa da WordPress e Shopify.

1. Utilizzare la funzione Switcher Editor

L'editor del commutatore consente di spostare il commutatore di lingua nel contesto del sito web trascinando e rilasciando il pulsante su un'anteprima del sito.

Per utilizzarlo, potete seguire questo articolo: Come usare l'Editor Switcher?

⚠️ Si noti che il sito web deve essere attivo e accessibile per poter utilizzare l'Editor Switcher.

2. I ganci di collegamento alla lingua

Avete la possibilità di creare elementi linguistici nel vostro menu nativo, ad esempio, e di collegarli con i ganci di traduzione secondo questa guida

Ad esempio, si crea un menu di voci"Lingue" con "Inglese" e "Francese" come sottomenu.

L'inglese avrà il link #Weglot-it , e il francese avrà il link #Weglot-fr

La lettera maiuscola della " W" è importante.

Se avete problemi a trovare lo shortcode corretto, potete digitare la vostra lingua qui e usare lo shortcode relativo: https://weglot.com/documentation/available-languages/

3. L'opzione Weglot_qui

È possibile incollare il codice sottostante nel codice sorgente nel punto in cui si desidera visualizzare il selettore di lingua:

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

4. L'opzione commutatore

È anche possibile integrare manualmente lo switcher a qualsiasi elemento presente nel sito web, aggiungendo l'opzione commutatori all'opzione Weglot.initialize codice

Per farlo, andate alla pagina in cui si trova il vostro snippet di codice Weglot. Dovreste vedere il codice seguente (con la vostra chiave API al posto di "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>

Importante: non dimenticate la virgola dopo la chiave API.

Il pezzo di codice che è importante qui è l'elemento .header-nav poiché determina la posizione del commutatore di lingua. È necessario sostituirlo con il selettore CSS dell'elemento genitore in cui si desidera posizionare il selettore di lingua.

⚠️ Per trovare il selettore CSS (il "target"):

• Fare clic con il pulsante destro del mouse sull'elemento in cui si desidera inserire il commutatore di lingua.
• Andare a "Ispezionare"
• Utilizzare la freccia in alto a sinistra della console.
• Fare clic con il tasto destro del mouse sull'elemento nella console.
• Copia > Selettore di copia
• Incollare il campo di destinazione del codice tra le doppie virgolette

Quindi, ad esempio, se volete aggiungerlo al vostro menu:

<nav class="menu">

target: "nav.menu",

Per ulteriori informazioni su questo metodo, consultare la nostra Documentazione per sviluppatori.

5. Informazioni aggiuntive (Webflow e Squarespace)

Se si utilizza Squarespace, il cambio di lingua è gestito direttamente da Squarespace, pertanto si consiglia di seguire la loro documentazione.

Se utilizzate Webflow, non esitate a provare questa guida. Vi permetterà di creare commutatori di lingua di bell'aspetto per il vostro sito web.