skip to Main Content

Comment dépecer et exporter une mise en page Visual Composer

Divi : le thème WordPress le plus facile à utiliser

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Beaucoup d’entre vous ont surement déjà entendu parlé de Visual Composer. C’est un plugin WordPress premium qui permet de créer des mises en page professionnelles sans avoir à utiliser de code (ou presque).

Beaucoup de thème WordPress de nos jours sont compatible avec ce plugin et vous remarquerez souvent que dans les démos de ces thèmes, il existe des sections qui vous intéresse et que vous souhaiterez copier sur votre page encore. Seulement, au moment de la rédaction de ce tutoriel, Visual Composer ne vous permet pas de copier une section (ligne) et de la coller sur une page existante.

Dans ce tutoriel, je vous expliquerai comment moi j’ai fait pour arriver à ce resultat.

Faites une copie des pages concernées

Nous allons faire des modifications qui sont susceptible d’invalidé une mise en page. Vous devez donc nécessairement faire une copie de votre page actuelle. La page sur laquelle vous souhaitez que les modifications s’appliquent.

Vous pouvez lire ce tutoriel sur la duplication de page WordPress.

Ce qu’il faut savoir sur Visual Composer avant de commencer

Si Visual composer vous facilite le travail, c’est certainement parcequ’il fait le sale travail en arrière-plan d’ajouter des balises WordPress (shortcode). Le travail qu’il fait, c’est d’organiser votre mise en page qui s’inspire énormément de bootstrap (Framework HTML5).  C’est la raison pour laquelle lorsque vous activez le mode classique, le contenu de l’éditeur sera presque illisible pour vous.

Pourquoi exporter une section d’une page vers une autre

Généralement, les auteurs de thèmes propose des démonstrations avec différentes fonctionnalités (section), et parfois il peut arriver que vous ayez besoin d’une seule section dans une page, alors comment faire pour copier uniquement cette section sur une autre page ?

Une solution facile aurait été de supprimer un à un les éléments de cette page et de copier le contenu final, mais cette méthode est unpeu longue. Donc dans ce tutoriel, je vous montrerai comment exporter une section d’une page vers une autre en lisant le shortcode généré par Visual Composer.

Comment lire les shortcodes de visual composer

Visual composer utilise des shortcodes en paires, par opposition au shorcode unique. Voici un exemple d’un shortcode en paire :

[exemple]…[/exemple]

Dans ce cas, le contenu situé entre [exemple] et [/exemple] sera contrôlé par le shortcode. Donc pour copier une section, nous allons nous en servir.

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Première étape : Localisez la section que vous souhaitez copier

Nous allons commencer par localiser la section que nous souhaitons copier. Prenons cette page donc la section que nous souhaitons copier se nomme « BUSINESSES SUPPORTED ».

Ce que nous allons faire, c’est de modifier cette page et localiser l’élément sur le mode « Editeur » de visual composer.

Nous allons ensuite ajouter un identifiant à cette section en cliquant sur l’onglet «  modifier » de la section.

A partir de là, défilez vers le bas jusqu’à trouver la section « Row Id » qui devrait être chez vous « Id ligne », et ajoutez « section-a-copier ».

Une fois que c’est fait, cliquez sur « Save Change ». Vous devrez voir un texte tout en haut de cette section comme dans l’image qui suit :

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Deuxième Etape : Comment copiez le contenu localisé

Nous allons passer en mode éditeur « Mode Classique » ou « Classic Mode », ce qui devrait afficher l’éditeur visuel de WordPress. A partir de là, faites une recherche pour l’expression que nous avons ajouté en tant qu’identifiant de la section. Sur Windows vous utiliserez « CTRL-F » sur mac, c’est « COMMANDE  + F ».

Vous devrez avoir un résultat similaire à ceci.

Remarque : Pour une meilleure compatibilité, je vous invite à passer en mode éditeur de texte avant de faire cette copie.

Maintenant que nous avons retrouvé ce code, nous allons lire le texte à partir de là en sens inverse pour trouver le shorcode suivant « 

 ». Vous pouvez même déjà faire une recherche sur « vc_row » cela mettra en surbrillance le shortcode ouvrant et fermant qui enveloppe la section que nous souhaitons copier.

Nous allons donc commencer par le premier shortcode qui contient notre identifiant vers le prochain shortcode. C’est cette section que nous ajouterons sur notre nouvelle page.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [GRATUIT]

Vous pourrez répéter la procédure avec les autres éléments que vous souhaitez ajouter.

C’est tout pour ce tutoriel, j’espère qu’il vous aidera à copier facilement certaines section sur vos pages.

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
12 Partages
Partagez10
Tweetez
Enregistrer2