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

In questo articolo scoprirai come modificare la posizione del selettore di lingua Weglot se utilizzi un'integrazione diversa da WordPress o Shopify.

1. Utilizzare il Switcher Editor

L'Switcher Editor e ti permette di spostare il selettore di lingua direttamente sull'anteprima del tuo sito web, trascinandolo nella posizione desiderata.

Per utilizzarlo, segui la nostra guida dedicata: Come si usa l'Switcher Editor?

⚠️ La funzione " Switcher Editor " può essere utilizzata solo su siti web attivi e accessibili al pubblico. Non può essere utilizzata su siti web protetti da password o su siti web locali. L'URL del tuo sito web deve inoltre essere inserito nella tua dashboard Weglot > Impostazioni > Generale.

2. Utilizzare spunti linguistici

Puoi creare le tue voci di lingua nel menu nativo del tuo sito web e collegarle a Weglot utilizzando gli hook per i link di lingua.

Ad esempio, è possibile creare una voce di menu “Lingue” con “Inglese” e “Francese” come sottovoci e utilizzare i seguenti link:

• Inglese: #Weglot-en
• Francese: #Weglot-fr

La W maiuscola in Weglot  è obbligatorio.

Il valore dopo #Weglot-  corrisponde al codice della lingua. Ad esempio, en  è inglese e fr  è francese.

È possibile trovare il codice corrispondente a ciascuna lingua disponibile nel nostro elenco delle lingue disponibili.

Per ulteriori informazioni sugli "hook" dei link alle lingue, consulta la nostra Documentazione per gli sviluppatori - Hook dei link alle lingue.

3. Utilizza l'opzione weglot_here

È possibile posizionare il selettore di lingua Weglot in un punto specifico aggiungendo il seguente elemento HTML al codice sorgente nel punto in cui si desidera che appaia il selettore:

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

Weglot visualizzerà automaticamente il selettore di lingua all'interno di questo elemento.

4. Utilizzare l'opzione di commutazione

È inoltre possibile inserire un selettore di lingua all'interno di un elemento specifico del proprio sito web utilizzando il switchers  nel vostro Weglot.initialize()  configurazione.

L'integrazione con Weglot dovrebbe contenere uno script simile a questo:

<script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script>

<script>
  Weglot.initialize({
    api_key: "your_api_key",
  });
</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
        }
    }
]
});

Sostituire "your_api_key"  con la tua chiave API Weglot.

L'impostazione importante per la posizione del selettore di lingua è:

target: ".header-nav"

Il target  Il valore deve corrispondere al selettore CSS dell'elemento in cui si desidera inserire 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 su Squarespace e Webflow

Squarespace

Se utilizzi l'integrazione nativa di Weglot in Squarespace, il selettore di lingua viene gestito direttamente da Squarespace.

Puoi personalizzarlo dalle impostazioni della lingua di Squarespace. Per ulteriori informazioni, consulta la documentazione di Squarespace: Creazione di un sito multilingue con Weglot.

Si noti che l'integrazione nativa di Weglot in Squarespace è attualmente disponibile per la versione 7.1 di Squarespace.

Webflow

Se utilizzi Webflow, puoi anche ricorrere al Weglot UI Kit di Finsweet per creare un selettore di lingua personalizzato.