Introduction sur WPBakery
WPBakery intègre des fonctionnalités 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 et les débutants pour créer un site internet professionnel.
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
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é
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
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 ?
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
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
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
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.
Idéalement, désactiver Gutenberg Editor pour ne charger que le contenu qui nous intéresse.
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».
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 !
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.
Vous devez également cliquer sur «Éditeur de l’administration» comme ici :
Maintenant que cela est fait, vous aurez accès à l’éditeur de page de WPBakery.
Le système de rangées
Pour créer un nouveau contenu, nous avons besoin d’utiliser une rangée.
Désormais, une rangée est disponible sur votre builder. Vous pouvez ici établir des réglages sur votre 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 ) :
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 :
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 :
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 :
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 :
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% :
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.
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 !
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. les liens internes sont cruciaux pour votre référencement naturel. 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 ».
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.
É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.
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.
