wp gridbuilder thumbnail

WP Gridbuilder : une extension qui dynamise vos boutiques, blogs et portfolios !

Publié le 26/06/2023 | 2 commentaires

Article rédigé avec ❤️ par La Webeuse
🤯 Besoin d’aide ? Réservez votre séance de coaching WordPress en visio ici ! 🤩

WP Gridbuilder… Vous connaissez ? Si ce n’est pas le cas, restez là, cet article va vous plaire ! Car vous pourriez bien avoir besoin de cette extension WordPress, tellement utile et puissante ! Dans ce tutoriel, je vous explique à quoi elle sert et comment l’utiliser…

Notez : certains liens de ce blog sont des liens d’affiliation. Vous les reconnaîtrez facilement grâce à leur couleur : Je suis un lien affiliéJe suis un lien classique.

1 – Qu’est-ce que WP Gridbuilder ?

WP Gridbuilder est une extension qui permet de filtrer le contenu de WordPress et d’afficher rapidement les résultats. Cette extension existe depuis 2019, et cerise sur le gâteau : c’est un produit Made in France développé par Loïc Blasco. Vous l’avez peut-être déjà croisé lors d’un WordCamp.

Pas besoin de chercher cette extension sur le répertoire officiel de WordPress, car elle est Full Premium, cela signifie qu’il n’y a pas de version gratuite disponible. Vous pourrez toutefois obtenir un remboursement sous 14 jours si vous n’êtes pas entièrement satisfait.

🤑 Le prix ? De 49$/an pour 1 site à 249$/an pour un nombre illimité de sites. À certaines périodes de l’année, une offre lifetime est proposée durant un temps limité, vous permettant d’acquérir l’extension avec un paiement « one-time » (c’est ce que j’ai fait 🤩).

=> Visiter le site officiel.

2 – Dans quels cas utiliser Gridbuilder ?

Sur un site vitrine, un petit blog ou une petite boutique, vous n’aurez pas besoin de cette extension

Mais si vous avez une boutique WooCommerce avec un grand nombre de produits et que vous souhaitez offrir une expérience utilisateur optimale à vos clients, Gridbuilder est parfait.

Si vous regardez les deux captures d’écran ci-dessous, vous comprenez vite l’utilité de Gridbuilder : l’extension permet de créer des filtres de recherche sur mesure puis s’occupe d’afficher les résultats dans la grille.

Gridbuilder sur une boutique WooCommerce
Gridbuilder sur une boutique WooCommerce d’accessoires mode
Gridbuilder sur une librairie en ligne
Gridbuilder sur une librairie en ligne

Vous pourrez faire la même chose sur un blog qui contient de nombreux articles ou sur un portfolio bien étoffé…

Gridbuilder sur un blog
Gridbuilder sur un blog
Gridbuilder sur un portfolio
Gridbuilder sur un portfolio

Avec Gridbuilder, vous pourrez même créer des cartes filtrables

Gridbuilder sur une map
Gridbuilder sur une map

Découvrez toutes les démos ici afin de tester le fonctionnement par vous-même.

3 – Comment utiliser WP Gridbuilder ?

Gridbuilder offre de nombreuses fonctionnalités très puissantes et le rendu s’intègre parfaitement sur votre site, peu importe le thème ou le constructeur de page que vous utilisez.

Bien que les développeurs comprennent plus facilement le fonctionnement de cette extension (qui s’appuie sur la logique de WordPress) que les néophytes, il n’est pas compliqué de l’utiliser.

Il faudra toutefois faire quelques essais pour l’apprivoiser et paramétrer les filtres correctement. Voici un mode d’emploi rapide qui vous mettra le pied à l’étrier…

3.1 – Le tableau de bord

Lorsque vous installez et activez l’extension WP Gridbuilder, rendez-vous d’abord dans l’onglet Gridbuilder > Tableau de bord pour y saisir votre clé de licence.

gridbuilder tableau de bord 2
Activer la licence Gridbuilder

Vous noterez que depuis ce tableau de bord, vous pourrez exporter et importer des réglages, des grilles, des cartes et des facettes. Cela vous permettra de transporter une base de travail d’un site à un autre.

3.2 – Les réglages de base

Ensuite, rendez-vous dans l’onglet Gridbuilder > Réglages, où vous pourrez :

  1. Régler quelques options de base.
  2. Paramétrer le profil de couleur utilisé dans les grilles et les filtres.
  3. Créer de nouvelles tailles d’images
  4. Paramétrer l’apparence et le comportement de la visionneuse
reglages gridbuilder
Réglages de Gridbuilder

Vous pouvez commencer avec les réglages par défaut et revenir plus tard ici pour affiner vos choix.

