WordPress est un CMS très utilisé dans le monde en raison de son interface simple, de ses thèmes hautement personnalisables et d’une variété infinie de plugins puissants. Il a simplifié la création, le développement et la gestion des sites Web, même pour les utilisateurs les plus amateurs.

Aujourd’hui, et grâce à WordPress, vous n’avez plus besoin d’avoir des connaissances spécifiques pour créer des pages Web attractives. Cependant, vous êtes peut être déjà tombé sur un site web qui propose une design vraiment incroyable, et vous vous êtes certainement demandé: Comment a-t-il fait ?

Malheureusement, si vous êtes un amateur ou débutant, vous ne pouvez pas faire grand-chose, même avec WordPress, puisque pour modifier votre thème, vous avez besoin d’un certain degré d’expertise en HTML, CSS, PHP et plusieurs autres compétences en fonction de la nature de votre thème, mais aussi de votre projet ou objectif.

Toutefois, même si vous êtes un codeur expérimenté, vous avez certainement besoin d’un outil qui vous permette de gagner en temps et en qualité sur le résultat final.

Heureusement, le plugin WordPress « WPBakery Page Builder » anciennement dénommé « Visual Composer » apporte une solution à ce problème. Avec ce dernier, même la plupart des blogueurs débutants peuvent créer des pages avec un look tout à fait unique pour leur site Web.

Avec ce plugin, vous pouvez créer :

  • Des pages d’atterrissage attractives (landing page)
  • Des pages de vente au look professionnel
  • Des sites « vitrine » pour votre entreprise
  • Des pages de modules pour vos formations
  • bref tout

C’est à mon avis le meilleur outils de mise en forme (ou mise en page) sur internet. Surtout pour les utilisateurs de WordPress.

Dans ce tutoriel donc, je vous montrerai comment donner une apparence unique à votre site internet (ou blog) avec le plugin Visual Composer.

Alors…

Comment installer et configurer le plugin WPBakery Page Builder

WPBakery Page Builder est un plugin premium que vous pouvez acheter sur Codecanyon : la meilleure plateforme de vente de plugins sur internet.

OK. Une fois que vous avez acheté puis téléchargé ce plugin de mise en page sur WordPress, tout ce que vous avez à faire c’est de l »installer puis de l’activer.

Ensuite, nous commencerons par effectuer quelques réglages de base. Pour cela, accédez à l'emplacement « Réglages >> Visual Composer » sur votre tableau de bord.

Réglages généraux

reglages generaux visual composerLe premier onglet (réglages généraux), vous permet de modifier :

  • Le contenu sur lequel visual composer sera disponible. Vous pouvez donc cocher les articles (post) et/ou les pages (page)
  • Les différentes règles d’accès des différents rôles. Avec cette option, vous pouvez déterminer qui modifie quoi. Les différents rôles disponibles seront affichés. Il vous faudra cliquer sur chacun pour cocher les éléments auxquels il (le rôle) aura accès. Vous avez la possibilité d’interdire l’utilisation de « visual composer » à des utilisateurs d’un rôle spécifique.
    activer léditeur sur WPbakery page builder
  • Activer ou désactiver les éléments responsive
  • Définir les sous-ensembles pour les polices Google

selection des roles wpbakeryOptions de design

Sur les options de design, vous avez la possibilité de modifier l’apparence visuelle par défaut des différents éléments du « visual composer ». Avant d’en faire usage, assurez-vous d’avoir coché l’option « Utilisez des options de design personnalisées ».

reglages css

Ces options vous permettront de définir la couleur qui s’applique à l’ensemble des éléments. 

  • L’onglets « CSS personnalisés » vous donne l’opportunité de personnaliser d’avantage chaque élément, seuls les développeurs peuvent savoir de quoi il s’agit.
  • L’onglet « Licence du produit » vous permet d’activer votre plugin pour recevoir les mises à jour automatiques.
  • L’onglet « shortcodes actifs » concerne essentiellement les développeurs.

Bien, à présent nous allons créer une page web personnalisée avec visual Composer.

Comment créer une page personnalisée avec visual composer

Pour créer facilement des pages web personnalisées, vous avez le choix entre l’éditeur du « back-office », c’est-à-dire que vous modifiez le site depuis votre tableau de bord WordPress, où celui du « front-office ».

editeur-du-front-end-editeur-du-back-end

Si vous utilisez Gutenberg, vous remarquerez un bouton « Editeur de page » sur la barre de tâche supérieure.

editeur visual composer tableau de bord editeur gutenberg

L’avantage avec l’éditeur du « front-office » est que vous pourrez modifier en direct vos pages et voir comment se présentent les différents éléments sur votre thème.

