Impostare un selettore di lingua sul sito Bubble.io può rendere più semplice per gli utenti cambiare lingua. Questa funzione è particolarmente preziosa per le applicazioni con un pubblico globale, consentendo agli utenti di interagire con la piattaforma nella lingua preferita. Bubble.io, una popolare piattaforma di sviluppo no-code, offre funzionalità di localizzazione integrate che consentono agli sviluppatori di creare applicazioni multilingue senza conoscenze di programmazione approfondite.
Per implementare un selettore di lingua in Bubble.io, gli sviluppatori in genere iniziano definendo le lingue che desiderano supportare nelle impostazioni dell'app. Successivamente creano un elemento a discesa o un pulsante con cui gli utenti possono interagire per cambiare la lingua. In questo articolo, discuteremo come configurare un selettore di lingua su Bubble.io con uno dei siti web di servizi di traduzione automatica.
Perché un selettore di lingua è importante sul sito web Bubble.io?
Aggiungere un selettore di lingua su un sito web non è senza motivo. Ecco perché è necessario configurarne uno su un sito Bubble .
- Facilita l'accesso agli utenti di altri Paesi: Un selettore di lingua consente agli utenti internazionali di visualizzare il sito web nella propria lingua madre. Ad esempio, un utente spagnolo che visita un negozio online può passare allo spagnolo, rendendo più semplice comprendere i dettagli dei prodotti e completare gli acquisti. Gli studi di CSA Research mostrano che il 76% degli acquirenti online preferisce acquistare prodotti quando le informazioni sono disponibili nella propria lingua, evidenziando l'importanza di questa funzione per il comfort e l'accessibilità degli utenti.
- Ottimizzare il sito web nei risultati di ricerca di altri paesi: Con un selettore di lingua, il tuo sito Bubble.io può posizionarsi meglio nelle ricerche in lingue straniere. Ad esempio, una versione francese del tuo sito ha maggiori probabilità di apparire nelle ricerche su Google in francese. Questa maggiore visibilità può aumentare significativamente il traffico internazionale.
- Aumenta la conversione delle vendite: Offrire contenuti in più lingue può incrementare le vendite. Una piattaforma di corsi online che consente agli utenti di cambiare lingua può attrarre un pubblico più ampio e aumentare le iscrizioni. Questo approccio è efficace perché i consumatori sono più propensi ad acquistare da siti web che forniscono informazioni nella loro lingua madre, incidendo direttamente sui tuoi tassi di conversione.
- Migliora il coinvolgimento e la fidelizzazione degli utenti: Un selettore di lingua può trattenere gli utenti sul tuo sito più a lungo. Ad esempio, gli utenti che interagiscono nella loro lingua preferita su un'app di social networking tendono a rimanere coinvolti più a lungo. Questo aumento del coinvolgimento è significativo, poiché gli utenti trascorrono in genere il doppio del tempo sui siti nella loro lingua madre rispetto a quelli in una seconda lingua, portando a una migliore fidelizzazione degli utenti.
Come impostare un selettore di lingua su Bubble.io
Ora che abbiamo compreso l'importanza di cambiare lingua sui siti web multilingue Bubble.io, parliamo di come implementarlo. I servizi di traduzione per siti web di solito offrono questa funzionalità, che può essere adattata alle esigenze dell'utente.
Tuttavia, non tutti i servizi di traduzione offrono selettori di lingua personalizzabili e facili da usare. Pertanto, scegliere un servizio di traduzione automatica compatibile con vari framework e che offra funzionalità flessibili di cambio lingua è molto importante.
Un servizio di traduzione automatica che soddisfa questi criteri è Linguise. Linguise offre una funzione di cambio lingua altamente personalizzabile e facile da usare che si integra con i CMS e i web builder più diffusi come Bubble.io.
Linguise offre un'integrazione perfetta con Bubble, consentendo agli sviluppatori di incorporare facilmente il cambio di lingua nelle loro applicazioni multilingue. Sfruttando le funzionalità avanzate e l'interfaccia intuitiva di Linguise, puoi semplificare la configurazione e la gestione dei selettori di lingua sul tuo sito web Bubble .
Ecco i passaggi per installare Linguise su un sito web Bubble.io e configurare il selettore di lingua.
Passaggio 1: registrare un account Linguise
Inizia creando un Linguise account gratuito e aggiungendo il dominio del tuo sito web. Puoi usufruire della prova gratuita di 30 giorni prima di scegliere un piano di abbonamento.
Poi, dovrai registrare il tuo dominio per autorizzare la traduzione. Copia il nome del tuo dominio, incluso “https://,” e seleziona “altro” come piattaforma.
Successivamente, seleziona le tue lingue di origine e di destinazione.
Passaggio 2: Aggiungi automaticamente il DNS usando Entri
Dopo aver registrato il tuo sito web sulla dashboard Linguise , avrai due opzioni di installazione.
Per l'aggiunta automatica dei record DNS, fai clic su “Connetti automaticamente il tuo DNS.” Questa funzione, chiamata Entri, semplifica il processo di installazione gestendo i record DNS per te. In alternativa, puoi copiare manualmente i record DNS al tuo provider di dominio.
Facendo clic sul pulsante, Entri analizza l'URL del sito web registrato ed esamina i tuoi record DNS pubblici, identificando il provider e i record DNS necessari.
Successivamente, fai clic su “Autorizza con [il tuo provider di dominio]” (ad esempio, Cloudflare). Questa azione ti reindirizza alla pagina di accesso del tuo provider di dominio, dove puoi effettuare il login e procedere.
Una volta effettuato l'accesso, Entri aggiungerà automaticamente al tuo dominio i record DNS appropriati: un record DNS per ogni lingua e un record DNS TXT per la chiave di convalida.
Dopo l'autorizzazione, Entri ti informerà che tutte le impostazioni DNS sono state configurate correttamente. La funzione di traduzione dovrebbe essere utilizzabile una volta che tutti i record DNS si sono propagati sul tuo dominio, operazione che in genere richiede dai 20 ai 30 minuti.
Per l'installazione manuale, puoi seguire i passaggi indicati di seguito.
Passaggio 3: Copia i record DNS
Per l'installazione manuale, verrai reindirizzato a una schermata che mostra i record DNS necessari per configurare le tue pagine multilingue, come fr.domain.com o es.domain.com.
Copia questi elementi nella tua configurazione DNS di Bubble.io.
Successivamente, accedi al tuo gestore di dominio e vai all'area di configurazione DNS. Segui le istruzioni per copiare:
- Un record TXT per la verifica del dominio
- Uno o più record CNAME per le lingue
Ecco alcuni esempi per ciascun tipo di record (TXT e CNAME).
Una volta aggiunti tutti i record, la configurazione dovrebbe apparire così.
Passaggio 4: Verifica il DNS
Dopo aver aggiunto tutti i tuoi record al DNS del tuo dominio, clicca sul pulsante “Verifica configurazione DNS” per verificare la propagazione del DNS.
La convalida DNS di solito richiede circa 30 minuti a 1 ora. Una volta completata, dovresti vedere indicatori verdi accanto all'elenco DNS nella dashboard Linguise . Sei quasi pronto a tradurre il tuo sito Bubble.io; non resta che collegarti al selettore di lingua con le bandiere dei paesi.
Passaggio 5: abilita il selettore di lingua
Il selettore di lingua è un popup con bandiera che consente agli utenti di selezionare la lingua preferita. Per implementarlo, copia il codice fornito al termine del processo di registrazione del dominio o all'interno delle impostazioni del dominio nell'intestazione delle pagine del tuo sito Bubble.io. Il selettore di lingua con bandiera apparirà quindi automaticamente sul tuo sito web pubblico.
Successivamente, vai al pannello del tuo sito Bubble . Clicca su ‘Impostazioni’ nel menu della barra laterale sinistra e seleziona “SEO / metatag”.
Scorri verso il basso fino a “Script/meta tag nell'intestazione” sotto “Impostazioni avanzate.” Incolla lo script Linguise che hai copiato in precedenza, poi clicca su ‘Salva’ e pubblica il tuo sito.
Passaggio 5: Configurare la visualizzazione principale
Per iniziare a configurare il selettore di lingua, vai alla sezione “Impostazioni” > “Visualizzazione bandiere lingua” nella dashboard di Linguise . In questa pagina puoi regolare diverse impostazioni
- Stile icona bandiera: Scegli tra tre opzioni: visualizzazione affiancata, menu a tendina o popup.
- Posizione: Seleziona la posizione in cui apparirà il selettore della lingua sul tuo sito. Sono disponibili diverse opzioni di posizionamento; assicurati che sia facilmente accessibile ai visitatori.
Puoi combinare la visualizzazione di bandiere e nomi delle lingue, bandiere e abbreviazioni delle lingue, oppure solo i nomi delle lingue. Si consiglia di utilizzare sia le bandiere che i nomi delle lingue per facilitare il riconoscimento da parte degli utenti.
Passaggio 6: Imposta il design della bandiera
Dopo aver configurato la visualizzazione principale, personalizza ulteriormente il design delle bandiere che verranno mostrate.
- Mostra il nome della lingua: Puoi scegliere di mostrare il nome della lingua in base al nome del paese o al nome della lingua stessa. Ad esempio, potresti visualizzare “Francese” o “Français”.
- Tipo di bandiera inglese: Questa opzione è utile per le lingue con più varianti, come l'inglese americano o britannico (e vale anche per spagnolo, taiwanese, tedesco e portoghese).
- Stile della bandiera: Scegli la forma dell'icona della bandiera, rotonda o rettangolare.
Passaggio 7: Personalizza colore e dimensione
Dopo aver configurato il design della bandiera, puoi personalizzare ulteriormente il colore e le dimensioni delle bandiere. Ecco le impostazioni che puoi regolare:
- Raggio del bordo della bandiera: Personalizza il raggio in pixel per lo stile della bandiera rettangolare.
- Colore del nome della lingua: Scegli il colore predefinito del testo per visualizzare il nome della lingua.
- Colore della lingua nel popup: Imposta il colore del testo del titolo della lingua nell'area del popup o del menu a tendina.
- Dimensione bandiera: Regola la dimensione delle icone delle bandiere.
- Colore del nome della lingua al passaggio del mouse: Imposta il colore del testo che appare quando l'utente passa il mouse sul nome della lingua.
- Colore del titolo della lingua al passaggio del mouse nel popup: Imposta il colore del testo che appare quando l'utente passa il mouse sul titolo della lingua nell'area del popup o del menu a tendina.
Passaggio 8: Impostazione dell'ombra del riquadro della bandiera
Infine, puoi regolare le impostazioni dell'ombra del riquadro della bandiera. La prima opzione ti consente di applicare un effetto ombra a ciascuna icona della bandiera visualizzata sul tuo sito web. L'opzione successiva controlla l'effetto ombra quando gli utenti passano il mouse sulle bandiere delle lingue.
Dopo aver apportato tutte le modifiche desiderate, fai clic sul pulsante Salva per applicare le modifiche di personalizzazione. Poi, visita il tuo sito web Bubble per verificare che la configurazione sia stata applicata correttamente. Ecco come apparirà il selettore di lingua.
Dopo la configurazione, puoi vedere come funziona il selettore di lingua sul tuo sito web multilingue Bubble .
Successivamente, è possibile tradurre il sito web in altre lingue, come lo spagnolo.
Procedure consigliate per ottimizzare il selettore di lingua su Bubble
Dopo aver configurato correttamente il selettore di lingua su un sito web multilingue Bubble , è importante considerare alcuni suggerimenti per ottimizzare il selettore di lingua sia per il tuo sito che per i visitatori.
Utilizza un logo con bandiera della lingua facilmente identificabile
Quando si implementa un selettore di lingua sul proprio sito Bubble.io, è fondamentale utilizzare bandiere o icone linguistiche facilmente riconoscibili. Questi segnali visivi aiutano gli utenti a identificare e selezionare rapidamente la lingua preferita. Ad esempio, un'icona a forma di globo è universalmente riconosciuta come simbolo delle opzioni linguistiche. In alternativa, si potrebbero usare le bandiere nazionali, ma bisogna tenere presente che a volte questo può essere problematico, poiché le lingue non sono sempre legate a un singolo paese.
Esempio: Il sito web di Amazon utilizza una piccola icona a forma di globo accanto alla lingua attualmente selezionata (ad esempio, “EN”) nella barra di navigazione in alto. Questo approccio semplice ma efficace consente agli utenti di individuare rapidamente le opzioni linguistiche indipendentemente dall'impostazione della lingua corrente.
Includere i nomi delle lingue accanto alle bandiere
Sebbene le bandiere possano essere utili, non dovrebbero essere usate da sole. Includere il nome della lingua nella sua scrittura nativa accanto alla bandiera o all'icona garantisce chiarezza ed evita potenziali confusioni. Questo è particolarmente importante per le lingue parlate in più paesi o regioni.
Esempio: Il selettore di lingua sul sito web di Airbnb mostra il nome della lingua e la bandiera del paese. Ad esempio, mostra “English (US)” con la bandiera degli Stati Uniti e “Français” con la bandiera francese. Questa combinazione garantisce che gli utenti possano identificare con precisione la lingua preferita.
Posiziona con attenzione il pulsante di selezione della lingua
Il posizionamento del selettore di lingua è fondamentale per l'accessibilità da parte degli utenti. Le posizioni più comuni includono l'angolo in alto a destra dell'intestazione, nel piè di pagina o all'interno del menu di navigazione principale. L'importante è renderlo facilmente individuabile senza affollare l'area dei contenuti principali.
Esempio: Sul sito web tiffany.com, il selettore di lingua si trova nell'angolo in basso a destra della pagina, sempre visibile e accessibile. Questa posizione coerente garantisce che gli utenti possano trovare e utilizzare rapidamente le opzioni di lingua indipendentemente da dove si trovino sul sito.
Progetta il selettore di lingua in modo che sia responsive
Assicurati che il tuo selettore di lingua funzioni bene su tutti i dispositivi, dai computer desktop agli smartphone. Su schermi più piccoli, potrebbe essere necessario adattare il design – ad esempio, utilizzando un menu a tendina invece di un elenco orizzontale di opzioni.
Esempio: il selettore di lingua del sito web dell'UNESCO si adatta perfettamente a tutti i dispositivi. Sul desktop, appare come un elenco orizzontale nell'intestazione. Sui dispositivi mobili, si trasforma in un menu a tendina compatto, garantendo la fruibilità senza compromettere il layout mobile.
Assicurati che il selettore di lingua sia coerente su tutte le pagine
Mantieni lo stesso design, funzionalità e posizione del tuo selettore di lingua in tutte le pagine del tuo sito Bubble.io. Questa coerenza aiuta gli utenti a navigare nel tuo sito in modo più efficiente, poiché sanno esattamente dove trovare le opzioni di lingua indipendentemente dalla pagina in cui si trovano.
Esempio: Il sito web mantiene il selettore di lingua in modo coerente nel footer su tutte le pagine, dalla homepage alle pagine prodotto e al processo di checkout. Questa coerenza garantisce che gli utenti possano cambiare lingua facilmente in qualsiasi momento durante la loro esperienza di navigazione o di acquisto.
Configura un selettore di lingua sul sito web multilingue Bubble utilizzando Linguise!
Ora hai già capito come selezionare la lingua per il sito web multilingue Bubble.io. Analizzare il selettore di lingua può offrire diversi vantaggi e portare ulteriormente all'ottimizzazione in base ai punti precedentemente menzionati.
Ottimizzare efficacemente il selettore di lingua può migliorare significativamente l'esperienza utente. Registrati per un Linguise account, integralo con il tuo sito web Bubble.io e personalizza il selettore di lingua per migliorare l'esperienza utente.
