Accueil » Blog » Webdesign » WPBakery sur WordPress : Présentation, avis, tuto

WPBakery sur WordPress : Présentation, avis, tuto

WPBakery est une extension disponible sur le CMS WordPress, qui consiste à éditer le design et le contenu des pages. Grâce à ce plugin, vous pourrez créer des pages web entièrement personnalisées et sur-mesure. Il a été conçu de manière à faciliter les éditeurs de sites pour mettre en page son contenu.

 

WPBakery se trouve dans la plupart des thèmes que propose ThemeForest. Alors si vous avez acheté votre thème WordPress sur cette plateforme, il y a de grandes chances que celui-ci intègre cet éditeur de page. Vous l’avez même peut-être confondu avec Visual Composer !

Sur cet article, je vous explique pas à pas comment s’y prendre pour maitriser ce plugin WordPress le mieux possible !

WPBakery sur WordPres - Extention

Introduction sur WPBakery

WPBakery est un éditeur de page conçu afin de créer des mises en pages entièrement personnalisées. Il intègre des fonctions bien spécifiques pour chaque type de contenu Vous avez la possibilité de changer le design de votre page, ou de créer un modèle de page. Cette extension est pratique pour les développeurs, mais également pour les débutants.

 

Vous pouvez télécharger le compositeur de page WPBakery ici.

introduction - WPBakery

Sur l’image ci-dessus, vous trouverez les éléments principaux de la mise en page grâce à WPBakery. Les éléments sur WPBakery sont nombreux :

 

  • Les modèles de page
  • Les réglages CSS
  • Les rangées et leurs paramètres
  • Les colonnes et leurs paramètres
  • L’ajout, la modification ou la suppression d’autres sections
  • La possibilité d’ajouter du contenu ( textes, HTML, JS, images, boutons, réseaux sociaux, etc…)

Un aperçu des éléments à intégrer

Aperçu des éléments intégration

WPBakery est très simple et facile à utiliser pour ajouter des éléments sur une page. Vous n’êtes pas obligé de connaître le développement web pour construire votre contenu sur votre site ! Grâce aux diverses fonctionnalités, tels que l’ajout des réseaux sociaux, une foire aux questions ou vos produits, vous pourrez intégrer n’importe quel contenu. Les développeur peuvent également aller plus loin dans les possibilités en ajoutant de l’HTML brut ou du JavaScript.

 

Tous les modules ne sont pas présents sur l’image ci-dessus, car j’ai décidé d’en désactiver certains pour gagner des ressources et optimiser le temps de chargement des pages, dont je parlerais un peu plus loin sur cet article.

Un aperçu de la grille d’automatisation d’appel de contenu personnalisé

Aperçu de la grille

L’éditeur de grille nous servira pour créer des appels de pages, en fonction de critères, telles que les catégories de pages ou bien la date de publications d’articles ! La grille est entièrement personnalisable d’un point de vue design, et les paramètres d’appels de pages sont étendus.

Un aperçu du système de rangées et de colonnes

Système de rangées et de colonnes

WPBakery est pratique pour créer de belles pages responsives. Grâce à un système simple et facile à prendre en main, vous pouvez vous servir de ce Builder pour définir les rangées et les colonnes de votre page.

 

Pour aller encore plus loin, WPBakery intègre une édition de paramètres sur vos rangées et vos colonnes, permettant de créer des design uniques.

 

Par exemple, vous pouvez établir une rangée et y insérer 3 colonnes.

Dans ces 3 colonnes, vous pourrez y intégrer tous les éléments que vous souhaitez.

Vous pouvez également intégrer un fond de couleur ou d’image, régler les bordures et personnaliser les éléments de contenu.

 

Enfin, ce système est configurable pour le « Responsive Design ». Vous pouvez dissocier vos réglages, sur un écran de mobile ou un écran d’ordinateur. En fonction de la taille de l’écran, les colonnes peuvent être différentes ou décalées.

WPBakery ou Visual Composer ?

WPBakery et Visual Composer

Si vous avez obtenu cette extension lors de l’achat d’un thème WordPress, alors il est fort probable que vous souhaitez vous en servir correctement. Il faut également savoir que Themeforest nomme cette extension « Visual Composer », qui est en réalité une autre extension. Et pour couronner le tout, c’est le même développeur qui a développé les deux extensions. Bref, tout le monde s’y perd, mais aujourd’hui : Vous avez compris que votre plugin n’est pas le véritable «Visual Composer».

 

