{"id":7945,"date":"2021-05-15T19:19:06","date_gmt":"2021-05-15T17:19:06","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=7945"},"modified":"2021-07-13T12:02:43","modified_gmt":"2021-07-13T10:02:43","slug":"wp-gridbuilder-facettes-sur-mesure-pour-blog-site-e-commerce","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/wordpress\/wp-gridbuilder-facettes-sur-mesure-pour-blog-site-e-commerce","title":{"rendered":"WP Gridbuilder &#8211; Des facettes sur mesure pour votre blog ou site e-commerce"},"content":{"rendered":"<p>J&rsquo;ai d\u00e9couvert <a href=\"https:\/\/wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">WP GridBuilder<\/a> en suivant le compte de <a href=\"https:\/\/twitter.com\/Maximebj\">Maxime<\/a> sur Twitter. Il en parlait dans je ne sais plus quel contexte ou avait retweet\u00e9 un contenu qui a piqu\u00e9 ma curiosit\u00e9. Quelques semaines apr\u00e8s je me lance dans l&rsquo;exploration du plugin, autant vous dire que j&rsquo;ai \u00e9t\u00e9 bluff\u00e9.<\/p>\n<p><!--more--><\/p>\n<p>Je contacte l&rsquo;auteur du plugin afin de savoir s&rsquo;il y a moyen de le tester avant de peut-\u00eatre en faire une revue, cela me donnera une meilleure id\u00e9e pour \u00e9crire un article plus fid\u00e8le et moins vide de sens. Tr\u00e8s g\u00e9n\u00e9reusement, j&rsquo;ai eu une r\u00e9ponse dans l&rsquo;heure me proposant une licence, sans aucune contre-partie. Je manquais un peu de temps pour \u00eatre aussi r\u00e9actif, mais \u00e9tant en cong\u00e9s en ce moment, je me suis pench\u00e9 sur l&rsquo;exploration du plugin <a href=\"https:\/\/wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">WP Gridbuilder<\/a>, et vous savez quoi ?<\/p>\n<p>C&rsquo;est juste la folie !<\/p>\n<p class=\"message remember\"><strong>Promo temporaire<\/strong> : Le plugin est actuellement \u00e0 <a href=\"https:\/\/wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">-40% jusqu&rsquo;\u00e0 vendredi 21 mai<\/a> pour f\u00eater son anniversaire. Je dis \u00e7a je dis rien \ud83d\ude01<\/p>\n<h2>WP Gridbuilder : construisez une grille filtrable en moins d&rsquo;une heure<\/h2>\n<p>Alors non, ce n&rsquo;est pas la promesse du plugin, c&rsquo;est juste un constat personnel : en cherchant un peu tout ce qu&rsquo;on pouvait faire avec l&rsquo;outil, j&rsquo;ai pu bidouiller pas mal de choses et mettre en place une grille filtrable basique en tr\u00e8s tr\u00e8s peu de temps (20 min).<\/p>\n<p>J&rsquo;ai construit une carte repr\u00e9sentant un extrait d&rsquo;article de blog, puis j&rsquo;ai construit mes facettes en proposant une base simple de tri par cat\u00e9gorie (combinable) et une recherche par mot cl\u00e9.<\/p>\n<figure id=\"attachment_7949\" aria-labelledby=\"figcaption_attachment_7949\" class=\"wp-caption aligncenter\" style=\"width: 1906px\"><img decoding=\"async\" class=\"size-full wp-image-7949\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-render-with-facet-column@2x.png\" alt=\"\" width=\"1896\" height=\"905\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-render-with-facet-column@2x.png 1896w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-render-with-facet-column@2x-300x143.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-render-with-facet-column@2x-600x286.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-render-with-facet-column@2x-768x367.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-render-with-facet-column@2x-1536x733.png 1536w\" sizes=\"(max-width: 1896px) 100vw, 1896px\" \/><figcaption id=\"figcaption_attachment_7949\" class=\"wp-caption-text\">Un exemple d&rsquo;une grille pour ce blog ins\u00e9r\u00e9e directement dans cet article (que je n&rsquo;ai pas laiss\u00e9 activ\u00e9, c&rsquo;\u00e9tait pour vous offrir un exemple visuel)<\/figcaption><\/figure>\n<p>En moins d&rsquo;une heure, il serait donc possible de mettre en place une grille bien plus avanc\u00e9e pour votre structure e-commerce (<a href=\"https:\/\/demos.wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">d\u00e9mo pour du e-commerce<\/a>), site d&rsquo;annonces, <a href=\"https:\/\/demos.wpgridbuilder.com\/portfolio\/?ref=283&amp;campaign=CreativeJuizFR\">portfolio<\/a>, ou m\u00eame pour reproduire une recherche \u00e0 la AirBnB (<a href=\"https:\/\/demos.wpgridbuilder.com\/map\/?ref=283&amp;campaign=CreativeJuizFR\">d\u00e9mo \u00ab\u00a0map\u00a0\u00bb<\/a>), ou je ne sais quoi encore qui m\u00e9riterait d&rsquo;\u00eatre filtr\u00e9.<\/p>\n<p>L&rsquo;extension veut r\u00e9pondre un besoin assez commun, mais r\u00e9pond \u00e0 plusieurs probl\u00e9matiques en m\u00eame temps :<\/p>\n<ul>\n<li>permet de cr\u00e9er une grille d&rsquo;\u00e9l\u00e9ments (images, cartes, textes) m\u00eame si votre th\u00e8me ne le pr\u00e9voit pas de base.<\/li>\n<li>permet d&rsquo;ajouter un syst\u00e8me de facette : un groupement d&rsquo;outils qui permettent de filtrer ou rechercher dans un type de contenu.<\/li>\n<li>tacle la probl\u00e9matique technique : construire ce genre de composants pour votre site web requiert des heures de d\u00e9veloppement, et n&rsquo;est souvent pas flexible apr\u00e8s mise en production. La moindre \u00e9volution demande \u00e0 nouveau du temps de d\u00e9veloppement. Ce plugin propose un \u00e9diteur visuel relativement simple \u00e0 prendre en main. Relativement&#8230;<\/li>\n<\/ul>\n<p>Dans tous les cas, il propose un \u00e9norme gain de temps en d\u00e9veloppement, et permet d&rsquo;ajouter des fonctions puissantes \u00e0 votre site web.<\/p>\n<h2>Comment construire une liste filtrable dans WordPress ?<\/h2>\n<p>Je dis \u00ab\u00a0relativement simple\u00a0\u00bb, car il m&rsquo;a fallu quelques minutes pour comprendre que les 3 \u00e9l\u00e9ments composants une grille \u00e0 facettes sont bien fortement s\u00e9par\u00e9s. Vous allez construire, dans l&rsquo;ordre propos\u00e9 par le plugin :<\/p>\n<ul>\n<li>la <strong>grille<\/strong> contenant vos futures cartes et filtres (facettes)<\/li>\n<li>les <strong>cartes<\/strong> contenant votre contenu visuel (produits pour un e-commerce, article de blog, annonces, etc.)<\/li>\n<li>les <strong>facettes<\/strong> contenant les moyens de filtre de votre contenu de grille.<\/li>\n<\/ul>\n<h3>Cr\u00e9er des cartes avec WP Gridbuilder<\/h3>\n<p>Personnellement, j&rsquo;ai trouv\u00e9 plus pratique de commencer par les cartes, puisque je savais ce que je voulais mettre en place pour mes tests. Et si vous lancez une preview de votre grille sans avoir pr\u00e9par\u00e9 de carte, vous n&rsquo;allez pas voir grand chose.<\/p>\n<figure id=\"attachment_7956\" aria-labelledby=\"figcaption_attachment_7956\" class=\"wp-caption aligncenter\" style=\"width: 1710px\"><img decoding=\"async\" class=\"size-full wp-image-7956\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-editor@2x.png\" alt=\"\" width=\"1700\" height=\"925\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-editor@2x.png 1700w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-editor@2x-300x163.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-editor@2x-600x326.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-editor@2x-768x418.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-editor@2x-1536x836.png 1536w\" sizes=\"(max-width: 1700px) 100vw, 1700px\" \/><figcaption id=\"figcaption_attachment_7956\" class=\"wp-caption-text\">L&rsquo;\u00e9diteur de carte avec sa pr\u00e9visualisation<\/figcaption><\/figure>\n<p>Le principe de l&rsquo;\u00e9diteur est plut\u00f4t simple : s\u00e9lectionnez sur la gauche les contenus \u00e0 ins\u00e9rer dans la carte, et d\u00e9posez-le sur la pr\u00e9visualisation dans l&rsquo;encadr\u00e9 de droite. L&rsquo;espace r\u00e9serv\u00e9 \u00e0 la vignette de l&rsquo;article ou de l&rsquo;item est un peu complexe mais vous pouvez exploser la vue pour avoir un meilleur contr\u00f4le.<\/p>\n<figure id=\"attachment_7954\" aria-labelledby=\"figcaption_attachment_7954\" class=\"wp-caption aligncenter\" style=\"width: 1308px\"><img decoding=\"async\" class=\"size-full wp-image-7954\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-content-editor@2x.png\" alt=\"\" width=\"1298\" height=\"860\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-content-editor@2x.png 1298w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-content-editor@2x-300x199.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-content-editor@2x-600x398.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-card-content-editor@2x-768x509.png 768w\" sizes=\"(max-width: 1298px) 100vw, 1298px\" \/><figcaption id=\"figcaption_attachment_7954\" class=\"wp-caption-text\">La vue vignette de la carte en \u00e9clat\u00e9<\/figcaption><\/figure>\n<p>Notez cependant de ne pas faire comme moi : travailler sur une vue r\u00e9duite de votre navigateur (fen\u00eatre redimensionn\u00e9e) autrement vous allez avoir du mal \u00e0 comprendre le fonctionnement de la pr\u00e9visualisation des \u00e9l\u00e9ments que vous ajoutez.<\/p>\n<p>Vous avez la possibilit\u00e9 d&rsquo;ajouter pas mal de types de contenu diff\u00e9rents, jusqu&rsquo;\u00e0 une liste compl\u00e8te de l&rsquo;ensemble des meta donn\u00e9es qui peuvent composer votre post-type.<\/p>\n<p>Une fois votre contenu ajout\u00e9, vous pouvez personnaliser l&rsquo;apparence de chacun des \u00e9l\u00e9ments : taille de la police, couleur de fond et de texte, espacement autour ou \u00e0 l&rsquo;int\u00e9rieur de chaque \u00e9l\u00e9ment, apparence au survole de la carte et m\u00eame animation. C&rsquo;est tr\u00e8s complet ici.<\/p>\n<p>Une fois que vos cartes sont toutes jolies et vous conviennent, il est temps de voir comment vous souhaitez les filtrer gr\u00e2ce aux facettes.<\/p>\n<h3>Cr\u00e9er les filtres, ou \u00ab\u00a0facettes\u00a0\u00bb<\/h3>\n<p>Une fois n&rsquo;est pas coutume, l&rsquo;interface est \u00e9galement assez riche ici, et je ne vais pas rentrer dans tous ses d\u00e9tails.<\/p>\n<figure id=\"attachment_7961\" aria-labelledby=\"figcaption_attachment_7961\" class=\"wp-caption aligncenter\" style=\"width: 1318px\"><img decoding=\"async\" class=\"size-full wp-image-7961\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facets-builder@2x.png\" alt=\"\" width=\"1308\" height=\"860\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facets-builder@2x.png 1308w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facets-builder@2x-300x197.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facets-builder@2x-600x394.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facets-builder@2x-768x505.png 768w\" sizes=\"(max-width: 1308px) 100vw, 1308px\" \/><figcaption id=\"figcaption_attachment_7961\" class=\"wp-caption-text\">Le point d&rsquo;entr\u00e9e des facettes<\/figcaption><\/figure>\n<p>Dans mon cas, j&rsquo;ai cr\u00e9\u00e9 une facette nomm\u00e9e Cat\u00e9gories, que je vais utiliser comme filtre premier. Lorsque j&rsquo;ai cr\u00e9\u00e9 ce premier \u00e9l\u00e9ment, j&rsquo;ai utilis\u00e9 le type checkbox qui permet d&rsquo;additionner les options. Par exemple : \u00ab\u00a0je souhaite tous les articles inscrits dans les cat\u00e9gories Ressources et Exp\u00e9rience Utilisateur&rsquo;.<\/p>\n<p>Il existe de nombreux types diff\u00e9rents qui peuvent vous servir suivant la nature de votre contenu et l&rsquo;information utilis\u00e9e pour filtrer. Par exemple, le type \u00ab\u00a0Range Slider\u00a0\u00bb peut servir pour d\u00e9finir une fourchette de prix pour votre boutique en ligne.<\/p>\n<figure id=\"attachment_7963\" aria-labelledby=\"figcaption_attachment_7963\" class=\"wp-caption aligncenter\" style=\"width: 1695px\"><img decoding=\"async\" class=\"size-full wp-image-7963\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-type@2x.png\" alt=\"\" width=\"1685\" height=\"910\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-type@2x.png 1685w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-type@2x-300x162.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-type@2x-600x324.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-type@2x-768x415.png 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-type@2x-1536x830.png 1536w\" sizes=\"(max-width: 1685px) 100vw, 1685px\" \/><figcaption id=\"figcaption_attachment_7963\" class=\"wp-caption-text\">Les types de facette disponible<\/figcaption><\/figure>\n<p>En fonction de l&rsquo;action que vous choisissez pour une facette, les options disponibles vont varier. Par exemple pour l&rsquo;action \u00ab\u00a0Load\u00a0\u00bb, vous aurez la possibilit\u00e9 de proposer une pagination, ou un bouton \u00ab\u00a0charger plus\u00a0\u00bb, ainsi que des options d&rsquo;affichage (nombre d&rsquo;items par pages, etc.)<\/p>\n<p>Pour ce qui est de la vue recherche dans vos contenus, vous pouvez m\u00eame brancher l&rsquo;outil avec des plugins d&rsquo;am\u00e9lioration de la recherche pour optimiser les r\u00e9sultats.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-7967\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-with-search-engine@2x.png\" alt=\"\" width=\"1306\" height=\"827\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-with-search-engine@2x.png 1306w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-with-search-engine@2x-300x190.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-with-search-engine@2x-600x380.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-facet-with-search-engine@2x-768x486.png 768w\" sizes=\"(max-width: 1306px) 100vw, 1306px\" \/><\/p>\n<p>Je vous laisse explorer d&rsquo;avantage cette partie, tellement elle peut varier et d\u00e9pendre de vos types de contenu. A la lecture des options, j&rsquo;ai l&rsquo;impression que les facettes couvrent la plupart des besoins classiques en terme de structure de donn\u00e9es.<\/p>\n<h3>Cr\u00e9er votre grille<\/h3>\n<p>Une fois les facettes et cartes cr\u00e9\u00e9es, il va falloir ajuster un peu votre grille dans son comportement global. Vous allez pouvoir d\u00e9finir le layout complet, son comportement sur les diff\u00e9rentes tailles d&rsquo;\u00e9cran ainsi que les d\u00e9tails d&rsquo;animation, entre autres choses.<\/p>\n<figure id=\"attachment_7965\" aria-labelledby=\"figcaption_attachment_7965\" class=\"wp-caption aligncenter\" style=\"width: 1528px\"><img decoding=\"async\" class=\"size-full wp-image-7965\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-blog-content-demo@2x.png\" alt=\"\" width=\"1518\" height=\"618\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-blog-content-demo@2x.png 1518w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-blog-content-demo@2x-300x122.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-blog-content-demo@2x-600x244.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-blog-content-demo@2x-768x313.png 768w\" sizes=\"(max-width: 1518px) 100vw, 1518px\" \/><figcaption id=\"figcaption_attachment_7965\" class=\"wp-caption-text\">Le plugin propose des mod\u00e8les pour votre premi\u00e8re grille<\/figcaption><\/figure>\n<p>Vous donnez un nom \u00e0 votre grille et vous \u00eates fins pr\u00eats \u00e0 r\u00e9gler tout les d\u00e9tails.<\/p>\n<figure id=\"attachment_7971\" aria-labelledby=\"figcaption_attachment_7971\" class=\"wp-caption aligncenter\" style=\"width: 1316px\"><img decoding=\"async\" class=\"size-full wp-image-7971\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-grid-layoutpng@2x.png\" alt=\"\" width=\"1306\" height=\"788\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-grid-layoutpng@2x.png 1306w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-grid-layoutpng@2x-300x181.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-grid-layoutpng@2x-600x362.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-grid-layoutpng@2x-768x463.png 768w\" sizes=\"(max-width: 1306px) 100vw, 1306px\" \/><figcaption id=\"figcaption_attachment_7971\" class=\"wp-caption-text\">R\u00e9glage du layout<\/figcaption><\/figure>\n<p>Entre les r\u00e9glages du format des images, le comportement de la grille, la hauteur de chaque item de liste (carte), le comportement en carrousel (ou pas ;p).<br \/>\nC&rsquo;est l\u00e0 \u00e9galement que vous allez d\u00e9finir quelles sont les cartes que vous souhaitez utiliser (si vous en avez plusieurs) et quelles sont les facettes \u00e0 impl\u00e9menter, et surtout : o\u00f9.<\/p>\n<p>Vous pouvez \u00e9galement r\u00e9gler assez finement le comportement en fonction des tailles d&rsquo;\u00e9cran.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-7969\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-gid-responsitvity@2x.png\" alt=\"\" width=\"557\" height=\"489\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-gid-responsitvity@2x.png 557w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-gid-responsitvity@2x-300x263.png 300w\" sizes=\"(max-width: 557px) 100vw, 557px\" \/><\/p>\n<p>Si vous utilisez Gutenberg, le plugin vous propose de composer tout cela dans vos pages, mais sans Gutenberg vous pouvez \u00e9galement composer votre layout et utiliser un shortcode dans n&rsquo;importe quelle page.<\/p>\n<figure id=\"attachment_7973\" aria-labelledby=\"figcaption_attachment_7973\" class=\"wp-caption aligncenter\" style=\"width: 1305px\"><img decoding=\"async\" class=\"wp-image-7973 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-layout-editor@2x.png\" alt=\"\" width=\"1295\" height=\"852\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-layout-editor@2x.png 1295w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-layout-editor@2x-300x197.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-layout-editor@2x-600x395.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-layout-editor@2x-768x505.png 768w\" sizes=\"(max-width: 1295px) 100vw, 1295px\" \/><figcaption id=\"figcaption_attachment_7973\" class=\"wp-caption-text\">Composez votre layout et ajuster les styles sur les roues dent\u00e9es<\/figcaption><\/figure>\n<p>Je vous laisse jouer avec les options d&rsquo;animations et spinner de chargement, c&rsquo;est la partie facile du plugin \u00e7a \ud83d\ude42<\/p>\n<p>Une fois que vous avez fait vos r\u00e9glages, la preview permet de vous aider \u00e0 vous projeter sur le rendu final avant impl\u00e9mentation sur votre site web. Toujours bienvenu avec de faire une b\u00eatise.<\/p>\n<p>Vous pouvez \u00e9galement parfaitement int\u00e9grer le shortcode dans une page et afficher une preview pour tester le rendu final.<\/p>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"https:\/\/wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">D\u00e9couvrir WP Gridbuilder<\/a><\/p>\n<h2>WP Gridbuilder : les points forts<\/h2>\n<p>Je vous ai \u00e0 peine pr\u00e9sent\u00e9 20% des fonctions et d\u00e9tail de l&rsquo;outil, il y a foule de moyens d&rsquo;ajuster les donn\u00e9es, requ\u00eates, et la pr\u00e9sentation de votre grille.<\/p>\n<p>Des retours de la communaut\u00e9 WordPress indiquent qu&rsquo;il s&rsquo;agit d&rsquo;un des outils les plus puissants aujourd&rsquo;hui, et je ne peux qu&rsquo;\u00eatre d&rsquo;accord \u00e0 la vue de mon exploration.<\/p>\n<ul>\n<li>Il s&rsquo;adapte \u00e0 votre environnement : m\u00eame sans Gutenberg activ\u00e9, vous allez pouvoir ins\u00e9rer et composer votre grille pour n&rsquo;importe quel contenu de votre site web.<\/li>\n<li>Vous pouvez vous en sortir sans connaissance technique : le card builder est plut\u00f4t assez bien con\u00e7u, et le rendu visuel permet de \u00ab\u00a0bidouiller les curseurs\u00a0\u00bb jusqu&rsquo;\u00e0 obtenir un contenu qui vous convienne.<\/li>\n<li>L&rsquo;interface d&rsquo;admin est bien faite et fra\u00eeche. Elle propose un contenu a\u00e9r\u00e9 et des aides contextuelles souvent bienvenues pour vous aider \u00e0 faire vos premiers pas.<\/li>\n<li>Il y a pas mal de m\u00e9thode de pr\u00e9visualisation, sauvegarde, export et import qui en font un outil flexible pour le d\u00e9veloppement et test.<\/li>\n<\/ul>\n<p>Je suis en train de construire un e-commerce en ce moment et je n&rsquo;ai qu&rsquo;une h\u00e2te : pousser la b\u00eate un peu plus loin et me faire gagner des heures de d\u00e9veloppement.<\/p>\n<h2>WP Gridbuilder : Quelques manques dans l&rsquo;interface ?<\/h2>\n<p>Bien que le plugin soit tr\u00e8s bien construit, d&rsquo;un point de vue interface, j&rsquo;ai vite ressenti quelques manques, mais c&rsquo;est certainement quelque chose de relativement simple \u00e0 faire \u00e9voluer \u00e0 moyen terme.<\/p>\n<h3>Les options de style de la carte<\/h3>\n<p>Ayant quelques connaissances en CSS, et jou\u00e9 pas mal avec <a href=\"https:\/\/webflow.grsm.io\/geoffreycrofte4796\">Webflow<\/a> ces derniers temps, j&rsquo;ai \u00e9t\u00e9 rapidement bloqu\u00e9 par le formatage des valeurs de <a href=\"https:\/\/wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">WP Gridbuilder<\/a>. En effet, j&rsquo;ai souhait\u00e9 \u00e0 un moment ferrer \u00e0 droite un \u00e9l\u00e9ment en lui mettant une marge \u00ab\u00a0auto\u00a0\u00bb \u00e0 gauche, mais le mot-cl\u00e9 auto ne semble pas admis.<\/p>\n<h3>Admin responsive<\/h3>\n<p>Au d\u00e9but de l&rsquo;utilisation de l&rsquo;outil, j&rsquo;\u00e9tais sur un Mac 13&Prime; avec une vue navigateur un peu r\u00e9duite. Je dois vous avouer que je ne comprenais pas vraiment ce que je faisais en cliquant fr\u00e9n\u00e9tiquement sur l&rsquo;ajout de contenu dans la carte : la preview n&rsquo;\u00e9tant pas disponible je ne voyais pas que j&rsquo;avais ajout\u00e9 5 excerpts dans l&rsquo;espace d\u00e9di\u00e9 \u00e0 la miniature de l&rsquo;article.<\/p>\n<p>\u00c9galement l&rsquo;interface peut vite devenir une horreur \u00e0 comprendre sur petit \u00e9cran.<\/p>\n<figure id=\"attachment_7958\" aria-labelledby=\"figcaption_attachment_7958\" class=\"wp-caption aligncenter\" style=\"width: 1331px\"><img decoding=\"async\" class=\"size-full wp-image-7958\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-complexity@2x.png\" alt=\"\" width=\"1321\" height=\"659\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-complexity@2x.png 1321w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-complexity@2x-300x150.png 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-complexity@2x-600x299.png 600w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2021\/05\/wp-gridbuilder-complexity@2x-768x383.png 768w\" sizes=\"(max-width: 1321px) 100vw, 1321px\" \/><figcaption id=\"figcaption_attachment_7958\" class=\"wp-caption-text\">La vue pas tr\u00e8s clair sur petit \u00e9cran.<\/figcaption><\/figure>\n<p>Je vous d\u00e9conseille donc fortement de travailler sur petit \u00e9cran. Ou alors utilisez la technique du d\u00e9-zoom de votre navigateur si vous n&rsquo;avez qu&rsquo;un 13&Prime; \u00e0 disposition.<\/p>\n<p>Petit conseil pour les d\u00e9veloppeurs du plugin s&rsquo;ils nous lisent : un fonctionnement diff\u00e9rent sur petits \u00e9crans pourrait \u00eatre une solution : un clic sur l&rsquo;ajout d&rsquo;un contenu nous m\u00e8ne sur la vue preview de la carte. Cela permet de rentrer dans un processus plus lin\u00e9aire : ajout de contenu, pr\u00e9visualisation, puis ajustement des styles.<\/p>\n<h3>Facettes responsive<\/h3>\n<p>Sur l&rsquo;aspect public du site web, une fois la grille publi\u00e9e, les facettes ont tendance \u00e0 avoir un comportement trop simpliste : le contenu de la barre lat\u00e9rale passe tout simplement apr\u00e8s le contenu principal.<\/p>\n<p>Selon moi, le contenu de filtre devrait se trouver avant ce contenu principal, notamment si sur mobile, comme sur desktop, les contenus apparaissent au fil du d\u00e9filement de la page. Les filtres semblent long \u00e0 atteindre.<\/p>\n<p>Bien entendu vous pouvez jouer de JavaScript et CSS perso dans le plugin directement, mais \u00e7a vous demande des connaissances techniques.<\/p>\n<p>Peut-\u00eatre ai-je loup\u00e9 quelque chose ici, mais pour moi c&rsquo;est un point assez bloquant d&rsquo;un point de vue exp\u00e9rience utilisateur sur mobile ou petits \u00e9crans.<\/p>\n<h3>Processus de cr\u00e9ation<\/h3>\n<p>Ce n&rsquo;est peut-\u00eatre que moi, mais j&rsquo;ai commenc\u00e9 par cr\u00e9er une grille parce que l&rsquo;outil m&rsquo;y invitait, mais j&rsquo;ai vite saut\u00e9 sur la vue carte, trouvant le rendu en preview tr\u00e8s limit\u00e9 par rapport \u00e0 ce que je voulais comme rendu. Je me suis dit que construire la carte en premier semblait plus coh\u00e9rent.<\/p>\n<p>Encore une fois, ce n&rsquo;est peut-\u00eatre que moi, mais pour le processus de cr\u00e9ation des premiers \u00e9l\u00e9ments, je serais plut\u00f4t amen\u00e9 \u00e0 guider l&rsquo;utilisateur sur un step by step plus strict (qui peut \u00eatre saut\u00e9 pour les utilisateurs aguerris) et plus didactique. Disons que \u00e7a serait la cerise sur le g\u00e2teau. \ud83d\ude0a<\/p>\n<p style=\"text-align: center;\"><a class=\"demo\" href=\"https:\/\/wpgridbuilder.com\/?ref=283&amp;campaign=CreativeJuizFR\">D\u00e9couvrir WP Gridbuilder<\/a><\/p>\n<p class=\"message\"><strong>Disclaimer<\/strong> : ce contenu n&rsquo;est pas un contenu sponsoris\u00e9 malgr\u00e9 l&rsquo;aspect payant du plugin. Il propose des liens affili\u00e9s, mais la mon\u00e9tisation n&rsquo;est pas l&rsquo;objet principal de ce blog. Plus d&rsquo;informations sur ma <a href=\"https:\/\/www.creativejuiz.fr\/blog\/politique-liens-affilies\">politique de liens affili\u00e9s<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>J&rsquo;ai d\u00e9couvert WP GridBuilder en suivant le compte de Maxime sur Twitter. Il en parlait dans je ne sais plus quel contexte ou avait retweet\u00e9 un contenu qui a piqu\u00e9 ma curiosit\u00e9. Quelques semaines apr\u00e8s je me lance dans l&rsquo;exploration du plugin, autant vous dire que j&rsquo;ai \u00e9t\u00e9 bluff\u00e9.<\/p>\n","protected":false},"author":4,"featured_media":7977,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[13],"tags":[388,51,575],"coauthors":[597],"class_list":["post-7945","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-e-commerce","tag-plugin","tag-premium"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7945","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=7945"}],"version-history":[{"count":3,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7945\/revisions"}],"predecessor-version":[{"id":7979,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/7945\/revisions\/7979"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/7977"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=7945"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=7945"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=7945"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=7945"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}