La configuration d'un sélecteur de langue sur le Bubble.io peut permettre aux utilisateurs de changer plus facilement de langue. Cette fonctionnalité est particulièrement intéressante pour les applications ayant un public mondial, permettant aux utilisateurs d'interagir avec la plateforme dans leur langue préférée. Bubble.io, une plateforme de développement sans code populaire, offre des fonctionnalités de localisation intégrées qui permettent aux développeurs de créer des applications multilingues sans connaissances approfondies en codage.
Pour implémenter un sélecteur de langue dans Bubble.io, les développeurs commencent généralement par définir les langues qu'ils souhaitent prendre en charge dans les paramètres de l'application. Ils créent ensuite un élément de liste déroulante ou de bouton avec lequel les utilisateurs peuvent interagir pour changer la langue. Dans cet article, nous discuterons de la configuration d'un sélecteur de langue sur Bubble.io avec l'un des sites Web de services de traduction automatique.
L’ajout d’un sélecteur de langue sur un site web n’est pas sans raison. Voici pourquoi vous devez en créer un sur un site web Bubble.
Maintenant que nous comprenons l'importance de changer de langue sur les sites Web Bubble.io multilingues, voyons comment le mettre en œuvre. Les services de traduction de sites Web offrent généralement cette fonctionnalité, qui peut être adaptée aux besoins de l'utilisateur.
Cependant, tous les services de traduction ne proposent pas de sélecteurs de langue personnalisables et conviviaux. Par conséquent, il est très important de choisir un service de traduction automatique compatible avec différents frameworks et offrant des fonctionnalités flexibles de changement de langue.
Un service de traduction automatique qui répond à ces critères est Linguise . Linguise offre une fonctionnalité de changement de langue hautement personnalisable et facile à utiliser qui s'intègre aux CMS et aux créateurs de sites Web populaires tels que Bubble.io.
Linguise offre une intégration transparente avec Bubble, permettant aux développeurs d'intégrer facilement le changement de langue dans leurs applications multilingues. En tirant parti des fonctionnalités avancées et de l'interface conviviale de Linguise , vous pouvez simplifier la configuration et la maintenance des sélecteurs de langue sur votre site web Bubble.
Voici les étapes pour installer Linguise sur un site Web Bubble.io et configurer le sélecteur de langue.
Commencez par compte Linguise gratuit et ajoutez le domaine de votre site Web. Vous pouvez utiliser l'essai gratuit de 30 jours avant de choisir un plan d'abonnement.
Ensuite, vous devrez enregistrer votre domaine pour autoriser la traduction. Copiez votre nom de domaine, y compris « https:// », et sélectionnez « autre » comme plateforme.
Ensuite, sélectionnez vos langues source et cible.
Après avoir enregistré votre site web sur le tableau de bord Linguise , vous aurez deux options d'installation.
Pour l’ajout automatique d’enregistrements DNS, cliquez sur « Connectez votre DNS automatiquement ». Cette fonctionnalité, appelée Entri, simplifie le processus d'installation en gérant les enregistrements DNS pour vous. Vous pouvez également copier manuellement les enregistrements DNS vers votre fournisseur de domaine.
En cliquant sur le bouton, Entri analyse l'URL de votre site web enregistré et examine vos enregistrements DNS publics, en identifiant le fournisseur et les enregistrements DNS nécessaires.
Ensuite, cliquez sur « Autoriser auprès de [votre fournisseur de domaine] » (par exemple, Cloudflare). Cette action vous redirige vers la page de connexion de votre fournisseur de domaine, où vous pouvez vous connecter et continuer.
Une fois connecté, Entri ajoutera automatiquement les enregistrements DNS appropriés (un DNS par langue et un DNS TXT pour la clé de validation) à votre domaine.
Après autorisation, Entri vous informera que tous les paramètres DNS ont été configurés avec succès. La fonctionnalité de traduction devrait être utilisable une fois que toutes les entrées DNS se propagent sur votre domaine, ce qui prend généralement 20 à 30 minutes.
Pour une installation manuelle, vous pouvez suivre les étapes ci-dessous.
Pour une installation manuelle, vous serez redirigé vers un écran affichant les enregistrements DNS nécessaires à la configuration de vos pages multilingues, telles que fr.domain.com ou es.domain.com.
Copiez ces éléments dans votre configuration DNS Bubble.io.
Ensuite, accédez à votre gestionnaire de domaine et accédez à la zone de configuration DNS. Suivez les instructions pour copier :
Voici des exemples pour chaque type d'enregistrement (TXT et CNAME).
Une fois que vous avez ajouté tous vos enregistrements, votre configuration devrait ressembler à ceci.
Après avoir ajouté tous vos enregistrements au DNS de votre domaine, cliquez sur le bouton « Vérifier la configuration DNS » pour vérifier la propagation DNS.
La validation DNS prend généralement entre 30 minutes et 1 heure. Une fois terminé, vous devriez voir des indicateurs verts à côté de la liste DNS dans le tableau de bord Linguise . Vous êtes presque prêt à traduire votre site web Bubble.io ; il ne reste plus qu'à créer un lien vers le sélecteur de langue avec les drapeaux des pays.
Le sélecteur de langue est un indicateur contextuel qui permet aux utilisateurs de sélectionner leur langue préférée. Pour le mettre en œuvre, copiez le code fourni à la fin du processus d'enregistrement du domaine ou dans les paramètres du domaine dans l'en-tête des pages de votre site Bubble.io. Le sélecteur de langue du drapeau apparaîtra alors automatiquement sur votre site web public.
Ensuite, accédez au panneau de votre site Web Bubble. Cliquez sur « Paramètres » dans le menu de la barre latérale de gauche et sélectionnez « SEO/balises méta ».
Faites défiler jusqu'à « Script/balises méta dans l'en-tête » sous « Paramètres avancés ». Collez le Linguise que vous avez copié précédemment, puis cliquez sur « Enregistrer » et publiez votre site.
Pour commencer à configurer le sélecteur de langue, accédez à la « Paramètres » > « Affichage des indicateurs de langue » dans le Linguise . Sur cette page, vous pouvez ajuster plusieurs paramètres
Vous pouvez combiner l'affichage des drapeaux et des noms de langues, des drapeaux et des abréviations de langues, ou simplement des noms de langues. Il est recommandé d'utiliser à la fois des indicateurs et des noms de langue pour faciliter la reconnaissance de l'utilisateur.
Après avoir configuré l'affichage principal, personnalisez davantage le design des drapeaux qui seront affichés.
Après avoir configuré le design du drapeau, vous pouvez personnaliser davantage la couleur et la taille des drapeaux. Voici les paramètres que vous pouvez ajuster :
Enfin, vous pouvez ajuster les paramètres d’ombre de la zone de drapeau. La première option vous permet d'appliquer un effet d'ombre à chaque icône de drapeau affichée sur votre site web. L'option suivante contrôle l'effet d'ombre lorsque les utilisateurs passent leur souris sur les drapeaux de langue.
Une fois que vous avez effectué tous les ajustements souhaités, cliquez sur le bouton Enregistrer pour appliquer les modifications de personnalisation. Ensuite, visitez votre site web Bubble pour vérifier que la configuration a été appliquée avec succès. C'est ainsi que le sélecteur de langue apparaîtra.
Après la configuration, vous pouvez voir comment fonctionne le sélecteur de langue sur votre site web multilingue Bubble.
Ensuite, vous pouvez traduire le site web dans d’autres langues comme l’espagnol.
Après avoir configuré avec succès le sélecteur de langue sur un site web multilingue Bubble, il est important de prendre en compte les conseils permettant d'optimiser le sélecteur de langue pour votre site et pour les visiteurs.
Lors de la mise en œuvre d'un sélecteur de langue sur votre site web Bubble.io, l'utilisation de drapeaux ou d'icônes de langue facilement reconnaissables est cruciale. Ces repères visuels aident les utilisateurs à identifier et à sélectionner rapidement leur langue préférée. Par exemple, une icône en forme de globe est universellement considérée comme représentant les options de langue. Vous pouvez également utiliser des drapeaux de pays, mais sachez que cela peut parfois poser problème car les langues ne sont pas toujours liées à un seul pays.
Exemple : le site Web d'Amazon utilise une petite icône en forme de globe à côté de la langue actuellement sélectionnée (par exemple, « EN ») dans la barre de navigation supérieure. Cette approche simple mais efficace permet aux utilisateurs de localiser rapidement les options de langue, quel que soit leur paramètre de langue actuel.
Même si les indicateurs peuvent être utiles, ils ne doivent pas être utilisés seuls. L’inclusion du nom de la langue dans son écriture native à côté du drapeau ou de l’icône apporte de la clarté et évite toute confusion potentielle. Ceci est particulièrement important pour les langues parlées dans plusieurs pays ou régions.
Exemple : le sélecteur de langue sur le site Web Airbnb affiche le nom de la langue et le drapeau du pays. Par exemple, il affiche « English (US) » avec le drapeau américain et « Français » avec le drapeau français. Cette combinaison garantit que les utilisateurs peuvent identifier avec précision leur option linguistique préférée.
L'emplacement de votre sélecteur de langue est essentiel pour l'accessibilité des utilisateurs. Les emplacements courants incluent le coin supérieur droit de l’en-tête, dans le pied de page ou dans le menu de navigation principal. La clé est de le rendre facilement détectable sans encombrer la zone de contenu principale.
Exemple : Sur le site tiffany.com, le sélecteur de langue se trouve dans le coin inférieur droit de la page, toujours visible et accessible. Ce placement cohérent garantit que les utilisateurs peuvent trouver et utiliser rapidement les options linguistiques, quel que soit l'endroit où ils se trouvent sur le site.
Assurez-vous que votre sélecteur de langue fonctionne correctement sur tous les appareils, des ordinateurs de bureau aux smartphones. Sur des écrans plus petits, vous devrez peut-être adapter la conception, par exemple en utilisant un menu déroulant au lieu d'une liste horizontale d'options.
Exemple : le sélecteur de langue du site Web de l'UNESCO s'adapte parfaitement à tous les appareils. Sur le bureau, il apparaît sous forme de liste horizontale dans l'en-tête. Sur mobile, il se transforme en un menu déroulant compact, garantissant la convivialité sans compromettre la mise en page mobile.
Conservez la même conception, la même fonctionnalité et la même position de votre sélecteur de langue sur toutes les pages de votre site web Bubble.io. Cette cohérence aide les utilisateurs à naviguer plus efficacement sur votre site, car ils savent exactement où trouver les options linguistiques, quelle que soit leur page actuelle.
Exemple : le site Web conserve son sélecteur de langue de manière cohérente dans le pied de page de toutes les pages, de la accueil aux pages de produits et au processus de paiement. Cette cohérence garantit que les utilisateurs peuvent facilement changer de langue à tout moment au cours de leur expérience de navigation ou d'achat.
Maintenant, vous comprenez déjà comment sélectionner la langue du site multilingue Bubble.io. La lecture du sélecteur de langue peut offrir divers avantages et conduire en outre à une optimisation basée sur les points mentionnés précédemment.
L'optimisation efficace du sélecteur de langue peut améliorer considérablement l'expérience utilisateur. Créez un Linguise , intégrez-le à votre site Web Bubble.io et personnalisez le sélecteur de langue pour améliorer l'expérience utilisateur.
Recevez des nouvelles sur la traduction automatique de sites Web, le référencement international et plus encore !
Ne partez pas sans partager votre email !
Nous ne pouvons pas garantir que vous gagnerez à la loterie, mais nous pouvons vous promettre des informations intéressantes sur la traduction et des remises occasionnelles.