La démo des thèmes qui intègre WPBakery n’utilise généralement pas d’autre Builder, et vice versa. C’est à dire que si vous êtes tombé sous le charme d’un beau thème WordPress, et que celui-ci intègre WPBakery, alors vous devez vous y faire ! Changer d’éditeur de page sur une page dites « démo » remplacera le design du contenu par un autre, mais il ne sera pas adapté à la démo !

 

Les réglages de la disposition de votre page sont générés avec des short codes qui sont propres à chaque éditeur. Visual composer ne possède pas les mêmes short code que WPBakery. Et vice versa, donc, vous êtes bloqué sur WPBakery ! Mais pas de panique : L’extension est « différente » de la version de Visual Composer, mais reste très ouverte en terme de possibilités. Je trouve que ces deux univers différents très complémentaires, l’un fonctionne en Frontend et l’autre en Backend.

 

Par expérience, je préfère travailler sur WPBakery que sur Visual Composer. Pourquoi ? Tout simplement car il est maniable, sans aucune limite et c’est très facile de créer une page web sur-mesure ! Visual Composer quant à lui est du côté « Frontend », c’est un peu le même principe que Elementor.

 

Personnellement, je n’aime pas trop cette visualisation lors de mes modifications. Alors j’ai appris à me spécialiser sur WPBakery. Au biais de cet article, j’espère vous donner l’envie de créer de belles pages web !

2 avantages de WPBakery

Avantages

Avec WPBakery, tout est possible

En terme de design et de mise en page, tout est possible avec WPBakery ! Si vous avez préparé une maquette et que vous êtes intégrateur, ce plugin sera très bien pour votre intégration !

 

Vous pouvez gérer les rangées et colonnes de votre site à volonté, également, vous pouvez personnaliser votre site grâce à l’ajout de CSS. Si vous vous demandez ce que vous pouvez faire grâce à WPBakery, je vous invite à consulter quelques thèmes qui l’utilisent pour leurs modèles de page.

WPBakery est simple d’utilisation

Traduit en Français, WPBakery vous offrira une simplicité lors de vos mises en pages. Le système d’édition de page est facile à prendre en main ! Disponible sur Backend ou Frontend, vous avez d’ailleurs le choix de travailler directement sur la page en elle-même, ou sur un éditeur séparé.

2 inconvénients de WPBakery

Inconveniants

Il faut passer du temps sur WPBakery pour construire une page

Enfin, je peux souligner un point négatif de cette extension, c’est que vous êtes dans l’obligation de prévisualiser ou de sauvegarder votre page avant de voir les modifications.

 

Vous pouvez bien sûr travailler directement en frontend, c’est à dire du côté du visiteur et construire vos pages. Je ne suis pas favorable à cette méthode de travail, j’aime avoir toujours le même écran devant moi. Vous aurez besoin de beaucoup de manipulations à faire sur WPBakery pour rendre un contenu pertinent. Mais si vous respectez votre première idée jusqu’au bout, le visuel peut être époustouflant !

La majorité des éditeurs de la communauté sont anglophones

Lorsque j’effectue des recherches sur WPBakery, je tombe 80% du temps sur des forums en anglais. Effectivement, la communauté francophone est moins présente sur WPBakery que sur Elementor par exemple.

 

La plupart du temps, j’ai du trouver des solutions moi-même sur ce plugin et l’expérimenter pour comprendre son fonctionnement. L’entraide sur internet est précieuse alors c’est pourquoi j’ai décidé d’écrire un article dédié à l’utilisation de WPBakery.

Les réglages de WPBakery

Après avoir installé l’extension, les réglages du logiciel sont répartis en 4 pages.

Les réglages généraux

Désactiver les éléments responsive

Je vous conseille de laisser les paramètres généraux par défaut pour commencer. Vous pouvez ici désactiver les éléments responsives ( c’est à dire que votre page ne sera plus adaptée pour mobile ). Ce n’est pas vraiment ce que l’on souhaite.

Désactiver Gutenberg-editor

