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:
- Migliora il coinvolgimento e la fidelizzazione degli utenti:
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.
Uno dei servizi di traduzione automatica che soddisfa questi criteri è Linguise. Linguise la traduzione automatica offre una funzione di cambio lingua altamente personalizzabile e facile da usare che .io.
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 sul tuo sito web Bubble.io e configurare il selettore di lingua.
Passo 1: Registra un account Linguise
Inizia creando un 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, clicca su “Collega 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 sul 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, clicca su “Autorizza con [il tuo provider di dominio]” (ad esempio, Cloudflare). Questa azione ti reindirizzerà alla pagina di login del tuo provider di dominio, dove potrai accedere 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, vai al pannello del sito web Bubble. Clicca ‘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 script Linguise che hai copiato in precedenza, quindi clicca su 'Salva' e pubblica il tuo sito.
Passo 5: Configura visualizzazione principale
Per iniziare a configurare il selettore di lingua, vai alla sezione “Impostazioni” > “Visualizzazione bandiere lingua” nel cruscotto Linguise. In questa pagina, puoi 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; 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.
- Visualizza nome 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 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 del 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 dalle loro impostazioni linguistiche correnti.
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 di lingua sul sito web di Airbnb visualizza il nome della lingua e la bandiera del paese. Ad esempio, mostra “Italiano (IT)” con la bandiera italiana e “Français” con la bandiera francese. Questa combinazione assicura che gli utenti possano identificare con precisione l'opzione di 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:
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 su tutti i dispositivi. Sul desktop, appare come un elenco orizzontale nell'intestazione. Su dispositivi mobili, si trasforma in un menu a discesa compatto, garantendo l'usabilità 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.