Avec l’éditeur du back-office

Pour accéder à l’éditeur du « back-office », je vous invite à cliquer sur « Editeur BACK-OFFICE ». Vous pourrez à tout moment revenir sur l’éditeur visuel de WordPress en cliquant sur « Mode Classique ». Mais je crois que ce ne sera pas nécessaire, tellement ce plugin de mise en forme de page Web est complet.

Une fois sur l’éditeur du Back-office, vous pouvez choisir une mise en page globale qui s’appliquera à la page.

Les mises en page varient en fonction de ce que vous comptez faire de la page. Vous pourrez donc choisir « landing page » pour créer une page d’accueil, « liste de services » pour une page qui présente des services, ainsi de suite. Avec de l’expérience vous arriverez même à créer des mises en pages personnalisées au design très pro.

Peu importe le choix de votre mise en page, la présentation des éléments est similaire sur toutes ces dernières. Vous pouvez ajouter un nouvel élément en cliquant sur « + » tout en haut sur la meta box « Visual Editor », ou ajouter un modèle en cliquant sur l’icône « modèle ».

Sur chaque ligne, vous pouvez (de gauche à droite) :

  • Déplacer la ligne
  • Gérer les colonnes de la ligne
  • Ajouter une nouvelle colonne

interface wpbakery page builderD’autres options sont disponibles à droite de la boîte. Ces options vous permettent (de gauche à droite) de:

  • réduire la ligne
  • modifier une rangée
  • dupliquer une rangée
  • supprimer une rangée

mise en page wpbackeryAu milieu de chaque colonne, vous pouvez ajouter un élément avant, modifier une colonne ou la supprimer.

options section wpbackeryoptions section wpbackery

Ressources recommandées

Voici quelques extensions visual composer que nous vous recommandons vivement :

1 – Comment gérer les colonnes

Sur l’onglet de gestion des colonnes, vous pouvez choisir le nombre de colonnes que vous souhaitez ajouter à la ligne. Pour comprendre les différents modèles de colonnes, sachez que chaque fraction correspond à la largeur qu’occupera la colonne. Autant un modèle possède des fractions, autant de fois la page possèdera des colonnes.

Certes, 11 différents modèles de colonnes sont disponibles, mais vous pouvez en créer autant que vous le souhaitez en cliquant sur le lien « personnalisé » situé juste en dessous de la liste de colonnes.

Par exemple, pour afficher une section de la page avec 2 colonnes aux largeurs égales, vous devez choisir (ou ajouter) « 1/2 + 1/2 ». 

Les colonnes seront affichées sur votre blog et leurs largeurs seront réparties proportionnellement aux dimensions du thème. Une colonne peut contenir autant d’élément que possible, vous n’avez donc aucune limite imposée à ce niveau.

mise en page section wpbakery

Les différents éléments peuvent être déplacés vers n’importe quelles colonnes.

deplacement zone de texte wordpress wpbakeryEn survolant chaque élément, vous pourrez accéder à ses options notamment le bouton qui permet de :

  • déplacer l’élément
  • modifier l’élément
  • dupliquer l’élément
  • supprimer l’élément

options-des-éléments

2 – Comment ajouter des éléments

Vous avez la possibilité de personnaliser chaque colonne avec les éléments proposés par « Visual Composer ». Pour ajouter un élément, cliquez sur le bouton « + » sur une colonne spécifique ou sur le bouton « + » du menu principal du plugin.

ajouter un element wpbakery
Lorsqu’une colonne est vide (ne contient aucun contenu), elle possède un bouton « + » à l’intérieur.
 Pour ajouter une vidéo par exemple, cliquez sur ce bouton et choisissez l’élément vidéo.

ajouter-une-vidéo

En cliquant dessus, une nouvelle fenêtre apparaîtra. Sur cette fenêtre, vous devez fournir le titre, le lien vers la vidéo et une classe additionnelle (qui n’est pas obligatoire). Lorsque vous avez terminé de renseigner les différentes informations sur votre vidéo, n’oubliez pas d’enregistrer vos modifications.

reglage video wpbakeryVotre vidéo sera disponible sur l’éditeur du back-office. Enregistrez une fois de plus vos modifications. Vous pouvez à présent la consulter en cliquant simplement sur « aperçu ».

ajouter video wpbakery wordpressLe processus d’ajout d’un élément est le même pour tous les autres, à quelques exceptions près. Les informations à remplir pourront varier en fonction des éléments. 

En sélectionnant l’élément texte par exemple, vous retrouverez un éditeur visuel classique (celui disponible lors de la rédaction des articles ou des pages), mais également une option qui vous permet d’ajouter une animation durant l’affichage de l’élément. Ce dernier pourra donc apparaître en fondu d’une position à une autre, selon vos réglages.