Idéalement, désactiver Gutenberg Editor pour ne charger que le contenu qui nous intéresse.

Désactiver les modèles de pages

Je n’utilise pas de modèle de page par défaut. C’est sans doute parce que j’ai l’habitude de dupliquer des pages plutôt que d’en créer de nouvelles. Par exemple, la page d’un article aura le même modèle qu’un autre, mais il ne ressemblera pas à une page produit par contre.

 

En utilisant les modèles de pages par défaut, toutes les nouvelles pages de votre site disposeront du même modèle. Cela vous prendra donc du temps et des clics, de tout supprimer, pour ne sélectionner que le modèle qui vous intéresse.

 

Bref, le système de modèle des pages est intéressant seulement si vous respectez la hiérarchisation du type de contenu. Par exemple, dans mon cas, j’écris des articles en me servant des pages de WordPress, et non du système d’article. Cela me permet d’accéder à toute la page ! Les systèmes d’article de WordPress n’influent que sur le contenu principal de l’article ( la partie en HTML <article> ), et pas forcément sur les autres éléments ( barre latérale, commentaires, haut de page ).

 

Je vous conseille donc de désactiver les modèles de pages mais de créer tout votre contenu à partir du menu page de WordPress (Produits, articles, pages, informations, transactions, commerciales).

La gestion des rôles

Dans la gestion des rôles, vous pouvez paramétrer WPBakery pour qu’il fonctionne sur les pages, produits et articles de votre site.

 

  • Sélectionnez comme type de post : Personnalisé
  • Cochez ensuite toutes les cases.

 

Cela vous servira notamment si vous souhaitez établir tout type de contenu sur votre site et ne pas utiliser seulement la rubrique «Page».

Choisir sur quel type de publication intégrer WPBakery

Vous pouvez également désactiver l’éditeur visuel, et d’autres réglages dont je ne rentrerais pas dans le détail. Par contre, la diversification des éléments à intégrer sur le contenu de vos pages est intéressante !

Les éléments et les fonctionnalités

Sur l’image ci-dessus, nous voyons quelques éléments que WPBakery intègre. Vous pouvez désactiver les éléments dont vous ne vous servirez pas sur vos pages web, pour économiser des ressources sur votre serveur.

 

Je vous conseille dans un premier temps de les laisser activés, et de préparer la base de votre site. Vous aurez peut-être besoin de certains types d’éléments à certains endroits de votre site ! Faites-vos test, et revenez-plus tard pour désactiver les éléments qui vous ne vous intéressent pas.

 

Je vous conseille de le faire pour augmenter la vitesse de chargement de vos pages.

Présentation de l’éditeur sur le back-office

Maintenant que les principaux réglages sont établis du côté des paramètres, je vous invite à créer une nouvelle page sur WordPress. Si votre page affiche encore l’ancien éditeur de WordPress, vous devez cliquer sur l’éditeur de page.

Emplacement éditeur de page

Vous devez également cliquer sur «Éditeur de l’administration» comme ici :

Sélection éditeur de l'administration

Maintenant que cela est fait, vous aurez accès à l’éditeur de page de WPBakery.

Editeur qui apparait

Le système de rangées

Pour créer un nouveau contenu, nous avons besoin d’utiliser une rangée.
Pour cela, cliquez sur « ajouter un élément » et sélectionnez « rangée »

Ajouter une nouvelle rangée

Désormais, une rangée est disponible sur votre builder. Vous pouvez ici établir des réglages sur votre rangée :

Etablir des réglages du la rangée

Grâce à ce système, vous pouvez étirer votre rangée ( le fond et/ou les éléments qui l’intègreront ), mais également mettre toute la rangée en pleine hauteur, ou à hauteur égale.

 

Également, vous pouvez utiliser une vidéo d’arrière plan mais aussi créer des animations à l’apparition du contenu. Notez que vous pouvez ajouter une classe additionnelle et un identifiant à n’importe quel contenu présent sur votre page. Cela peut notamment vous servir pour écrire du code CSS si vous souhaitez créer de jolis contenus ! Cela permet d’aller plus loin sur le webdesign.

Vous pouvez aussi modifier l’aspect de votre rangée en vous rendant sur la partie « option de style ». Ici, vous pouvez modifier les marges extérieures ( margin ), les marges intérieures ( padding ), et la bordure de la rangée ( border ) :

