Dans ce post
Dans ce post
Vous souhaitez ajouter un sélecteur de langue Elementor afin de pouvoir proposer vos créations Elementor en plusieurs langues ?
Elementor est le plugin constructeur de pages WordPress le plus populaire et il vous permet de créer des sites web incroyables et dynamiques. Mais si vous souhaitez proposer ces sites web en plusieurs langues, vous aurez besoin de l'aide d'un plugin tiers.
TranslatePress est un plugin WordPress multilingue gratuit qui offre une prise en charge approfondie d'Elementor, notamment en vous permettant d'ajouter un sélecteur de langue Elementor flexible à diverses parties de vos conceptions.
Dans cet article, nous allons vous montrer comment utiliser le plugin gratuit TranslatePress pour ajouter un sélecteur de langue à Elementor, et comment traduire votre contenu Elementor, que ce soit manuellement ou à l'aide d'outils tels que Google Translate.
Voici un exemple d'ajout d'un sélecteur de langue à un modèle de constructeur de thèmes, mais vous obtiendrez également d'autres options pour placer votre sélecteur de langue :
En plus de vous permettre d'ajouter le sélecteur de langue, TranslatePress propose également d'autres intégrations avec Elementor, telles que la possibilité d'afficher ou de masquer certains widgets et sections Elementor en fonction de la langue choisie par le visiteur.
Avant de commencer, voici un bref tutoriel vidéo expliquant comment faire ceci rapidement :
Mais si vous souhaitez entrer davantage dans les détails et progresser à votre rythme, continuez à lire cet article.
Prêt à partir ? Voici comment le configurer…
Comment ajouter un sélecteur de langue Elementor gratuitement
Pour créer votre sélecteur de langue, vous avez besoin du plugin gratuit TranslatePress.
TranslatePress est un plugin WordPress multilingue complet, ce qui signifie qu'il vous permet à la fois de traduire votre contenu et d'ajouter un sélecteur de langue accessible depuis l'interface publique, que vos visiteurs peuvent utiliser.
TranslatePress vous permet d'utiliser à la fois la traduction automatique et la traduction manuelle (ou une combinaison des deux) et vous pourrez gérer toutes vos traductions via un éditeur visuel de type « pointer-cliquer », tout comme Elementor vous permet d'utiliser un éditeur visuel pour créer vos mises en page :
En prime, TranslatePress propose également des intégrations spéciales pour Elementor, qui vous permettent notamment d'afficher ou de masquer certains widgets et certaines sections en fonction de la langue choisie par l'utilisateur.
Vous pourrez utiliser la version gratuite de TranslatePress pour ajouter votre sélecteur de langue et traduire le contenu de votre site Elementor dans une nouvelle langue. Pour prendre en charge un nombre illimité de langues et accéder à d'autres fonctionnalités avancées, vous pouvez également passer à la version payante de TranslatePress. Nous ne manquerons pas de signaler les fonctionnalités qui nécessitent la version payante.
TranslatePress Multilingue
Voici le processus de base :
- Installez TranslatePress et sélectionnez vos langues ;
- Personnalisez votre sélecteur de langue Elementor ;
- Traduisez votre contenu.
Examinons chaque étape en détail...
1. Installez TranslatePress et sélectionnez les langues
Pour commencer, installez et activez le plugin gratuit TranslatePress disponible sur WordPress.org.
Une fois le plugin activé, allez à Paramètres → TranslatePress pour choisir les langues que vous souhaitez
- Langue par défaut – la langue dans laquelle le contenu de votre site Elementor existe actuellement.
- Toutes les langues – une ou plusieurs nouvelles langues dans lesquelles vous souhaitez traduire le contenu de votre site Elementor. La version gratuite prend en charge une nouvelle langue, tandis que la version premium de TranslatePress permet des langues illimitées.
Ce sont également les langues qui apparaîtront comme options dans votre sélecteur de langue.
Pour le processus d'installation et de configuration de TranslatePress, vous pouvez également regarder ce tutoriel vidéo :
2. Personnalisez votre sélecteur de langue Elementor
Par défaut, TranslatePress ajoute un sélecteur de langue flottant dans le coin inférieur droit de votre site, qui répertorie toutes les langues que vous avez sélectionnées à l’étape précédente. Ce sélecteur de langue s’affichera sur toutes les pages*, que vous ayez ou non créé la page avec Elementor.
* Remarque – si vous exclure un certain contenu de la traduction, le sélecteur de langue n’apparaîtra pas sur les pages où vous avez désactivé la traduction.
Si vous souhaitez modifier l'emplacement, TranslatePress vous permet également de positionner votre sélecteur de langue à l'aide d'un shortcode ou d'un élément de menu, et de modifier son comportement (comme afficher uniquement le nom de la langue et masquer le drapeau).
Vous pouvez gérer tous ces paramètres depuis le Sélecteur de langue onglet de la section des paramètres TranslatePress (Paramètres → TranslatePress → Sélecteur de langue).
Ici, vous verrez trois options pour ajouter un sélecteur de langue à votre site Elementor, et vous trouverez également de nombreuses options de personnalisation concernant son apparence et son fonctionnement.
Voyons maintenant comment vous pouvez utiliser ces options pour placer votre sélecteur de langue dans les designs Elementor.
Utiliser le shortcode du sélecteur de langue dans Elementor
Par exemple, pour ajouter un sélecteur flottant qui reste en haut de chaque page de votre site et suit.
Vous pouvez simplement appliquer un préréglage de conception et le laisser tel quel, ou partir d’un préréglage et le personnaliser pour qu’il corresponde parfaitement au design de votre site. N’hésitez pas à jouer avec les couleurs, les tailles, les bordures, les animations, les drapeaux, et plus encore.
Vous verrez un aperçu en direct de votre sélecteur sur le côté gauche de l'écran, qui se met à jour en temps réel au fur et à mesure que vous apportez des modifications.
Ensuite, vous pouvez personnaliser sa mise en page — des éléments tels que la position à l'écran, la largeur, le remplissage ou la position du drapeau par rapport au nom de la langue.
Si vous n'avez que 2 langues sur votre site, dans le Paramètres supplémentaires Dans cette section, vous pourrez configurer votre sélecteur pour afficher toujours la langue opposée à celle actuellement affichée sur le site. Cela transformera votre menu déroulant en bouton cliquable.
Utiliser le shortcode du sélecteur de langue dans Elementor
Maintenant, si vous souhaitez que votre sélecteur soit dans une position fixe sur votre site et que vous ayez besoin de la flexibilité nécessaire pour le faire, vous pouvez utiliser l'option de Shortcode.
Vous pouvez personnaliser ce sé [language-switcher] shortcode. Vous pouvez le placer n'importe où dans vos conceptions Elementor en utilisant les Code court widget
Dans le Avancé onglet des paramètres du widget, vous pouvez utiliser tous les paramètres normaux d'Elementor pour contrôler l'espacement, le positionnement, etc.
Si vous utilisez Elementor Pro et son Theme Builder, vous pouvez également inclure le shortcode du sélecteur de langue dans les modèles que vous créez avec Theme Builder. Par exemple, vous pourriez créer un modèle pour vos articles de blog individuels et inclure le sélecteur de langue sous le titre de l'article.
Voici un exemple simple qui utilise le bloc de shortcode pour placer un sélecteur de langue sous le titre de l'article et ses informations :
Utiliser l'élément de menu "Sélecteur de langue" dans Elementor
Si vous utilisez Elementor Theme Builder pour créer votre propre en-tête personnalisé, vous pouvez également intégrer votre sélecteur de langue dans ce modèle d'en-tête en utilisant l'élément de menu dédié au sélecteur de langue fourni par TranslatePress.
Ouvrez d'abord le modèle d'en-tête que vous avez créé avec Elementor Theme Builder pour vérifier le nom du menu que vous utilisez dans le Menu de navigation widget. Dans cet exemple, le nom du menu est “ Menu principal ” :
Puis, allez à Apparence → Menus dans votre tableau de bord WordPress pour modifier ce menu. Assurez-vous de modifier le bon menu en utilisant le menu déroulant en haut. Ensuite, vous pouvez ajouter votre sélecteur de langue au menu en utilisant le module dédié Sélecteur de langue Articles de menu.
Vous pouvez soit ajouter chaque langue comme élément de menu de premier niveau, soit définir votre Langue actuelle comme élément de niveau supérieur et ajoutez les autres langues en tant que sous-menus (photo ci-dessous):
Une fois que vous aurez enregistré vos modifications, vous verrez votre sélecteur de langue apparaître dans le menu de votre modèle d'en-tête Elementor :
Si votre site web Elementor ne comporte que 2 langues, vous pouvez également opter pour un bouton de langue cliquable où votre sélecteur affiche toujours l'option Langage opposé élément de la liste. Il n'est pas nécessaire d'ajouter les langues en choisissant cette option.
Maintenant, lorsque vous enregistrez vos modifications, si votre site est affiché en anglais, votre sélecteur n'affichera que l'espagnol (ou la langue dans laquelle vous avez choisi de le traduire). Une fois que le visiteur passe à l'espagnol, le bouton affichera alors l'anglais.
Vous pouvez également utiliser exactement la même approche pour ajouter votre sélecteur de langue à un modèle de pied de page que vous créez avec Elementor Pro (ou vraiment partout où vous utilisez les fonctions d'Elementor). Menu de navigation (widget).
3. Traduisez votre contenu
Une fois que vous avez ajouté votre sélecteur de langue Elementorou des sélecteurs de langue – vous pouvez ajouter plusieurs sélecteurs de langue à différentes positions si nécessaire), votre prochaine étape consiste à traduire le contenu de votre site afin que les visiteurs puissent voir votre contenu traduit lorsqu'ils choisissent une langue non par défaut via le sélecteur de langue.
TranslatePress prend en charge deux méthodes de traduction :
- Traduction automatique – vous pouvez générer automatiquement les traductions de votre site à l'aide de TraslatePress AI, DeepL ou Google Translate (disponible dans la version gratuite de TranslatePress).
- Traduction manuelle – vous pouvez ajouter ou modifier manuellement les traductions de votre site à l'aide de l'éditeur visuel.
Vous pouvez également combiner.
Nous vous montrerons rapidement comment fonctionne la traduction dans cette section. Cependant, si vous souhaitez un aperçu détaillé, nous avons également rédigé des guides complets sur la traduction d'Elementor :
- Comment traduire des sites Elementor en général
- Comment traduire le contenu des popups Elementor pour les sites multilingues
Configurer la traduction automatique (facultatif)
Cette étape est facultative (100%) : vous pouvez également passer directement à l'étape suivante pour traduire manuellement votre contenu..
Si vous souhaitez activer la traduction automatique via Google Translate ou DeepL, rendez-vous sur Paramètres → TranslatePress → Traduction automatique. Activez la fonctionnalité, puis configurez votre service de traduction automatique préféré.
Astuce : Si vous utilisez une version premium de TranslatePress, vous pouvez éviter la configuration manuelle des clés API Google Translate et DeepL grâce à la fonctionnalité intégrée TranslatePress AI solution.
La traduction de votre site web avec TranslatePress AI se fait en trois étapes : activez votre licence, choisissez vos langues, activez la traduction automatique, et le tour est joué !
Cela rend la traduction automatique de l'intégralité du contenu de votre site web (y compris les métadonnées SEO) 100 fois plus rapide.
Toutefois, vous pouvez toujours vous connecter directement à l'API Google Translate ou DeepL si, pour une raison quelconque, vous préférez cette méthode. Cela nécessite un peu plus de configuration de votre part, mais cela pourrait vous permettre de réaliser des économies si vous disposez d'un petit site web.
Nous avons un guide détaillé sur comment traduire automatiquement WordPress et WooCommerce, ainsi que des guides d'installation dédiés pour les deux services :
Notez toutefois que la version gratuite de TranslatePress ne prend pas en charge la traduction via l'API DeepL. Pour cela, vous devrez disposer de la version premium.
Utiliser l'éditeur de traduction visuelle
Pour ajouter ou modifier manuellement vos traductions, vous pouvez utiliser l'éditeur visuel de traduction de TranslatePress, dont nous avons présenté un aperçu un peu plus haut dans cet article.
Pour ouvrir l Traduire la page option dans la barre d'outils WordPress :
Vous devriez voir un aperçu en direct de votre site, ainsi qu'une barre latérale à gauche où.
Cela ouvrira la traduction du contenu dans la barre latérale, où vous pourrez ajouter la traduction (ou modifier la traduction existante, si vous avez utilisé la traduction automatique) :
Vous pouvez répéter le processus pour traduire l'intégralité de votre contenu, qu'il provienne d'Elementor, de l'éditeur de blocs natif de WordPress ou d'un autre plugin. Vous pouvez également “ traduire ” des images pour afficher une image différente en fonction de la langue choisie par l'utilisateur.
Le processus est toujours le même : pointer
- Images
- Blocs de l'éditeur (Gutenberg)
- Champs personnalisés
- Types de publication personnalisés
- Formulaires WordPress
- Menus WordPress
- Contenu de la fenêtre contextuelle
- Curseurs
- Produits WooCommerce
Métadonnées hors écran (comme les titres SEO)
Avec la version premium de TranslatePress et son module complémentaire SEO Pack, vous pouvez également utiliser cette même approche pour traduire des informations de coulisses telles que Titres et méta-descriptions Yoast SEO, par exemple, des informations sur le graphe des réseaux sociaux, et plus encore.
Une fois que vous aurez mis à niveau et installé le module complémentaire SEO Pack, vous pourrez accéder à ces traductions en utilisant le menu déroulant dans la barre latérale de l'éditeur de traduction :
Vous obtiendrez également un nouveau Liste de chaînes section qui vous permet de traduire toutes les diverses sur votre site.
Bonus : Aff
En plus de vous aider à créer un sélecteur de langue, TranslatePress propose également une intégration spéciale avec Elementor qui vous permet d'afficher ou de masquer certains widgets ou sections d'Elementor en fonction de la langue sélectionnée par l'utilisateur.
Par exemple, vous pourriez créer un widget spécial qui ne s'affiche que pour les personnes naviguant en anglais. Ou, vous pourriez créer un widget spécial qui s'affiche pour tout le monde. sauf pour les gens naviguent en anglais.
Vous pourrez accéder à cette fonctionnalité depuis l'interface Elementor. Lorsque vous modifiez un widget ou une section, vous obtiendrez deux nouvelles options dans le Avancé onglet
- Restreindre par langue – n’afficher ce widget ou cette section qu’aux personnes naviguant dans une certaine langue.
- Exclure par langue – afficher ce widget ou cette section à tous les visiteurs sauf aux personnes naviguant dans une certaine langue.
Créez votre sélecteur de langue Elementor dès aujourd'hui
Grâce à TranslatePress, vous pouvez facilement ajouter un sélecteur de langue Elementor et traduire le contenu de votre site Elementor dans une ou plusieurs nouvelles langues.
TranslatePress prend en charge d'emblée la traduction du contenu Elementor, vous permettant même de traduire les mises en page que vous créez avec Elementor Popup Builder ou Theme Builder.
Au-delà de cela, vous bénéficierez également d'intégrations spéciales Elementor, comme afficher ou masquer des widgets ou des sections en fonction de la langue choisie par un utilisateur dans le sélecteur de langue.
Vous pouvez commencer par la version gratuite de WordPress.org pour traduire votre site dans une nouvelle langue et accéder à tous les paramètres du sélecteur de langue.
Alors, mise à niveau vers la version premium pour pouvoir ajouter un nombre illimité de langues, traduire les métadonnées SEO et les médias sociaux, et accéder à d'autres fonctionnalités utiles comme :
- Assistance DeepL pour la traduction automatique.
- Redirection automatique des utilisateurs vers leurs langues préférées.
- Comptes de traducteur.
- Afficher des menus distincts en fonction de la langue d'un utilisateur (plutôt que de simplement traduire le même ensemble d'éléments de menu).
TranslatePress Multilingue
Avez-vous encore des questions sur l'utilisation du sélecteur de langue de votre site Elementor ? Faites-le nous savoir dans les commentaires !
Si vous avez trouvé ce message utile, consultez notre Chaîne YouTube, où nous téléchargeons constamment des tutoriels vidéo courts et faciles à suivre. Vous pouvez également nous suivre sur Facebook et Twitter pour être le premier à savoir chaque fois que nous publions.