💡 Mon conseil SEO : vous pouvez éventuellement désactiver l’option Historique du navigateur, cela éliminera les paramètres de filtres (facettes) dans l’URL et évitera à Google de vouloir essayer d’indexer ces URLs. Si par contre, vous aimeriez conserver ces fameux paramètres dans l’URL, vous pouvez utiliser le fichier robot.txt pour interdire l’indexation.

3.3 – Créer et configurer une grille

Passons maintenant au paramétrage de la grille. La grille est la galerie qui affiche tous les résultats. C’est tout simplement l’équivalent d’un module blog ou d’un module boutique qu’un constructeur de page propose. Voici comment créer ce type de grille :

creer la grille 2
Créer une grille
  1. Rendez-vous à l’onglet Grilles. Pour faciliter le travail, je vous conseille de sélectionner les 3 modèles proposés et de les importer.
  2. À l’aide de la roue des réglages, éditez la grille qui correspond le mieux à vos besoins.
  3. Depuis l’onglet Nommage, donnez un nom à cette grille. Par exemple, Boutique de livre.
  4. Une fois enregistré, un code court est généré, vous pourrez vous en servir pour afficher cette grille n’importe où sur votre site.
  5. Ensuite, je vous conseille de parcourir tous les autres onglets pour continuer de paramétrer cette grille.
parametrer la grille
Paramétrer la grille
  1. C’est surtout l’onglet Requête du contenu qui vous permettra de choisir ce que la grille doit afficher. Par exemple, vous pourrez choisir un type de publication en désignant les produits de la boutique et faire apparaître uniquement les produits publiés. Vous pourrez également définir le nombre de produits à afficher avant une éventuelle pagination, la manière dont ils doivent se trier (par date de publication par exemple), etc.
  2. Les autres onglets tels que Formats des médias, Mise en page, Carrousel, Styles de cartes, etc. serviront surtout à paramétrer le design de la grille.
parametrer la requete
Paramétrer la requête de contenus à afficher dans la grille

Enregistrez vos modifications. Il est possible que la grille ne soit pas tout à fait conforme à vos attentes, il suffira alors de revenir ultérieurement ici pour affiner vos paramètres.

Notez que vous pouvez créer autant de grilles que vous le souhaitez. Chacune aura un code court différent, vous permettant ainsi de les afficher à divers endroits dans votre site.

3.4 – Créer une carte

Vous allez ensuite créer le design des cartes de la grille. Pour cela, rendez-vous à l’onglet Cartes. Pour commencer rapidement, ici aussi je vous conseille d’importer tous les types de cartes déjà pré-créées. Ce sont des modèles de cartes proposés par Gridbuilder.

creer une carte
Importer tous les modèles de cartes

Tous les modèles vont ainsi apparaître et vous pourrez passer la souris sur chaque carte pour découvrir le design qu’elle propose. Sélectionnez celle qui correspond le plus à vos attentes puis cliquez sur la roue des réglages pour l’éditer…

editer une carte

Vous entrez alors dans l’éditeur de la carte où vous pourrez tout modifier : polices, marges, couleurs, blocs, etc.

modifier une carte
Personnaliser la carte

Ce n’est pas très compliqué, vous pouvez même conserver les réglages par défaut que vous affinerez ensuite selon vos goûts.

attibuer le style de carte 1
Attribuer le style de carte à la grille

Enfin, n’oubliez pas de retourner dans l’onglet Grilles > Styles de cartes pour attribuer à la grille le modèle que vous venez de choisir. Par exemple, ici, j’assigne à la grille le modèle de carte Agate.

3.5 – Créer les facettes

Vient enfin le plus important : la création des facettes. Ce sont les options qui permettront de filtrer la grille selon les choix de l’internaute. Toute la puissance de WP Gridbuilder réside en la possibilité de créer tous types de facettes. Et ce sera votre job de créer les facettes les plus pertinentes !

facettes grid 1
Créer les facettes ou importer les modèles pré-paramétrés

Bien entendu, vous pouvez déjà importer les quelques facettes basiques proposées par l’extension, mais vous devrez certainement créer les vôtres pour qu’elles s’accordent parfaitement à vos besoins.

facette parametrage 1
Paramétrer une facette.
  1. Commencez d’abord par nommer votre facette.
  2. Rendez-vous ensuite dans l’onglet Comportement où vous trouverez toutes les options. Vous choisirez d’abord l’action de votre facette. Doit-elle Filtrer, Charger, Trier, etc. ?
  3. En fonction de l’action, vous devrez ensuite sélectionner le type de filtre. Selon l’action choisie, vous aurez plus ou moins d’options.
  4. Enfin, en fonction des options précédentes, vous pourrez personnaliser la facette. Par exemple, si les produits de votre boutique sont dotés d’attributs, de catégories et d’étiquettes, Gridbuilder vous proposera ces divers filtres… C’est ainsi que l’internaute pourra trier les résultats en fonction du type de produits, de la taille, de la couleur, etc.