Réglages de styles

De base, si je mets mon contenu texte dans cette rangée, il n’y aura aucune marge, intérieure ni extérieure. La preuve en image :

Rendu sur le site sans padding

Ici, si je mets un padding-top de 300px, la rangée comportera un agrandissement de la hauteur en partant du haut, mais en gardant les éléments en dessous du padding. Plus d’explications ici :

Exemple : Ajout de padding sur une rangée
Rendu sur le site avec padding

Le système de colonnes

Si je veux créer plusieurs blocs côte à côte, je peux ! Grâce à WPBakery, la fonctionnalité des colonnes est étendue ! Voici un exemple très clair du côté back et front :

Système de colonnes

Ah, ça manque de réglages. Pour mieux définir la rangée et les colonnes, nous pouvons établir une rangée étirée avec le contenu, et établir des padding-left et padding-right sur nos colonnes pour éviter qu’ils se resserrent trop. Voyons ce que cela donne :

Étirer la rangée
Ajout de bordure sur une colonne

Pour les 5%, ils servent à définir 5% de marges intérieures proportionnelles à la taille de l’écran. Si je ne travaille pas en pixel ici, c’est pour une raison très simple : 100px sur un écran d’ordinateur, ça passe, mais 100% de marge sur un écran de téléphone, le contenu est illisible. Je préconise donc de travailler en pourcent ( très faible ) sur les marges latérales. Pour les marges en haut et en bas, ( top, bottom ), vous pouvez travailler en pixel sans problème.

Sachez que je vais réaliser cette opération sur les 3 colonnes pour garder la même taille partout ! Voilà, j’ai le fond de ma rangée qui est à 100% de la largeur, et mes 3 colonnes centrées avec un écart de 5% :

Apercu du site internet

Pour aller plus loin, vous pouvez également mettre des images en fond de colonne ( ou de rangée aussi ), il y a beaucoup de paramètres que vous pouvez personnaliser en fonction de votre style. Je vous montre ici un dernier exemple avec l’ajout d’une bordure sur une de mes colonnes, avec 20px d’épaisseur, et de couleur noire.

Ajout de la bordure
Apercu du site avec de la bordure

Vous l’aurez compris, le système de colonnes se marie très franchement avec le système de rangées. Vous ne pouvez rien faire avec l’un sans l’autre. Je vous conseille donc de vous amuser à faire tout sorte de test ! Personnellement, j’ai toujours un but précis lorsque je crée une page. Voici quelques conseils pour créer une belle page web :

 

  • Réfléchir au contexte
  • Structurer ses idées
  • Établir une maquette
  • Développer sur WPBakery
  • Utiliser le CSS pour pousser la personnalisation

Le système d’intégration d’extensions

Si vous souhaitez ajouter d’autres types de contenu sur votre site, vous le pouvez ! Certaines extentions comme Posts Grid ( et d’autres ) proposent justement de diversifier le contenu. Vous pouvez rechercher des extentions qui fonctionnent avec WPBakery.

La seule extension externe que j’utilise pour cela est Posts Grid, car celle de base présente sur WPBakery a un problème !

extension supplémentaire sur WPBakery

L’extension de base est créée pour afficher du contenu automatiquement en passant par votre fichier admin-ajax.php. Cela demande des ressources comme tout autre plugin. Cependant, « Post Grid » intégré par défaut affiche votre contenu en se servant de Javascript. Cela permet d’automatiser le contenu d’une autre manière qu’avec PHP.

 

Et pour votre référencement SEO, il faut éviter Javascript pour ses appels de pages. J’ai compris que Google ne pouvait pas lire les liens de mes nouvelles pages à cause de ce problème, étant donné que Google a parfois du mal avec JavaScript. J’en ai récemment fait la découverte, notamment grâce à Fabien de Myrankingmetrics.com

 

Effectivement il m’a aiguillé sur le fait que si mon contenu était directement affiché à l’aide de Javascript, il se pourrait que Google ait des problèmes à lire mes liens sur cette fonctionnalité.

 

