Beaver Builder est un constructeur de pages WordPress par glisser-déposer très populaire. Dans ce tutoriel, nous vous montrerons comment traduire des sites Beaver Builder en utilisant TranslatePress.
À l'instar de l'approche « front-end » de Beaver Builder pour la création de contenu et de modèles, TranslatePress adopte la même approche visuelle pour la traduction de l'ensemble du contenu de votre site (images, diaporamas, formulaires, fenêtres contextuelles, etc.).
Construction d'un bâtiment site multilingue utilisant Beaver Builder et TranslatePress n'a jamais été aussi facile.
Nous allons maintenant vous présenter les étapes simples à suivre pour traduire des sites créés avec Beaver Builder à l'aide de TranslatePress.
Créer votre site web en utilisant Beaver Builder
Grâce à son éditeur visuel en glisser-déposer, Beaver Builder permet de créer un site web à partir de zéro de manière rapide et intuitive. De plus, vous n'avez besoin d'aucune connaissance en codage.
Il est disponible en version gratuite et payante. Le version gratuite fournit des éléments standards pour aborder la structure et le contenu de votre site. Vous pouvez facilement ajouter des lignes et les diviser en colonnes. Ensuite, remplissez-les de contenu sous forme de texte, d'images, de titres, de HTML et plus encore.
La version payante de Beaver Builder est livré avec des modules premium et de nombreux modèles parmi lesquels vous pouvez choisir. Vous avez également accès à un thème Beaver Builder qui offre un contrôle étendu de l'en-tête, du pied de page et du style de votre site.
Création de notre première page avec Beaver Builder
Une fois le plugin Beaver Builder installé et activé, vous serez redirigé vers la page des réglages du plugin.
Ensuite, nous allons démarrer et créer notre première page web. Naviguez simplement vers Pages et cliquez Ajouter une page.
Clique sur Lancer Beaver Builder bouton et vous serez dirigé vers l'interface visuelle front-end où vous pourrez commencer à construire votre page.
L'éditeur Beaver Builder vous permettra de choisir des Modules, des Lignes ou des Modèles qui pourront être utilisés pour personnaliser votre page et ajouter du contenu.
Pour accélérer les choses, nous utiliserons l'un des modèles existants. Sous Modèles vous avez de nombreuses options parmi lesquelles choisir, nous allons opter pour une page d'accueil d'agence.
Une fois que vous avez sélectionné le modèle, vous remarquerez qu'il s'affiche sur votre page.
Vous pouvez facilement déplacer des éléments de contenu, personnaliser leurs paramètres et options d'affichage, et même les dupliquer si nécessaire. Beaver Builder offre une grande flexibilité que je vous invite à explorer.
Voici à quoi ressemble notre page créée avec Beaver Builder :
Vous pouvez appliquer la même approche visuelle à la création et à la mise en forme du contenu pour le reste de votre site web.
Traduire les sites Beaver Builder à l'aide de TranslatePress
Maintenant que vous avez vu comme il est facile de créer votre site web avec l'interface de glisser-déposer de Beaver Builder, regardons les étapes simples nécessaires pour le rendre multilingue.
Ajout d'une deuxième langue à votre site Beaver Builder
Pour ce tutoriel, nous allons voir comment traduire la page que nous avons créée avec Beaver Builder dans une seconde langue (disons l'italien).
Nous allons commencer par installation et activation le plugin multilingue TranslatePress.
Une fois que TranslatePress sera activé, vous remarquerez un nouveau Site élément ajouté dans la barre d'administration.
Passez simplement la souris dessus et cliquez Paramètres. Vous serez alors redirigé vers la page des paramètres de TranslatePress.
La première chose que vous remarquerez est Langues de traduction. D'ici, vous pouvez ajouter les langues de traduction dans lesquelles votre site multilingue Beaver Builder sera disponible.
L'anglais est notre langue par défaut, nous ajouterons donc également “ italien ” en le sélectionnant dans le menu déroulant des langues et en cliquant sur Ajouter bouton.
Vous pouvez ajouter autant de langues que votre projet nécessite en utilisant Module linguistique multiple pour TranslatePress. La version gratuite est limitée à deux langues.
Il y a quelques autres choses que vous pouvez configurer (des choses comme Traduction Google intégration pour traduction automatique, ou personnalisation du sélecteur de langue), mais nous allons les ignorer pour l'instant et cliquer Enregistrer les modifications.
Traduire votre page Beaver Builder à l'aide de TranslatePress
Nous sommes maintenant prêts à commencer la traduction de notre site web Beaver Builder.
Pour commencer à traduire votre site en italien, vous pouvez soit cliquer sur Site onglet bleu dans les paramètres TranslatePress ou rendez-vous simplement sur la page que vous souhaitez traduire et cliquez sur le Traduire la page élément dans le menu de la barre d'administration (situé juste à côté Beaver Builder).
Cela ouvrira l'éditeur de traduction visuel TranslatePress. Grâce à lui, vous pourrez traduire toutes les chaînes de texte de votre page et voir les modifications en temps réel.
Une fois que vous survolez un texte que vous souhaitez traduire, une icône de crayon apparaîtra, et en cliquant dessus, vous pourrez insérer la traduction correspondante. Cliquez Sauvegarder la traduction et vous avez terminé, vous pouvez passer au morceau de texte suivant.
Découvrez la rapidité avec laquelle nous avons traduit la section Services en italien :
Vous pouvez retrouver toutes les chaînes de votre page dans le menu déroulant « Liste des chaînes » de l'éditeur TranslatePress. Il y a raccourcis clavier disponible pour accélérer le processus de traduction et vous permettre de naviguer plus facilement dans tout le texte d'une page.
TranslatePress fonctionne dès son installation avec tout type de contenu créé à l'aide de Beaver Builder. Le même processus de traduction peut être appliqué à tous les éléments d'une page, que vous traduire un menu WordPress, un formulaire de contact, ou même un image contenant du texte.
Si vous souhaitez créer une boutique multilingue avec WooCommerce, TranslatePress vous facilite la tâche pour traduire les produits WooCommerce aussi.
Ajouter un sélecteur de langue à votre site
Enfin, que serait un site multilingue sans un sélecteur de langue ? Rassurez-vous, TranslatePress s'en charge également.
Par défaut, dès que vous ajoutez une langue secondaire dans les paramètres de TranslatePress, un menu déroulant flottant permettant de sélectionner la langue s'affiche automatiquement sur l'interface publique de votre site. Ce menu accompagnera l'utilisateur sur toutes les pages.
Une fois que vous passerez la souris dessus, il affichera toutes les langues disponibles.
Vous avez trois options pour afficher des sélecteurs de langue sur votre site web :
- Code court (Utiliser le court code sur n'importe quelle page ou widget) ;
- Élément de menu (Aller à Apparence → Menus pour ajouter un sélecteur de langue dans n'importe quel menu) ;
- Sélection de langue flottante (Avoir un menu déroulant flottant qui suit l'utilisateur sur chaque page. Comme mentionné précédemment, ceci est défini par défaut).
Traduire le reste de votre site Multilingual Beaver Builder
En tournant votre Site Beaver Builder multilingue C'est vraiment très simple avec TranslatePress.
Vous naviguez simplement sur le site, page par page, en utilisant l'éditeur de traduction visuel, sélectionnez un certain texte, survolez et cliquez sur l'icône du crayon, puis entrez sa traduction. Sauvegardez et passez au suivant.
Faites cela pour les chaînes restantes et vous aurez vos pages et votre site Web traduits en un rien de temps.
Si vous n'avez pas encore utilisé TranslatePress, n'oubliez pas de jouez avec notre démo.
C'est rapide (ne ralentira pas votre site), SEO friendly,et vraiment facile à utiliser.