Impostare un selettore di lingua sul sito web Bubble.io può rendere più facile per gli utenti cambiare lingua. Questa funzione è particolarmente utile per le applicazioni con un pubblico globale, consentendo 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 una conoscenza approfondita del codice.
Per implementare un selettore di lingua in Bubble.io, gli sviluppatori iniziano generalmente 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 come impostare un selettore di lingua su Bubble.io con uno dei servizi di traduzione automatica dei siti web.
Perché è importante avere un selettore di lingua sul sito web Bubble.io?
Aggiungere un selettore di lingua su un sito web non è senza motivo. Ecco perché è necessario impostarne uno su un sito web Bubble .
- Rende più facile per gli utenti in altri paesi: Un selettore 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 alla lingua spagnola, rendendo più facile comprendere i dettagli del prodotto e completare gli acquisti. Gli studi di CSA Research mostrano che 76% degli acquirenti online preferiscono acquistare prodotti quando le informazioni sono disponibili nella loro lingua, evidenziando l'importanza di questa funzione per la comodità e l'accessibilità dell'utente.
- Optimizing the website in search results of other countries: With a language switcher, your Bubble.io website can rank better in foreign language searches. For instance, a French version of your site is more likely to appear in French Google searches. This improved visibility can significantly increase international traffic.
- Aumenta la conversione delle vendite: Offering content in multiple languages can boost sales. An online course platform allowing users to switch languages can attract a broader audience and increase enrollments. This approach is effective because consumers are more likely to buy from websites that provide information in their native language, directly impacting your conversion rates.
- Migliora il coinvolgimento e la fidelizzazione degli utenti: A language switcher can keep users on your site longer. For instance, users interacting in their preferred language on a social networking app tend to stay engaged longer. This increased engagement is significant, as users typically spend twice as much time on sites in their native language than those in a second language, leading to better user retention.
Come configurare un interruttore di lingua su Bubble.io
Ora che comprendiamo l'importanza di cambiare lingua sui siti web multilingue Bubble.io, discutiamo come implementarlo. I servizi di traduzione del sito web offrono solitamente questa funzione, che può essere personalizzata in base 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 fornisce funzionalità di cambio lingua flessibili è molto importante.
Un servizio di traduzione automatica che soddisfa questi criteri è LinguiseLinguiseLinguise LinguiseLinguiseLinguiseLinguise LinguiseLinguise offre una funzionalità di cambio lingua altamente personalizzabile e facile da usare, che si integra con i CMS e i costruttori di siti web più diffusi come Bubble.
Linguise offre un'integrazione perfetta con Bubble, consentendo agli sviluppatori di incorporare facilmente la commutazione della lingua nelle loro applicazioni multilingue. Sfruttando le funzionalità avanzate e l'interfaccia utente di Linguise, puoi semplificare la configurazione e la manutenzione dei selettori di lingua sul tuo sito web Bubble .
Ecco i passaggi per installare Linguise su un Bubble.io e configurare il selettore della lingua.
Passo 1: Registra un account Linguise
Inizia creando un creating a free Linguise account gratuito e aggiungendo il dominio del tuo sito web. Puoi utilizzare la prova gratuita di 30 giorni prima di scegliere un piano di abbonamento.
Quindi, 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 lingue di origine e di destinazione.
Passo 2: Aggiungi automaticamente DNS utilizzando Entri
Dopo aver registrato il tuo sito web sulla dashboard di Linguise , avrai due opzioni di installazione.
Per aggiungere automaticamente i 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 presso il tuo provider di dominio.
Cliccando sul pulsante, Entri analizzerà l'URL del tuo sito web registrato e esaminerà i tuoi record DNS pubblici, identificando il provider necessario e i record DNS.
Successivamente, fai clic su "Autorizza con [il tuo provider di dominio]" (ad esempio, Cloudflare). Questa azione ti reindirizzerà alla pagina di accesso del tuo provider di dominio, dove potrai effettuare il login e procedere.
Una volta effettuato l'accesso, Entri aggiungerà automaticamente i record DNS appropriati—un DNS per lingua e un DNS TXT per la chiave di convalida—al tuo dominio.
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 propagate tutte le voci DNS sul tuo dominio, tipicamente in 20-30 minuti.
Per l'installazione manuale, puoi seguire i passaggi forniti di seguito.
Passaggio 3: Copia record DNS
Per l'installazione manuale, sarai 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 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 ogni tipo di record (TXT e CNAME).
Una volta aggiunti tutti i tuoi record, la tua configurazione dovrebbe apparire così.
Passaggio 4: Verifica DNS
Dopo aver aggiunto tutti i tuoi record al DNS del tuo dominio, clicca sul pulsante "Verifica configurazione DNS" per verificare la propagazione DNS.
La convalida DNS solitamente richiede circa 30 minuti-1 ora. Una volta completata, dovresti vedere indicatori verdi accanto all'elenco DNS nella dashboard Linguise . Sei quasi pronto per tradurre il tuo sito web Bubble.io; tutto ciò che resta da fare è collegare lo switcher di lingua con le bandiere dei paesi.
Passo 5: Abilita e cambia lingua
Il selettore di lingua è un popup a bandiera che consente agli utenti di selezionare la propria 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 selettore di lingua a bandiera apparirà quindi automaticamente sul tuo sito web pubblico.
Successivamente, accedi al pannello di controllo 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" sotto "Impostazioni avanzate". Incolla lo Linguise che hai copiato in precedenza, quindi fai clic su "Salva" e pubblica il tuo sito.
Passo 5: Configura visualizzazione principale
Per iniziare a configurare il selettore della lingua, vai alla "Impostazioni" > "Visualizzazione delle bandiere della lingua" nella Linguise . In questa pagina puoi regolare diverse impostazioni.
- Stile icona bandiera: Scegli tra tre opzioni: visualizzazione affiancata, menu a discesa 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 di lingue, bandiere e abbreviazioni di lingue, o solo nomi di lingue. Utilizzare sia bandiere che nomi di lingue è consigliato per una più facile identificazione da parte dell'utente.
Passo 6: Imposta il design della bandiera
Dopo aver configurato la visualizzazione principale, personalizza ulteriormente il design delle bandiere che verranno mostrate.
- Visualizzazione del nome della lingua: è possibile scegliere di visualizzare il nome della lingua in base al nome del paese o al nome della lingua stessa. Ad esempio, è possibile visualizzare "Francese" o "Français".
- Tipo di bandiera inglese: Questa opzione è utile per le lingue con multiple variazioni, 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.
Passo 7: Personalizza colore e dimensioni
Dopo aver configurato il design della bandiera, puoi ulteriormente personalizzare il colore e la dimensione delle bandiere. Ecco le impostazioni che puoi regolare:
- Raggio bordo bandiera: Personalizza il raggio in pixel per lo stile di 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 della lingua nell'area popup o a discesa.
- Dimensioni bandiera: Regola le dimensioni delle icone delle bandiere.
- Colore nome lingua al passaggio del mouse: Imposta il colore del testo che appare quando l'utente passa sopra il nome della lingua.
- Colore hover lingua popup: Imposta il colore del testo che appare quando l'utente passa sopra il titolo della lingua nel popup o nell'area a discesa.
Passo 8: Impostazione dell'ombra della casella della bandiera
Infine, puoi regolare le impostazioni dell'ombra della casella delle bandiere. 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.
Una volta apportate tutte le modifiche desiderate, clicca sul pulsante Salva per applicare le modifiche di personalizzazione. Quindi, visita il tuo sito web Bubble per verificare che la configurazione sia stata applicata con successo. Ecco come apparirà lo switcher di lingua.
Dopo la configurazione, puoi vedere come funziona lo switcher 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 sul sito web multilingue Bubble , è importante considerare i suggerimenti per ottimizzare il selettore di lingua sia per il tuo sito che per i visitatori.
Utilizza un logo della bandiera linguistica facilmente identificabile
Quando si implementa un selettore di lingua sul proprio sito web Bubble.io, utilizzare flag o icone di lingua facilmente riconoscibili è fondamentale. Questi segnali visivi aiutano gli utenti a identificare e selezionare rapidamente la propria lingua preferita. Ad esempio, un'icona del globo è universalmente intesa per rappresentare le opzioni di lingua. In alternativa, è possibile utilizzare le bandiere dei paesi, ma essere consapevoli che ciò può talvolta 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 superiore. Questo approccio semplice ma efficace consente agli utenti di individuare rapidamente le opzioni linguistiche indipendentemente dalla lingua attualmente impostata.
Incorpora i nomi delle lingue accanto alle bandiere
Sebbene le bandiere possano essere utili, non dovrebbero essere utilizzate da sole. Includere il nome della lingua nella sua scrittura nativa accanto alla bandiera o all'icona fornisce chiarezza e evita potenziali confusioni. Ciò è particolarmente importante per le lingue parlate in più paesi o regioni.
Esempio: Il selettore della lingua sul sito web di Airbnb visualizza il nome della lingua e la bandiera del paese. Ad esempio, mostra "Inglese (USA)" con la bandiera degli Stati Uniti e "Francese" con la bandiera francese. Questa combinazione garantisce agli utenti di identificare con precisione la lingua preferita.
Posiziona il pulsante di cambio lingua con attenzione
La posizione del cambio lingua è fondamentale per l'accessibilità degli utenti. Le posizioni comuni includono l'angolo in alto a destra dell'intestazione, nel piè di pagina o all'interno del menu di navigazione principale. La chiave è renderlo facilmente individuabile senza ingombrare l'area dei contenuti principali.
Esempio: Sul sito tiffany.com, il cambio 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 linguistiche indipendentemente dalla loro posizione sul sito
Progettare il selettore di lingua per essere reattivo
Assicurati che il 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 discesa al posto 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 in tutte le pagine
Mantenere lo stesso design, funzionalità e posizione del 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 corrente.
Esempio: Il sito web mantiene il suo selettore di lingua in modo coerente nel piè di pagina in tutte le pagine, dalla homepage alle pagine dei prodotti e al processo di checkout. Questa coerenza garantisce che gli utenti possano facilmente cambiare lingua in qualsiasi momento durante la loro navigazione o esperienza di acquisto.
Configura un selettore di lingua sul tuo sito web utilizzando Linguise!
Now, you already understand how to select the language for the Bubble.io multilingual website. Reading out the language selector can provide various benefits and further lead to optimization based on the previously mentioned points.
Ottimizzare il selettore di lingua in modo efficace può migliorare significativamente l'esperienza dell'utente. Iscriviti per un Linguise account, integralo con il tuo sito web Bubble.io, e personalizza il selettore di lingua per migliorare l'esperienza dell'utente.
