Impostare un selettore di lingua sul Bubble .io può semplificare il passaggio da una lingua all'altra. Questa funzionalità è particolarmente utile per le applicazioni rivolte a un pubblico globale, poiché consente agli utenti di interagire con la piattaforma nella loro 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 particolari conoscenze di programmazione.
Per implementare un selettore di lingua in Bubble.io, gli sviluppatori in genere iniziano definendo le lingue che desiderano supportare nelle impostazioni dell'app. Quindi creano un elemento a discesa o un pulsante con cui gli utenti possono interagire per cambiare lingua. In questo articolo, parleremo di come configurare un selettore di lingua su Bubble.io con uno dei siti web di servizi di traduzione automatica.
Perché è importante avere un selettore di lingua sul sito web Bubble.io?
Aggiungere un selettore di lingua su un sito web non è un'operazione senza motivo. Ecco perché è necessario impostarne uno su un sito web Bubble .
- Semplifica le cose per gli utenti di altri paesi: un commutatore di lingua consente agli utenti internazionali di visualizzare il sito web nella loro lingua madre. Ad esempio, un utente spagnolo che visita un negozio online può passare allo spagnolo, facilitando la comprensione dei dettagli del prodotto e il completamento degli acquisti. Gli studi di CSA Research mostrano che il 76% degli acquirenti online preferisce acquistare prodotti quando le informazioni sono disponibili nella loro lingua, evidenziando l'importanza di questa funzionalità per il comfort e l'accessibilità dell'utente.
- Ottimizzazione del sito web nei risultati di ricerca di altri Paesi: con un selettore di lingua, il tuo Bubble .io può ottenere un posizionamento migliore nelle ricerche in lingua straniera. Ad esempio, una versione francese del tuo sito avrà maggiori probabilità di comparire nelle ricerche Google in francese. Questa maggiore visibilità può aumentare significativamente il traffico internazionale.
- Aumenta la conversione delle vendite: offrire contenuti in più lingue può aumentare le vendite. Una piattaforma di corsi online che consenta agli utenti di cambiare lingua può attrarre un pubblico più ampio e aumentare le iscrizioni. Questo approccio è efficace perché è più probabile che i consumatori acquistino da siti Web che forniscono informazioni nella loro lingua madre, con un impatto diretto sui tassi di conversione.
- Migliora il coinvolgimento e la fidelizzazione degli utenti: un cambio di lingua può mantenere gli utenti sul tuo sito più a lungo. Ad esempio, gli utenti che interagiscono nella loro lingua preferita su un'app di social network tendono a rimanere coinvolti più a lungo. Questo maggiore coinvolgimento è significativo, poiché gli utenti in genere trascorrono il doppio del tempo sui siti nella loro lingua madre rispetto a quelli in una seconda lingua, con conseguente 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, vediamo come implementarla. I servizi di traduzione di siti web solitamente offrono questa funzionalità, che può essere personalizzata in base alle esigenze dell'utente.
Tuttavia, non tutti i servizi di traduzione offrono commutatori di lingua personalizzabili e facili da usare. Pertanto, è molto importante scegliere un servizio di traduzione automatica compatibile con vari framework e fornire funzionalità flessibili di cambio lingua.
Un servizio di traduzione automatica che soddisfa questi criteri è Linguise . Linguise offre una funzionalità di cambio lingua altamente personalizzabile e facile da usare, che si integra con i più diffusi CMS e web builder come Bubble .io.
Linguise offre un'integrazione perfetta con Bubble, consentendo agli sviluppatori di integrare 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 cambi di lingua sul tuo sito web Bubble .
Ecco i passaggi per installare Linguise su un Bubble .io e impostare il selettore di lingua.
Passaggio 1: registra l'account Linguise
Inizia account Linguise gratuito e aggiungendo il dominio del tuo sito web. Puoi utilizzare la prova gratuita di 30 giorni prima di scegliere un piano di abbonamento.
Successivamente, dovrai registrare il tuo dominio per autorizzare la traduzione. Copia il tuo nome di dominio, incluso "https://" e seleziona "altro" come piattaforma.
Successivamente, seleziona la lingua di origine e quella di destinazione.
Passaggio 2: aggiungi automaticamente DNS utilizzando 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 i tuoi DNS automaticamente". Questa funzionalità, chiamata Entri, semplifica il processo di installazione gestendo i record DNS per te. In alternativa, puoi copiare manualmente i record DNS sul tuo provider di dominio.
Facendo clic sul pulsante, Entri analizza l'URL del tuo 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 accedere e procedere.
Una volta effettuato l'accesso, Entri aggiungerà automaticamente al tuo dominio i record DNS appropriati, un DNS per lingua e un DNS TXT per la chiave di convalida.
Dopo l'autorizzazione, Entri ti avviserà che tutte le impostazioni DNS sono state configurate con successo. La funzione di traduzione dovrebbe essere utilizzabile una volta che tutte le voci DNS si sono propagate nel tuo dominio, in genere impiegando dai 20 ai 30 minuti.
Per l'installazione manuale, è possibile seguire i passaggi forniti di seguito.
Passaggio 3: copia i record DNS
Per l'installazione manuale, verrai reindirizzato a una schermata che mostra i record DNS necessari per impostare le tue pagine multilingue, come fr.domain.com o es.domain.com.
Copia questi elementi nella configurazione DNS di Bubble.io.
Successivamente, accedi al tuo gestore 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
Di seguito sono riportati esempi per ciascun tipo di record (TXT e CNAME).
Una volta aggiunti tutti i record, la tua configurazione dovrebbe assomigliare a questa.
Passaggio 4: verifica il DNS
Dopo aver aggiunto tutti i record al DNS del tuo dominio, fai clic sul pulsante "Verifica configurazione DNS" per verificare la propagazione del DNS.
La convalida DNS richiede in genere dai 30 minuti a un'ora. Una volta completata, dovresti vedere degli indicatori verdi accanto all'elenco DNS nella dashboard Linguise . Sei quasi pronto a tradurre il tuo sito web Bubble.io; non ti resta che collegarti al selettore di lingua con le bandiere dei paesi.
Passaggio 5: abilitare e cambiare lingua
Il selettore di lingua è un popup con una bandiera che consente agli utenti di selezionare la lingua preferita. Per implementarlo, copia il codice fornito al termine della procedura di registrazione del dominio o nelle impostazioni del dominio nell'intestazione delle pagine del tuo sito Bubble.io. Il selettore di lingua apparirà automaticamente sul tuo sito web pubblico.
Successivamente, accedi al pannello del tuo Bubble . Fai clic su "Impostazioni" nel menu laterale sinistro e seleziona "SEO / metatag".
Scorri verso il basso fino a "Script/meta tag nell'intestazione" in "Impostazioni avanzate". Incolla lo Linguise che hai copiato in precedenza, quindi fai clic su "Salva" e pubblica il tuo sito.
Passaggio 5: configurare il display principale
Per iniziare a configurare il cambio di lingua, vai alla "Impostazioni" > "Visualizzazione dei flag della lingua" nella Linguise . In questa pagina è possibile regolare diverse impostazioni
- Stile icona bandiera: scegli tra tre opzioni: visualizzazione affiancata, menu a discesa o popup.
- Posizione: seleziona dove apparirà il selettore di lingua sul tuo sito. Sono disponibili varie opzioni di posizione; garantire che sia facilmente accessibile ai visitatori.
È possibile combinare la visualizzazione di bandiere e nomi di lingua, bandiere e abbreviazioni di lingua o solo nomi di lingua. Si consiglia di utilizzare sia i flag che i nomi delle lingue per facilitare il riconoscimento dell'utente.
Passaggio 6: imposta il design della bandiera
Dopo aver configurato la visualizzazione principale, personalizzare ulteriormente il design delle bandiere che verranno visualizzate.
- Visualizza 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 "French" o "Français".
- Tipo di bandiera inglese: questa opzione è utile per le lingue con più varianti, come l'inglese americano o britannico (e si applica anche a spagnolo, taiwanese, tedesco e portoghese).
- Stile bandiera: scegli la forma dell'icona della bandiera, rotonda o rettangolare.
Passaggio 7: personalizza colore e dimensione
Dopo aver configurato il design delle bandiere, 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 nome lingua: scegli il colore del testo predefinito per visualizzare il nome della lingua.
- Colore lingua popup: imposta il colore del testo del titolo in lingua nell'area popup o a discesa.
- Dimensioni bandiera: regola la dimensione delle icone delle bandiere.
- Colore al passaggio del mouse sul nome della lingua: imposta il colore del testo che appare quando l'utente passa il mouse sul nome della lingua.
- Colore al passaggio del mouse sulla lingua popup: imposta il colore del testo che appare quando l'utente passa il mouse sul titolo della lingua nell'area popup o a discesa.
Passaggio 8: impostazione dell'ombra della casella di bandiera
Infine, puoi regolare le impostazioni dell'ombra della casella di segnalazione. La prima opzione ti consente di applicare un effetto ombra a ciascuna icona di bandiera visualizzata sul tuo sito web. L'opzione successiva controlla l'effetto ombra quando gli utenti passano il mouse sulle bandiere della lingua.
Dopo aver apportato tutte le modifiche desiderate, clicca sul pulsante Salva per applicare le modifiche di personalizzazione. Quindi, visita il 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, puoi tradurre il sito web in altre lingue come lo spagnolo.
Best practice per ottimizzare il selettore di lingua su Bubble.io
Dopo aver configurato correttamente il selettore di lingua su un sito web multilingue Bubble , è importante prendere in considerazione alcuni suggerimenti per ottimizzare il selettore di lingua sia per il sito che per i visitatori.
Utilizzare un logo con bandiera della lingua facilmente identificabile
Quando si implementa un selettore di lingua sul proprio sito web Bubble.io, è fondamentale utilizzare bandiere o icone di lingua 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, è possibile utilizzare le bandiere dei paesi, ma è importante tenere presente che a volte 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 della lingua indipendentemente dall'impostazione della lingua corrente.
Incorpora i nomi delle lingue accanto alle bandiere
Anche se i flag possono essere utili, non dovrebbero essere usati da soli. Includere il nome della lingua nella sua scrittura nativa accanto alla bandiera o all'icona fornisce chiarezza ed evita potenziale confusione. Ciò è 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 loro opzione di lingua preferita.
Posiziona attentamente il pulsante di cambio lingua
Il posizionamento del selettore di lingua è fondamentale per l'accessibilità dell'utente. Le posizioni comuni includono l'angolo in alto a destra dell'intestazione, nel piè di pagina o nel menu di navigazione principale. La chiave è renderlo facilmente individuabile senza ingombrare l'area del contenuto principale.
Esempio: sul sito tiffany.com, il selettore della lingua si trova nell'angolo in basso a destra della pagina, sempre visibile e accessibile. Questo posizionamento coerente garantisce che gli utenti possano trovare e utilizzare rapidamente le opzioni della lingua indipendentemente da dove si trovino sul sito.
Progetta il selettore di lingua in modo che sia reattivo
Assicurati che il tuo cambio di lingua funzioni bene su tutti i dispositivi, dai computer desktop agli smartphone. Sugli schermi più piccoli potrebbe essere necessario adattare il design, ad esempio utilizzando un menu a discesa invece di un elenco orizzontale di opzioni.
Esempio: il cambio di lingua del sito web dell'UNESCO si adatta perfettamente a tutti i dispositivi. Sul desktop viene visualizzato come elenco orizzontale nell'intestazione. Sui dispositivi mobili si trasforma in un menu a discesa compatto, garantendo l'usabilità senza compromettere il layout mobile.
Assicurati che il cambio di lingua sia coerente su tutte le pagine
Mantieni lo stesso design, funzionalità e posizione del selettore di lingua in tutte le pagine del tuo sito web Bubble.io. Questa coerenza aiuta gli utenti a navigare sul 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 cambio di lingua in modo coerente nel piè di pagina di tutte le pagine, dalla home page alle pagine dei prodotti e al processo di pagamento. Questa coerenza garantisce che gli utenti possano cambiare facilmente lingua in qualsiasi momento durante la navigazione o l'esperienza di acquisto.
Imposta un selettore di lingua sul sito web multilingue Bubble utilizzando Linguise!
Ora hai capito come selezionare la lingua per il sito web multilingue Bubble.io. Leggere attentamente il selettore di lingua può offrire diversi vantaggi e favorire un'ulteriore ottimizzazione in base ai punti menzionati in precedenza.
Ottimizzare efficacemente il selettore della lingua può migliorare significativamente l'esperienza utente. Registrati su Linguise , integralo con il tuo Bubble .io e personalizza il selettore della lingua per migliorare l'esperienza utente.
