Cet article invité vous est présenté par Daan, de wplift.com. Il a récemment lancé EasyThemePacks, une incroyable bibliothèque premium de templates Elementor. Il va vous montrer exactement comment les traduire avec WPML.
Si vous êtes un utilisateur régulier d'Elementor, vous savez probablement déjà comment Elementor vous permet de créer de superbes designs sans avoir à coder. Mais Elementor peut-il également vous aider à créer de superbes designs multilingues ?
Bonne nouvelle : avec WPML, oui, c'est possible !
À la fin de ce tutoriel, vous saurez exactement comment commencer à créer des sites multilingues conçus avec Elementor, même si vous utilisez l'option Elementor Canvas complètement vide.
Ce dont vous avez besoin pour créer un site multilingue avec Elementor
Voici tout ce dont vous aurez besoin pour suivre ce tutoriel :
- Une page que vous avez conçue avec Elementor – nous utilisons le template Barista Bluegrass d'EasyThemePacks, qui est une page de destination complète basée sur le template vide Elementor Canvas.
- WPML Multilingual CMS – c'est ce qui vous aide à créer un site WordPress multilingue, y compris votre contenu Elementor.
Vous devrez également vous assurer d'installer les autres composants du paquet WPML Multilingual CMS, notamment WPML Traduction de chaînes et la Gestion de traduction de WPML.
Une fois que vous avez ces éléments essentiels, voyons comment vous pouvez utiliser WPML pour créer un site Elementor multilingue !
Étape 1 : installez et activez WPML CMS et ses composants
Une fois que vous avez installé WPML Multilingual CMS et ses composants, vous pouvez utiliser l'assistant de configuration de WPML pour configurer vos paramètres de langue de base (comme les langues dans lesquelles vous souhaitez traduire vos designs Elementor).
Pour cet exemple, nous allons traduire notre template en allemand (avec Google Traduction – désolé pour les éventuelles erreurs, puristes de la grammaire allemande !) :
Assurez-vous également d'activer le gestionnaire de traduction (WPML vous invitera à le faire dans votre tableau de bord – c'est difficile à manquer et il vous suffit de cliquer sur un bouton).
Étape 2 : accédez à la page Elementor que vous souhaitez traduire
Une fois que vous avez configuré les réglages de base de WPML, accédez à l'éditeur du tableau de bord WordPress pour la page Elementor que vous souhaitez traduire (n'ouvrez pas l'éditeur Elementor – restez dans l'éditeur WordPress classique).
Voici à quoi ressemble le template Barista Bluegrass d'EasyThemePacks dans sa langue d'origine, l'anglais :
En quelques minutes seulement, nous pourrons le traduire en allemand !
Étape 3 : créez une nouvelle traduction pour votre design Elementor
Dans l'Éditeur WordPress, cliquez sur l'icône + pour créer une nouvelle traduction de votre design Elementor :
Cela ouvrira un éditeur côte à côte très pratique. Sur le côté gauche, vous verrez toutes les informations de la version anglaise d'origine. WPML récupère chaque chaîne de texte individuelle de votre design Elementor, ainsi que d'autres attributs utiles (comme l'URL vers laquelle un bouton renvoie afin que vous puissiez diriger les utilisateurs vers la bonne traduction).
Pour commencer à traduire votre template Elementor, il vous suffit de saisir la traduction dans la case correspondante sur le côté droit :
Au fur et à mesure, assurez-vous de marquer chaque traduction comme La traduction est terminée afin de pouvoir rapidement identifier ce qui a été fait et ce qui doit encore être traduit. De plus, bien que vous puissiez toujours enregistrer un travail partiel, vous ne pourrez pas afficher votre traduction sur l'interface publique tant que vous n'aurez pas tout marqué comme terminé.
Une fois que vous avez terminé vos traductions et que vous les avez enregistrées, c'est fini ! Désormais, vous pourrez modifier votre traduction existante chaque fois que nécessaire :
Et si vous accédez à l'interface publique de votre site, vous pourrez accéder à la version traduite de votre page en modifiant l'URL selon vos préférences (nous verrons comment créer un sélecteur de langue dans un instant !).
Voici à quoi ressemble la version traduite de notre template EasyThemePacks, y compris la structure de l'URL afin que vous puissiez voir comment tout est localisé :
Que se passe-t-il si vous modifiez le design Elementor d'origine ?
À un moment donné, vous serez probablement confronté à une situation où vous souhaiterez modifier la version d'origine du design Elementor.
Alors, que se passe-t-il ensuite ? Allez-vous perdre votre contenu traduit après avoir effectué les modifications ?
Non !
Si jamais vous utilisez l'interface d'Elementor pour modifier la traduction existante de votre page, WPML marquera simplement ces traductions dans l'éditeur et vous donnera une option pour afficher les différences :
WPML ne modifiera pas les chaînes de texte déjà traduites qui n'ont pas été modifiées. Il vous suffit donc de mettre à jour le texte modifié et le tour est joué !
Qu'en est-il du sélecteur de langue avec le template Elementor Canvas ?
Tous les designs d'EasyThemePacks sont basés sur l'utilisation du template vide Elementor Canvas. Et si vous créez vos propres pages avec Elementor, il y a de fortes chances que vous utilisiez également le template vide Elementor Canvas.
Lorsque vous utilisez ce template, il n'y a pas de menu de navigation ni de barre latérale provenant de votre thème, qui sont les deux endroits où vous ajouteriez habituellement un sélecteur de langue avec WPML.
Alors… comment permettez-vous réellement aux visiteurs d'accéder à la version traduite de votre template Elementor lorsque vous utilisez Elementor Canvas ?
Bien que vous puissiez créer votre propre sélecteur de langue WPML à l'aide de code, le moyen le plus simple consiste simplement à inclure un shortcode de sélecteur de langue dans votre template Elementor.
Pour ce faire, placez le widget Shortcode d'Elementor à l'endroit où vous souhaitez l'afficher et incluez ce shortcode :
{{wpml_language_selector_footer}}
Ce shortcode récupérera les réglages de votre sélecteur de langue de pied de page WPML. Pour configurer ces réglages, accédez à WPML → Langues dans votre tableau de bord WordPress et faites défiler jusqu'à la section Sélecteur de langue de pied de page :
Lorsque vous cliquez sur l'icône en forme de crayon, vous pourrez configurer le fonctionnement de votre sélecteur de langue. Vous pouvez :
- Modifier la mise en page
- Choisir d'afficher ou non les noms des langues et les drapeaux
- Choisir une nouvelle palette de couleurs
- Configurer les styles des éléments individuels
À titre de conseil, l'utilisation du nom de la langue est une excellente option car elle permet aux internautes de rechercher leur langue locale en utilisant CTRL + F.
Dernières réflexions sur la façon de traduire Elementor
Avec le paquet WPML Multilingual CMS, il est facile de traduire n'importe quel template de page Elementor, y compris ceux basés sur Elementor Canvas comme les templates premium disponibles chez EasyThemePacks. Vous pouvez procéder chaîne par chaîne pour traduire tout le contenu que vous créez avec le constructeur de pages visuel Elementor. Et si jamais vous apportez des modifications à votre design Elementor d'origine à l'avenir, WPML vous aidera à trouver ces modifications pour vous assurer de mettre également à jour la version traduite.
Enfin, même si vous utilisez le template vide Elementor Canvas, vous pouvez toujours inclure un sélecteur de langue convivial via les shortcodes de WPML ou la méthode de code personnalisé vers laquelle nous avons fait un lien.
Avez-vous d'autres questions sur la façon de traduire vos designs Elementor ? Laissez un commentaire !