Pour cela, j’ai du désactiver mon Javascript de mon navigateur Chrome, et vérifier si le contenu était toujours présent. Surprise : Il n’y était pas. C’est à dire que sans JS, le contenu ne s’affichait pas. Potentiellement, Google ne voyait pas non plus mes contenus, et donc les liens étaient illisibles pour les robots d’indexation. Le maillage interne sert justement à lier vos pages. Si vous avez commandé un site internet sur K-Graphiste, j’ai sûrement du vous faire la morale sur les liens internes ! Ils sont cruciaux pour votre référencement naturel, et sont souvent sous-coté, et mal utilisés. Mon cas : J’ai voulu trop bien faire, et je n’ai pas pensé « simplement ». Je remercie encore Fabien de m’avoir aiguillé, ainsi que son partenaire Olivier.

 

Pour en revenir à ce problème, la solution est tout simplement de changer d’extension pour appeler ses contenus. Après de nombreuses recherches, j’ai pu tester Media Grid, Post Grid, Post Masonry Grid, le problème est le même pour toutes. Lorsque je désactivais le JS de mon navigateur, la page n’affichait aucun lien et aucune image.

L’extension Post Grid qui se marie avec WPBakery

Elle permet de régler ce souci de JavaScript et de créer un système de rendu similaire à Post Grid déjà présent sur WPBakery.

 

Cette extention est gratuite, mais a ses limites. Pour moi, la simple licence gratuite me suffit largement pour afficher mon contenu, étant donné que je le design manuellement en CSS.

Responsive : Comment configurer vos rangées et colonnes

Pour plus de souplesse, WPBakery intègre une fonctionnalité intéressante pour l’affichage des colonnes sur les différents supports d’écrans. Vous pouvez modifier l’aspect de votre site sur ordinateur et lui donner un autre aspect sur téléphone ! Pour configurer les colonnes et qu’elles soient différentes entres les différentes tailles d’écran de l’utilisateur, nous pouvons accéder aux réglages des colonnes, et cliquer sur « options d’adaptation ».

Responsive sur WPBakery

Le principe des 12 colonnes

De base, une rangée comprend 12 colonnes. Grâce aux réglages qu’intègrent WPBakery, vous pouvez modifier le nombre de colonnes que vous souhaitez, mais également leurs tailles, en fonction de celle de l’écran. Si par exemple, votre colonne doit comprendre la totalité de votre page, utilisez 12 / 12 pour agrandir à 100% votre colonne. Si sur téléphone, vous souhaitez qu’elle n’en prenne que 9, alors sélectionnez 9 colonnes en largeur, mais seulement sur les réglages « téléphone ». Enfin, sachez que le nombre total de colonnes sur une rangée doit être de 12. Au delà, la prochaine colonne est placée à la ligne suivante, c’est à dire, après la rangée.

Désactiver certaines colonnes sur certaines tailles d’écran

Vous pouvez également désactiver des rangées pour certaines tailles d’écran. Il s’agit en fait de ne pas appeler le contenu, ce n’est pas comparable au « display none ». Cependant, je ne préconise pas d’utiliser cette fonctionnalité. Pour moi, il est important de soigner son contenu sur ordinateur, comme sur mobile.

Désactiver colonnes pour certaines tailles

Établir des modifications encore plus poussées sur WPBakery

Parmi tous les éléments que l’on peut trouver sur WPBakery, peut-être que vous souhaiterez aller plus loin et développer votre propre code. Si vous avez des compétences en Webdesign, alors sachez que vous pouvez également ajuster votre maquette graphique grâce à WPBakery.

 

Je vous conseille également d’appliquer votre travail après avoir créé votre architecture, la couleur de vos boutons, la forme de votre site. Il faut d’abord créer une charte graphique et une maquette pour concevoir un beau site.

L’ajout de CSS sur votre builder

Pour ajouter du CSS, c’est très simple. Vous pouvez cliquer sur la roue de réglages qui vous permettra d’afficher une box. Sur cette fenêtre, vous pouvez écrire votre CSS.

Ajouter du CSS sur WPbakery
Modifier le style.css dans les dossiers du thème

HTML et JS personnalisés

Sur l’éditeur de page, vous pouvez intégrer des scripts grâce à l’élément « Javascript ». Également, votre code peut être intégré directement en HTML au lieu d’utiliser le bloc de texte.

Ajouter de l'HTML brut et du javascript sur WPBakery