L'impostazione di un selettore di lingua sul Bubble.io può rendere più semplice per gli utenti cambiare lingua. Questa funzionalità è particolarmente preziosa per le applicazioni con un pubblico globale, poiché consente agli utenti di interagire con la piattaforma nella loro lingua preferita. Bubble.io, una popolare piattaforma di sviluppo senza codice, offre funzionalità di localizzazione integrate che consentono agli sviluppatori di creare applicazioni multilingue senza una conoscenza approfondita della codifica.
Per implementare un cambio 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 la lingua. In questo articolo, discuteremo della configurazione del cambio di lingua su Bubble.io con uno dei siti Web di servizi di traduzione automatica.
Perché il cambio di lingua è importante sul sito Web Bubble.io?
Aggiungere un cambio di lingua su un sito web non è senza motivo. Ecco perché è necessario crearne 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 cambio di lingua, il tuo sito Web Bubble.io può posizionarsi meglio nelle ricerche in lingue straniere. Ad esempio, è più probabile che una versione francese del tuo sito venga visualizzata nelle ricerche Google francesi. Questa migliore 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 cambio di lingua su Bubble.io
Ora che comprendiamo l'importanza di cambiare lingua sui siti Web Bubble.io multilingue, parliamo di come implementarlo. I servizi di traduzione di siti web solitamente offrono questa funzionalità, che può essere adattata 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 fornisce 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 impostare il cambio 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 da 30 minuti a 1 ora. Una volta completato, dovresti vedere degli indicatori verdi accanto all'elenco DNS nella dashboard Linguise . Sei quasi pronto per tradurre il tuo sito web Bubble.io; tutto ciò che resta è il collegamento al cambio di lingua con le bandiere dei paesi.
Passaggio 5: abilitare e cambiare lingua
Il selettore di lingua è un popup di bandiera che consente agli utenti di selezionare la lingua preferita. Per implementarlo, copia il codice fornito alla fine del processo di registrazione del dominio o nelle impostazioni del dominio nell'intestazione delle pagine del tuo sito Bubble.io. Il cambio della lingua della bandiera verrà quindi visualizzato automaticamente sul tuo sito web pubblico.
Successivamente, vai al pannello del tuo sito web Bubble. Fai clic su "Impostazioni" nel menu della barra laterale sinistra 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, fai clic 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 cambio di lingua.
Dopo la configurazione, puoi vedere come funziona il cambio 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 cambio di lingua su Bubble.io
Dopo aver configurato con successo il cambio di lingua su un sito web Bubble multilingue, è importante prendere in considerazione i suggerimenti per ottimizzare il cambio di lingua sia per il tuo sito che per i visitatori.
Utilizzare un logo con bandiera della lingua facilmente identificabile
Quando implementi un cambio di lingua sul tuo sito Web Bubble.io, è fondamentale utilizzare bandiere o icone della lingua facilmente riconoscibili. Questi segnali visivi aiutano gli utenti a identificare e selezionare rapidamente la loro lingua preferita. Ad esempio, l'icona di un globo è universalmente intesa come rappresentante delle opzioni linguistiche. In alternativa, potresti utilizzare le bandiere dei paesi, ma tieni presente che a volte ciò 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 su tutte le pagine del tuo sito web Bubble.io. Questa coerenza aiuta gli utenti a navigare nel tuo sito in modo più efficiente, poiché sanno esattamente dove trovare le opzioni della lingua indipendentemente dalla pagina corrente.
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 cambio di lingua sul sito Web multilingue Bubble utilizzando Linguise!
Ora sai già come selezionare la lingua per il sito web multilingue Bubble.io. La lettura del selettore della lingua può offrire diversi vantaggi e portare ulteriormente all'ottimizzazione in base ai punti precedentemente menzionati.
L'ottimizzazione efficace del selettore della lingua può migliorare significativamente l'esperienza dell'utente. Registrati per un account Linguise integralo con il tuo sito Web Bubble.io e personalizza il selettore della lingua per migliorare l'esperienza dell'utente.