Vous devrez créer une facette pour chaque type de triage souhaité… Selon la taille de votre blog ou de votre boutique, il vous faudra créer de nombreuses facettes !

4 – Comment afficher les grilles sur le site ?

Une fois que vous avez paramétré les grilles, les cartes et les facettes, vous n’avez plus qu’à afficher cela sur votre site. Il existe plusieurs solutions pour le faire…

4.1 – En natif avec Gutenberg

Gridbuilder prend nativement en charge l’éditeur de WordPress (Gutenberg). Donc, au sein de votre page, vous pourrez simplement ajouter un bloc Grille et tous les blocs Facettes dont vous avez besoin.

gutenberg gridbuilder
Ajoutez les blocs Grille et Facettes directement depuis l’éditeur Gutenberg.

4.2 – En intégration via des add-ons

Si vous utilisez Elementor, Oxygen, Bricks ou Beaver Builder, vous pouvez vous rendre à l’onglet Gridbuilder > Modules pour installer l’add-on qui permet d’intégrer facilement les Grilles et les Facettes depuis votre constructeur de page préféré.

modules
Les modules à installer à la carte pour étendre Gridbuilder

Voir tous les add-ons.

4.3 – Avec des shortcodes (codes courts)

Enfin, peu importe le thème ou le constructeur que vous utilisez, les codes courts générés lors de la création de la grille et des facettes vous permettront de les afficher où vous le souhaitez.

Par exemple, sur une boutique WooCommerce / Divi, vous pourrez créer un modèle de thème et placer tous les codes courts, dans l’ordre que vous souhaitez.

gridbuilder avec divi
Utiliser les codes courts dans vos modèles de thème Divi

5 – WP Grid Builder : en résumé

J’ai été surprise par l’efficacité de cette extension ! Côté front, lorsque vous faites une recherche, les résultats qui s’affichent dans la grille sont presque immédiats, ça ne mouline pas comme on a plutôt tendance à le voir sur des boutiques qui utilisent des alternatives à WP Gridbuilder.

Les grilles et les cartes sont « canons » 😅 et on peut vraiment tout personnaliser…

Enfin, bref, vous avez compris que j’ai eu un petit coup de cœur pour cette extension que je vous recommande++ si vous voulez repimper votre boutique ou votre blog.

Pour aller plus loin, je vous invite à consulter la documentation officielle de l’extension.

gridbuilder pin 1 1
gridbuilder pin 2
guide wp sidebar
formation wordpress sidebar
formation affinity bouton
toutes les formations
livre wordpress sidebar
astuces pour divi
newsletter sidebar
coaching visio
Cet article a été écrit par La Webeuse
J'accompagne les entrepreneurs et les entreprises dans la construction de leur visibilité sur le Web. De formation initiale dans la restauration de luxe, je me prends de passion pour le WebDesign et WordPress à partir de 2012. Aujourd’hui, vous trouvez mon livre "Je crée mon site avec WordPress" (Éditions Eyrolles) dans les librairies et vous bénéficiez de mes astuces publiées sur mes blogs La Webeuse et Astuces Divi. Mes formations en ligne, en visio ou hybrides vous permettent d'apprendre plus vite pour aller encore plus loin.

Encore un peu de lecture ?

Comment gérer ou créer des modèles de thème (avec des blocs)

Comment gérer ou créer des modèles de thème (avec des blocs)

Dans cet article, je vous explique la notion de "Modèle" dans le cadre des thèmes WordPress basés sur les blocs. Nous allons explorer comment les gérer, les créer, les modifier et les assigner à des publications. L’édition complète du site offre une vraie amélioration...

Personnaliser le pied de page (footer) de votre thème à blocs

Personnaliser le pied de page (footer) de votre thème à blocs

Ce nouveau tutoriel vous accompagne pas à pas dans la personnalisation du pied de page de votre site qui utilise n’importe quel thème basé sur les blocs (full Gutenberg). Ce pied de page, aussi appelé footer, est un élément très important du design global de votre...

Personnaliser l’en-tête (header) de votre thème à blocs

Personnaliser l’en-tête (header) de votre thème à blocs

L'en-tête de votre site est un élément essentiel du webdesign. C'est la deuxième étape de la personnalisation de votre thème WordPress, après avoir paramétré les styles globaux. Dans ce tutoriel, je vous invite à paramétrer le header d'un site qui utilise n'importe...

2 Commentaires

  1. Magali

    Merci pour cette revue de plugin. C’est exactement la fonctionnalité que je cherche. Ma question : ce plugin est-il compatible avec Divi ?

  2. La Webeuse

    Bonjour Magali. Oui, il l’est puisque je l’ai utilisé avec Divi et WooCommerce. Par contre, tu devras utiliser les shortcodes pour afficher les grilles dans Divi (il n’y a pas de « module Divi » qui a été développé).

Soumettre un commentaire

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

La Webeuse