Visual Composer est l'un des constructeurs de pages les plus populaires pour WordPress. Dans ce tutoriel, nous allons explorer comment Conversion de sites Visual Composer à l'aide de TranslatePress.
Nous allons passer en revue les étapes simples nécessaires pour construire un site multilingue en utilisant Visual Composer avec TranslatePress.
Ces deux extensions sont entièrement compatibles ; vous pouvez donc utiliser TranslatePress pour traduire n'importe quel type d'élément ou de modèle disponible dans Visual Composer, directement depuis l'interface publique. Le tout grâce à une interface de traduction visuelle intuitive.
Créer votre site web avec Visual Composer
Visual Composer dispose d'un éditeur visuel par glisser-déposer qui rend la création de n'importe quelle page de votre site Web rapide et facile, sans avoir à écrire une seule ligne de code.
Il est disponible en version gratuite et payante. La version gratuite offre des éléments standards pour gérer la structure et le contenu de votre site. Vous pouvez facilement ajouter des lignes, puis les diviser en colonnes. Ensuite, remplissez-les avec du contenu sous forme de texte, d'images, de boutons, d'éléments de menu, de shortcodes et plus encore.
Les plans payants vous donnent accès à des centaines d'éléments de contenu premium et à des modèles prédéfinis (via le Visual Composer Hub). Cela peut vous aider à accélérer les choses et à ne pas avoir à repartir de zéro avec la structure et la conception de votre site.
Pour ce tutoriel et afin d'accélérer les choses, nous allons commencer par utiliser un modèle prédéfini qui contient déjà pas mal d'éléments. Vous pouvez également partir de zéro et créer quelque chose d'unique pour votre propre site web.
Créer notre première page avec Visual Composer
Vous pouvez acheter ou télécharger Visual Composer gratuitement à partir de leur site web. Installez-le et activez-le ensuite comme n'importe quel autre plugin WordPress.
Une fois activé, vous pouvez commencer à créer votre première page.
Vous serez dirigé vers un éditeur visuel front-end et invité à nommer votre page, à sélectionner une mise en page, puis à ajouter des éléments et/ou à utiliser un modèle.
J'ai sélectionné un modèle de page produit unique, en parcourant le Hub Visual Composer. Ce modèle de restaurant comprend une section héros, une description, un avis et des fonctionnalités. Cela peut être un choix inspiré pour les ventes en ligne ou les critiques de produits.
Voici à quoi ressemble ma page après le chargement du modèle. Je peux personnaliser le modèle pour inclure d'autres pages de votre site comme un blog, un menu, une galerie, une localisation, etc.
Vous pouvez facilement déplacer des éléments, personnaliser leurs réglages, les options d'affichage, ainsi que dupliquer certains blocs pour aller plus vite. Il y a beaucoup de flexibilité que je vous invite à explorer.
Vous pouvez appliquer le même processus visuel, par glisser-déposer, pour créer toutes les pages restantes de votre site web.
Traduire des sites Visual Composer à l'aide de TranslatePress
Maintenant que nous avons créé notre site web à l'aide de Visual Composer, voyons à quel point il est facile de le rendre multilingue grâce à TranslatePress.
Ajout d'une deuxième langue à votre site
Pour ce tutoriel, nous allons nous pencher sur la traduction de la page que nous avons créée avec Visual Composer dans une seconde langue (disons l'italien).
Nous allons d'abord installer et activer le plugin multilingue TranslatePress.
Une fois TranslatePress activé, vous remarquerez une nouvelle Site élément ajouté dans la barre d'administration.
Passez simplement la souris dessus et cliquez Paramètres ou vous pouvez cliquer sur Paramètres élément de menu et sélectionner TranslatePress). Vous serez alors redirigé vers la page des paramètres TranslatePress.
Ici, nous pouvons ajouter les langues dans lesquelles nous voulons traduire la page/le site web créé à l'aide de Visual Composer.
L'anglais est notre langue par défaut, donc nous ajouterons aussi “italien”. Il existe quelques autres paramètres (comme Traduction Google intégration pour la traduction automatique, ou la personnalisation du sélecteur de langue), mais nous pouvons les ignorer pour l'instant et cliquer sur Enregistrer les modifications.
Traduire votre page à l'aide de l'éditeur de traduction front-end
Nous sommes maintenant prêts à commencer la traduction de notre site Visual Composer.
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 du menu de la barre d'administration (à côté de Modifier avec Visual Composer).
Cela ouvrira un éditeur visuel de traduction front-end où vous pourrez traduire chaque chaîne d'une page et voir les modifications en temps réel.
Il vous suffit de survoler un texte ou un élément spécifique que vous souhaitez traduire, puis une icône en forme de crayon apparaît, et.
Le même processus peut être appliqué à tous les éléments d'une page, que vous Traduire un article de menu, un forme, bouton, ou un image contenant du texte. Même Produits WooCommerce peut facilement être traduit par TranslatePress.
Vous pouvez utiliser le raccourcis clavier pour accélérer la navigation dans les chaînes de caractères d'une page et leur enregistrement.
Traduire un bouton contenant un lien
Plongeons un peu plus en profondeur. Comme vous le remarquez sous le “ Menu Fruits de mer ”, vous avez un bouton “ Télécharger le menu ”.
Vous pouvez facilement traduire le texte du bouton en italien en suivant les étapes ci-dessus, mais disons que vous souhaitez également donner aux personnes qui consultent la version italienne de votre site la possibilité de télécharger le menu dans leur propre langue.
TranslatePress s'en charge également. Lorsque vous passez la souris sur un élément contenant un lien, en plus de traduire le texte, vous pouvez également modifier le Ancre de lien élément.
Dans ce cas, j'ai téléchargé la version italienne du menu et l'ai sélectionnée comme lien d'ancrage pour la version italienne. Les personnes naviguant sur la version italienne du site pourront maintenant télécharger le menu en italien.
N'oubliez pas qu'une fois que vous avez traduit un texte récurrent sur votre site, TranslatePress se charge de le modifier partout où il apparaît. Par exemple, il suffit de traduire un seul “Pré-commander”Texte du bouton pour qu'ils soient tous traduits.
Traduire les images et les curseurs contenant du texte
Il y a des situations où, lors du processus de traduction, vous tombez sur des images contenant du texte. Un texte qui doit être traduit une fois la langue modifiée. Dans notre cas, disons que le logo CodHouse doit afficher “ Ristorante ” et non “ Restaurant ” lorsqu'il est consulté en italien.
Avec TranslatePress, c'est vraiment facile de afficher différentes images, logos ou curseurs pour différentes langues.
Une fois que vous cliquerez sur le logo, vous remarquerez la facilité avec laquelle il est possible de modifier les sources des logos et des images de présentation pour la version italienne. Vous pouvez simplement télécharger une version différente pour l'italien.
Ajouter un sélecteur de langue à votre site web
Par défaut, dès que vous ajoutez une langue secondaire dans TranslatePress, un menu déroulant flottant permettant de sélectionner la langue s'affiche automatiquement sur l'interface publique de votre site. Ce menu suit l'utilisateur sur toutes les pages.
Vous pouvez également ajouter un raccourci sélecteur de langue à n'importe quelle page ou widget. Il existe également un élément de menu "Sélecteur de langue". Vous pouvez facilement personnaliser tout cela et choisir ce qui doit être visible.
Traduire le reste de votre site Visual Composer
Comme vous l'avez sans doute déjà remarqué, la traduction de sites Visual Composer à l'aide de TranslatePress est vraiment intuitive et rapide.
Vous naviguez simplement sur le site, page par page, à l'aide de l'éditeur de traduction visuel, sélectionnez un texte ou un élément donné, survolez et cliquez sur l'icône en forme de crayon, puis saisissez sa traduction. Enregistrez et passez au suivant.
Faites cela pour les chaînes restantes et vous aurez votre page traduite en un rien de temps.
Et voilà ! Créer un site web multilingue à l'aide de Visual Composer et de TranslatePress n'a jamais été aussi simple.
Offre alléchante de Visual Composer
Et pour couronner le tout, nous sommes ravis de vous proposer un code de réduction exclusif : 20%, valable sur tous les Versions premium de Visual Composer.
Utilisez le code promo TRANSLATEPRESS à la caisse et accédez au Hub Visual Composer pour télécharger des éléments, des modèles et des extensions exclusifs.