Avec sa version thème et sa version plugin, Divi est l'un des moyens les plus populaires et flexibles pour créer un site WordPress. Mais bien que Divi offre une énorme flexibilité de conception, il n'existe aucun moyen intégré pour traduire les sites Divi, c'est pourquoi vous êtes probablement ici à lire cet article.
Dans ce tutoriel, vous apprendrez à traduire un site Divi à l'aide de la version gratuite du plugin TranslatePress.
S'il y a une chose Divi les utilisateurs adorent, c'est sa conception visuelle, et TranslatePress apporte cette même approche visuelle à la création d'un site multilingue avec Divi.
À la fin de ce post, vous pourrez traduire tout votre contenu Divi, y compris les images, les formulaires, les boutons, etc., à l'aide d'une interface visuelle, simplement en cliquant sur un aperçu en direct de votre site :
Prêt à apprendre comment traduire n'importe quel site Divi ? Plongeons dans le vif du sujet…
*Cette méthode fonctionnera pour la version du thème et du plugin de Divi.
Comment traduire des sites Divi avec TranslatePress : guide étape par étape
Voici une vue d'ensemble du processus de création d'un site multilingue avec Divi :
- Concevez votre contenu à l'aide du Divi Builder
- Configurer les paramètres de base de TranslatePress
- Utiliser l'interface de l'éditeur de traduction visuelle ’ TranslatePress »
- Ajoutez un sélecteur de langue en frontal à votre site Divi multilingue
1. Créez Votre Contenu Avec Divi
Divi est disponible en version thème et en version plugin Divi Page Builder. Dans les deux cas, vous pourrez utiliser une interface visuelle par glisser-déposer pour concevoir votre contenu. Ou, vous pouvez également utiliser une interface de backend abstraite si vous préférez cette approche.
Pour commencer, utilisez Divi pour créer tout le contenu que vous souhaitez utiliser sur votre site. Ne vous souciez pas de la langue pour l'instant – créez simplement le contenu dans la langue par défaut que vous souhaitez pour votre site.
Pour ce tutoriel, nous allons choisir l'une des nombreuses mises en page prédéfinies de Divi, car elle fournira beaucoup de contenu exemple à traduire. Vous pouvez également créer votre propre contenu à partir de zéro, c'est totalement à vous de décider :
Divi est livré avec plus de deux mille modèles préconçus, ainsi que 342 “ packs de mise en page ” dédiés, qui sont essentiellement un ensemble de modèles thématiques pour une niche de site Web spécifique.
Après avoir importé le modèle de page d'accueil d'un des packs de mise en page de site web de services électriques et l'avoir personnalisé un peu, voici à quoi ressemble notre site Divi :
N’hésitez pas à personnaliser le contenu et à le réorganiser à votre guise grâce à l’interface « glisser-déposer » de Divi : quels que soient les éléments que vous ajoutez avec Divi, vous pourrez tout traduire avec TranslatePress lors des étapes suivantes.
Vous pouvez modifier n'importe quel texte, changer le style, ajouter des formulaires, des curseurs, etc. Lâchez-vous !
2. Configurer les paramètres de base du TranslatePress
Une fois que vous avez terminé la création de votre contenu Divi, vous êtes prêt à le traduire avec TranslatePress.
Avant de faire cela, cependant, vous devez effectuer quelques tâches de maintenance de base, comme choisir les langues que vous souhaitez proposer votre contenu Divi dans.
Pour commencer, installez et activez le plugin gratuit TranslatePress. Une fois le plugin activé, rendez-vous sur Paramètres → TranslatePress pour configurer les paramètres de base.
Votre premier choix est les langues à utiliser sur votre site. Utilisez les Langue par défaut menu déroulant pour choisir la langue dans laquelle votre site existe actuellement (par exemple Anglais). Ensuite, utilisez le Toutes les langues section pour ajouter autant de nouvelles langues que nécessaire.
La version gratuite de TranslatePress vous permet d'ajouter une langue supplémentaire, mais vous pouvez mettre à niveau à la version payante pour traduire votre contenu Divi dans un nombre illimité de nouvelles langues :
Un autre choix important ici est d'utiliser ou non la traduction automatique, que vous pouvez configurer depuis le Traduction automatique onglet.
Si vous voulez gagner du temps, vous pouvez utiliser le API Google Translate pour traduire automatiquement 100% du contenu de votre site, y compris tout votre contenu Divi. Vous pourrez ensuite revenir en arrière et peaufiner manuellement vos traductions là où cela s'avère nécessaire :
La version premium de TranslatePress prend également en charge le Traduction automatique DeepL service.
N'hésitez pas à consulter les autres réglages, car vous pourriez y trouver quelque chose de pertinent pour votre site Divi. Ensuite, une fois que vous aurez enregistré vos modifications, vous serez prêt à passer à la traduction du contenu Divi.
3. Utiliser l'éditeur visuel TranslatePress pour traduire des sites Divi
Pour traduire votre site Divi, vous utiliserez l'éditeur de traduction visuel en mode front-end de TranslatePress.
Pour accéder à cet éditeur, ouvrez la page Divi que vous souhaitez traduire sur le front-end de votre site. Puis, cliquez sur Traduire la page bouton sur la barre d'outils WordPress :
Cela ouvrira l'éditeur de traduction visuel, qui vous permettra de traduire 100% du contenu de votre site.
Pour traduire un contenu spécifique, il suffit de le survoler et de cliquer sur l'icône du crayon bleue ou verte. Cela ouvrira la traduction de ce contenu dans la barre latérale, où vous pourrez apporter vos modifications :
Dès que vous enregistrez votre traduction, celle-ci apparaît dans l'éditeur en temps réel lorsque vous consultez la langue concernée, ce qui vous permet de vous assurer que la mise en page de votre site est toujours parfaite.
Pour passer rapidement d'une traduction à l'autre, vous pouvez Utiliser les raccourcis clavier ’ TranslatePress ».
La puissance de cette approche est que vous pouvez l'utiliser pour tout du contenu de votre site, y compris les images, les liens des boutons, les éléments de menu, pop-ups...tout !
Passons en revue quelques exemples…
Traduire les boutons/liens dans Divi
Comme vous l'avez vu ci-dessus, notre site Divi contient deux boutons/liens :
- Bouton de soumission – mène à une page interne affichant un message de succès.
- Réserver.
Pour traduire un bouton, il suffit de le survoler et de cliquer sur l'icône en forme de crayon bleu.
Ce qui est différent, cependant, c'est que vous pouvez traduire les deux le texte du bouton et le lien du bouton. Pour notre exemple de site électrique, cela signifie que vous pouvez envoyer les visiteurs hispanophones directement vers la version espagnole de Google Calendar :
TranslatePress modifie automatiquement les liens internes pour qu'ils redirigent vers la version linguistique appropriée ; vous n'avez pas besoin de modifier manuellement ces liens..
Traduire les éléments du menu Divi, les widgets, les pieds de page, etc.
Le principe « TranslatePress » ne s'applique pas uniquement au contenu à l'intérieur le Divi Builder – il vous permet également de traduire le contenu du thème Divi (ou de tout autre thème WordPress). Cela inclut votre menus de navigation et tous les widgets que vous utilisez dans votre barre latérale ou votre pied de page. Il détecte également et vous permet de modifier/traduire les chaînes gettext ajouté par le thème Divi ou le plugin page builder.
Une fois que vous aurez traduit le texte une première fois, TranslatePress utilisera automatiquement cette traduction sur l'ensemble de votre site :
Traduire des images
Outre le contenu textuel, TranslatePress vous permet également de “traduire des images. Cela signifie que vous pouvez utiliser différentes images en fonction de la langue dans laquelle un visiteur navigue.
Par exemple, vous pouvez utiliser un logo différent pour différentes langues. Ou, vous pouvez traduire une image utilisée dans votre contenu pour une meilleure localisation.
Pour traduire une image, vous pouvez utiliser la même approche : placez le curseur dessus et cliquez sur l'icône bleue en forme de crayon. Ensuite, vous pouvez utiliser la barre latérale pour choisir une nouvelle image dans votre bibliothèque de médias WordPress ou entrer l'URL d'une image externe.
Voici à quoi ressemble la traduction du logo dans le thème Divi :
Et cela fonctionne de la même manière pour les images dans votre contenu, ou même images dans un curseur que vous avez créé avec le module carrousel de Divi :
Traduction de formulaires
Enfin, examinons un autre exemple spécifique pertinent lorsque vous créez un site multilingue avec Divi – vos formulaires.
Pratiquement tous les sites Divi utilisent le module de formulaire de contact ou le module d'inscription par e-mail de Divi, la traduction de ces modules est donc une considération importante lors de la traduction d'un site Divi.
Comme vous l'avez sans doute déjà deviné, TranslatePress vous permet d'utiliser la même approche « pointer-cliquer » pour traduisez vos formulaires, aussi.
Vous pouvez même traduire le texte de substitution qui apparaît à l'intérieur champs de formulaire:
Et voilà ! Que vous souhaitiez traduire du texte, des boutons, des liens, des éléments de menu, des widgets ou tout autre élément, la traduction de votre site Divi se fait en quelques clics grâce à TranslatePress.
4. Configurez votre sélecteur de langue frontend
Par défaut, TranslatePress ajoute un sélecteur de langue au coin inférieur droit de votre site, que vous avez probablement vu dans les captures d'écran d'exemple ci-dessus.
Toutefois, si vous souhaitez modifier ce comportement par défaut, TranslatePress vous propose également plusieurs autres options pour choisir l'emplacement où ajouter le sélecteur de langue sur votre site Divi multilingue.
Une option consiste à l'ajouter comme élément de menu de navigation, ce que vous pouvez faire en ajoutant le Sélecteur de langue éléments de menu (Apparence → Menus):
Voici à quoi cela ressemble sur le front-end de votre site :
Vous pouvez également afficher un sélecteur de langue avec
Créez un site multilingue avec Divi aujourd'hui
Divi vous donne le pouvoir de créer un magnifique site WordPress avec un éditeur visuel en glisser-déposer.
Ensuite, TranslatePress vous permet de reprendre ce superbe design et de le transposer dans de nouvelles langues grâce à une expérience de traduction visuelle tout aussi simple.
Quand vous combinez les deux, vous pouvez créer des produits vraiment personnalisés Sites WordPress accessibles aux visiteurs du monde entier.
Tout ce que vous avez vu ci-dessus peut être fait avec le version gratuite de TranslatePress sur WordPress.org. Pour plus de souplesse, cependant, vous pouvez envisager passer à la version premium de TranslatePress, qui propose…
- Prise en charge des champs dynamiques (super si vous utilisez La fonctionnalité de contenu dynamique de Divi)
- Prise en charge plus détaillée de SEO multilingue
- Prise en charge de langues de traduction illimitées
- Intégration avec DeepL pour la traduction automatique
- Comptes de traducteurs dédiés
- La possibilité de parcourir votre site en tant que différents rôles d'utilisateur (super pour les sites à contenu restreint)
Pour en savoir plus sur les fonctionnalités premium, aller à la page de tarification.