reglages block de texteLe plus intéressant avec ce plugin, est que vous pourrez créer des sidebars si votre thème n’en propose pas par exemple. Pour ce faire, cliquez sur le bouton d’ajout + »), et choisissez l’élément « WP Commentaires récents », « Facebook like » et enfin « Wp Catégories ».

Maintenant créez ce modèle de colonne personnalisé « 1/3 + 2/3 » ou un tout autre et ajoutez l’élément sidebar sur la colonne de gauche ou sur celle de droite. Peu importe car tout dépend de la largeur que vous souhaitez donner à votre barre latérale créée sous cette extension de mise en page qu’en Visual Composer.

configuration colonnes wpbakery

Vous remarquerez une nouvelle colonne vide sur la droite, ajoute un nouvel élément de votre choix (je vous recommande d’ajouter un simple texte). Maintenant sauvegardez la page et accédez à l’aperçu pour voir le résultat de cet exercice.

3 – Comment sauvegarder et réutiliser un modèle de page

Il est possible de sauvegarder le modèle de votre page et de l’utiliser plûtard. J’adore cette option car elle permet d’éviter de passer des heures à essayer de copier le modèle d’une page. Ici, tout ce se fait un un seul clic. Oui vous avez bien entendu, EN 1 SEUL CLIC… ou en deux 🙂

Pour sauvegarder un modèle, cliquez sur l’icône des modèles. Sur la fenêtre qui s’affichera, entrez le nom de votre modèle dans le champ « Enregistrer la disposition actuelle en tant que modèle », ensuite cliquez sur « Enregistrer le modèle ».

Important: Vous devez le faire sur la page que vous souhaitez enregistrer comme modèle et non sur une page vierge.

registerer un model wpbakery

C’est de la même façon que vous retrouverez les différents modèles que vous avez enregistré, plus bas sur la même fenêtre dans la section « Charger un modèle ».

mes modèles wpbakeryTout ce que vous avez à faire dans ce cas, c’est de créer une nouvelle page, puis, allez dans modèles et choisissez celui que vous souhaitez donner à votre page.

Avec l’éditeur du front-office

L’éditeur du front-office a l’avantage de vous permettre de modifier votre page en temps réel. En d’autres termes, il vous permet de voir à quoi ressemblera chaque modification apportée à votre site grâce à Visual Composer. L’avantage avec cette approche c’est que vous n’avez pas besoin de travailler à l’aveuglette comme c’est le cas avec l’éditeur de page du back-office.

Vous pouvez à tout moment basculer d’une option à une autre (back-office ou front office).

L’éditeur du front-office n’est pas si différent de l’éditeur du back-office, en ce sens que l’on retrouve une barre utilisateur identique, mais également toutes les options de l’éditeur du back-office sont les mêmes que sur l’éditeur du front-office.

barre doutils wpbakeryCependant, cinq nouveaux boutons ont été ajoutés, il s’agit notamment :

  • De l’activation ou désactivation des guides
  • L’émulateur, qui vous permet de voir à quoi votre blog ressemblera sur les différents appareils
  • Le bouton de retour vers le back-office
  • Le bouton d’enregistrement des modifications
  • Le bouton de sortie de visual composer

options wpbakeryChaque élément d’une page peut être modifié, vous pourrez voir les options disponibles en survolant chaque élément. Le bouton en forme de « PLAY », vous permettra d’afficher plus d’options pour un élément.

options-des-éléments-sur-le-front-office

Vos premiers pas seront peut-être difficiles, mais avec de la pratique, vous arriverez à réaliser une page d’accueil de ce genre.  Si vous le souhaitez, avant de vous procurer le plugin, vous pouvez le tester gratuitement (connectez-vous, utilisateur : demo, mot de passe : demo).

Voici ce que j’ai pu réaliser en 1 minute chez moi. Avec de la pratique, l’on peut arriver à atteindre des résultats vraiment très satisfaisants. Et si vous avez besoin d’aide pour créer votre site Web sous WordPress grâce à ce puissant plugin, alors n’hésitez pas à contacter l’équipe de BlogPasCher, qui se fera un plaisir de réaliser vos projets.

J’espère que ce tutoriel entièrement en français vous aidera à faire vos premiers pas avec le plugin « Visual Composer ». Si vous avez un souci, nous (ou l’assistance) serons ravis de vous aider. N’oubliez pas: une belle page Web permet de convertir plus de curieux en clients.

Extensions recommandées

Voici quelques extensions visual composer que nous vous recommandons vivement :

Découvrez plus de plugins sur Codecanyon

Partagez ce tutoriel avec ceux qui en ont besoin.