Vous vous souvenez des années 80 ? L’arrivée de la new wave, l’avènement des coupes mulet, le succès de Début de soirée (et tu chantes, chantes, chantes…), et autres joyeusetés. Dans les années 80, c’est aussi l’explosion du jeu vidéo, et la sortie d’un jeu sur lequel nous sommes nombreux à avoir frôlé le claquement du pouce : Tetris.

Ce jeu au principe simple comme bonjour consistait à empiler des blocs de formes différentes tout en optimisant l’espace disponible.

Le concept tient en une seule ligne : « Tetris répond parfaitement à la définition du meilleur en matière de jeu : une minute pour l’apprendre, une vie entière pour le maîtriser », comme le soulignait le journaliste Bill Kunkel (aka The Game Doctor).

Un propos que l’on pourrait appliquer à de nombreux programmes, comme WordPress.

Des adolescents déguisés en tétrominos (pièces du jeu Tetris).
Pas facile, de tout bien goupiller…

À propos de WordPress, si je vous parle de Tetris, c’est parce que l’extension que je vais décortiquer aujourd’hui s’appelle Stackable, qui signifie littéralement « empilable ». Et pour cause, cette dernière ajoute de nouveaux blocs Gutenberg à emboîter dans votre site WordPress.

Prêt pour ce nouveau test ? À vos manettes, prêts, partez !

La version gratuite de Stackable testée est la 2.17.1, la version premium de Stackable testée est la 2.17.1.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Qu’est-ce que Stackable ?

« Propulser le webdesign nouvelle génération ». Telle est la mission affichée par Stackable sur son site officiel, où le plugin se définit comme une « nouvelle expérience de construction de pages pour Gutenberg ».
Rien que ça !

Il faut dire que sur le répertoire WordPress, le plugin de blocs affiche plus de 40 000 installations actives ainsi que la jolie note de 4,9 sur 5 étoiles, accompagnée d’une ribambelle d’avis dithyrambiques.

Si vous vous êtes déjà mis en quête de nouveaux blocs Gutenberg, vous êtes peut-être déjà tombé sur des extensions telles que Ultimate Addons for Gutenberg, Qubely, Getwid ou encore Coblocks.

On vous en parlait d’ailleurs dans notre article sur les extensions pour augmenter les pouvoirs de Gutenberg. Leur mission est simple : diversifier l’éventail de blocs Gutenberg disponibles au sein de l’éditeur de contenus.

Stackable est lui aussi un plugin taillé pour Gutenberg, auquel il apporte une myriade de blocs, allant des grands classiques (en-tête, galerie, appel à l’action) aux plus exotiques (citations, tableaux de prix, compteurs, témoignages, etc.).
Ces blocs sont prêts à l’emploi et personnalisables.

Alors, vous me direz, à quoi bon installer Stackable ? Ce ne sont que des blocs parmi d’autres blocs. Eh bien certes, Gutenberg met à disposition de nombreux blocs très utiles, mais avec Stackable, les possibilités sont décuplées.

En outre, vous avez accès à des fonctionnalités de personnalisation plus avancées que celles proposées nativement avec Gutenberg, telles que : l’ajustement de la disposition des éléments à l’intérieur des blocs, des espacements, modification de l’arrière-plan, ajout d’effets au survol, etc.

Il existe deux versions de Stackable :

  • une version gratuite est disponible sur le répertoire WordPress ;
L'extension Stackable sur le répertoire officiel WordPress.
  • une version payante est accessible depuis le site officiel de l’extension, à partir de 49 $ (environ 41 €) pour une utilisation sur un site.

Comme vous vous en doutez, la seconde donne accès à davantage de blocs et permet de les personnaliser plus finement.

Pour ce test, nous nous sommes donc concentrés sur la version Pro.

Les réglages de Stackable

Pour démarrer la configuration de Stackable, installez et activez l’extension. Ensuite, rendez-vous dans la section Réglages > Stackable pour configurer l’extension.

Sur son interface, uniquement en anglais hélas, vous aurez notamment accès aux réglages suivants :

  • Font Awesome icons Pro (premium) : permet d’intégrer un kit Font Awesome Pro à Stackable ;
  • Role manager (premium) : pour donner ou bloquer l’accès à l’éditeur de blocs à certains rôles utilisateurs et ainsi les laisser uniquement modifier le contenu. À noter : ce gestionnaire fonctionne sur tous les blocs, pas uniquement sur ceux compris avec Stackable ;
  • Global settings : deux fonctionnalités sont disponibles pour pallier les éventuelles incompatibilités avec le thème en place sur votre site. Vous pouvez saisir le sélecteur de la zone de contenu de votre thème, et forcer l’utilisation des typographies de Stackable afin qu’elles prennent le dessus sur celles de votre thème ;

Note : À l’instar d’Elementor, Stackable dispose de paramètres globaux (Global settings) : les couleurs et les typographies globales, qui s’appliquent aux pages créées avec Elementor. Mais avec Stackable, vous avez la possibilité de définir ces paramètres pour l’ensemble des blocs qui composent votre site. 

  • Optimization settings : permet de charger les fichiers JavaScript et CSS uniquement dans les publications contenant des blocs Stackable plutôt que sur le site entier. Le but de cette fonctionnalité est d’améliorer la performance de votre site. Toutefois, on regrette qu’elle ne soit pas appliquée systématiquement par défaut ;
  • Enable & Disables Block : si certains blocs vous sont inutiles, vous pouvez les désactiver afin qu’ils n’apparaissent plus dans la liste des blocs disponibles.

Toujours sur la page des réglages, vous serez invité à télécharger le thème Stackable en vous inscrivant à la newsletter. Pour télécharger le thème sans avoir à vous inscrire, direction le répertoire WordPress (ne me remerciez pas, c’est normal 😉) :

Comment utiliser Stackable ?

Des kits et des blocs

Stackable s’utilise directement depuis l’éditeur de WordPress. Pour ce faire, créez ou ouvrez une page ou un article, puis sélectionnez Design Library en haut de votre publication.

Il est possible d'accéder à la Design Library via un bouton au-dessus de la publication.

La Design Library contient des UI Kits et des Block Designs. Kézako ?

En fait, ces deux sections contiennent les mêmes éléments, mais classés différemment. Les UI kits rassemblent les blocs disponibles par la charte graphique et les Block Designs les regroupent par type de bloc : en-tête, témoignage, appel à l’action, etc., qu’on retrouve sensiblement dans toutes les chartes disponibles.

Les Blocks Designs et UI kits sont au final deux manières différentes de trouver le bloc qui vous convient.

Un aperçu de la Design Library du plugin Stackable.

Chaque bloc est accompagné d’un design prêt à l’emploi et personnalisable. Nous verrons comment les personnaliser dans la partie suivante.

Pour trouver le bloc qu’il vous faut, vous pouvez aussi utiliser la barre de recherche à votre disposition. Les quatre icônes en haut à droite de la fenêtre permettent d’actualiser les résultats de recherche et de modifier la taille des miniatures afin d’avoir un aperçu plus précis ou plus large des différents blocs.

Comment intégrer un bloc Stackable dans une publication

Vous pouvez aussi tout simplement cliquer sur l’icône « + » comme pour ajouter n’importe quel bloc, et vous reconnaîtrez facilement les blocs de l’extension Stackable, puisqu’ils sont parés d’un dégradé violet-orangé.

Insertion d'un bloc Stackable dans un publication WordPress.

En cliquant sur le bouton « Tout parcourir », vous accédez à l’ensemble des blocs Gutenberg à votre disposition. Les blocs Stackable sont présents dans les sections « Texte » et « Apparence », et sont tous regroupés dans la section éponyme « Stackable », qui donne aussi accès à la Design Library.

Tous ces chemins mènent à Rome aux blocs Stackable, certes, mais c’est principalement la voie de la Design Library qui donne accès aux designs préconçus.

Prenez par exemple ce bloc « Témoignage », qui comporte un minimum de mise en forme, du texte de remplissage et pas d’image d’exemple :

Un bloc Témoignage de l'extension Stackable.

Et voyez un autre bloc de témoignage, ajouté depuis la Design Library (le bloc Prime Testimonial 2) :

Un bloc Témoignage de l'extension WordPress Stackable ajouté depuis la Design Library.

Une fois que vous avez trouvé chaussure à votre pied, cliquez sur l’élément désiré pour l’intégrer directement à votre publication. Vous pouvez ensuite réorganiser l’élément dans la page, à la manière de quelconque bloc Gutenberg, et le personnaliser.

La personnalisation de Stackable

Pour personnaliser un bloc Stackable, rendez-vous dans la section « bloc » à droite de votre publication, où vous trouverez tout un tas d’options, classées en trois catégories : Layout, Style et Advanced

Trouver celle qui vous intéresse peut être fastidieux tant il a à boire et à manger, mais vous pouvez aussi la trouver en double-cliquant simplement sur l’élément du bloc que vous souhaitez modifier. Vous tomberez ainsi en un clic sur les réglages propres à ce dernier.

Les options de personnalisation d'un bloc Stackable sont rangées en trois onglets : Layout, Style et Advanced.

Les différentes options de personnalisation sont regroupées en trois onglets :

  • Layout : c’est ici que vous pouvez personnaliser l’agencement des différents éléments composant votre bloc, et aussi visualiser les autres designs proposés dans la Design Library pour ce type de bloc ;
  • Style : permet notamment d’agir sur les espacements, l’alignement du texte, les typographies, les couleurs, les boutons et les séparateurs. C’est plus inattendu, mais vous pouvez aussi ajouter un titre et une description à votre bloc ;
  • Advanced : ici, vous avez accès à des fonctionnalités poussées comme la balise HTML associée au bloc et la gestion du responsive (possibilité de cacher le bloc sur ordinateur, tablette ou mobile). Vous pourrez aussi régler les marges du bloc, et l’alignement du contenu.
    Cerise sur le gâteau pour les aficionados du CSS : la possibilité de modifier le CSS du bloc directement dans cette interface, à côté du bloc, et avec un aperçu des changements en temps réel.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Si le design d’un bloc ne vous satisfait pas complètement, vous avez donc la possibilité de modifier de nombreux paramètres pour l’ajuster à votre guise.

J’ai par exemple apprécié de pouvoir ajouter facilement des effets au survol des éléments, ou de modifier les marges de chaque élément du bloc. Mieux encore : on peut choisir des marges différentes sur mobile et tablette ! De quoi agir facilement sur l’aspect responsive de son site. Pour ce faire, cliquez d’abord sur l’icône desktop (ordinateur) afin de faire apparaître les icônes des autres appareils.

L'ajustement des marges avec l'extension WordPress Stackable.

Autre option sympathique : celle d’ajouter des séparateurs en haut ou en bas d’un élément, comme avec Elementor. On peut bien entendu régler affiner le look desdits séparateurs, et même leur superposer une ou deux couches plus claires dans la version Pro.

Voilà ce que ça donne au bas de cet appétissant burger :

L'ajout d'un séparateur au bas d'un bloc Stackable.

Certains réglages sont suivis d’un point d’interrogation. Si vous ignorez à quoi ils correspondent, survolez-les pour voir une animation qui vous aidera à saisir son fonctionnement. Plutôt utile pour s’y retrouver entre toutes ces options.

Une animation simule l'ajout d'espace entre des blocs Stackable.

Quelle adaptation aux thèmes et aux plugins ?

Adaptation aux thèmes

Selon la documentation officielle, « Stackable devrait fonctionner avec tous les thèmes », pour peu que le thème actif sur votre site soit optimisé pour Gutenberg. 

À propos de thèmes, je vous en parlais au début de cet article : il existe un thème-maison, conçu pour fonctionner avec l’éditeur Gutenberg et l’extension Stackable. Il est gratuit et disponible sur le répertoire officiel WordPress. Avec lui, la compatibilité est garantie, en somme.

Il est aux couleurs de l’extension du même nom, j’espère donc que vous n’avez rien contre le rose bonbon.

Un aperçu du thème WordPress Stackable.

Adaptation aux extensions

La documentation de Stackable assure que ce dernier est compatible avec le constructeur de pages Elementor (lien aff). Mais attention, vous ne pourrez pas utiliser les blocs Stackable dans l’éditeur du constructeur de pages.

C’est en fait le même fonctionnement que pour les blocs Gutenberg, impossible de les utiliser dans l’éditeur d’Elementor, il faut faire un choix : construire sa page avec Elementor ou avec l’éditeur de WordPress.

Le site officiel de Stackable prétend également que ses blocs sont compatibles avec n’importe quelle extension, et que vous pouvez par conséquent les utiliser avec d’autres bibliothèques de blocs sans problème.

Formez-vous à Elementor

Apprenez à créer votre site WordPress grâce au constructeur de page le plus populaire du marché.

Elementor icon CTA

Documentation et assistance

En cas de difficulté lors de l’utilisation de Stackable, vous pouvez à tout moment vous référer à la documentation officielle.

Vous y trouverez :

  • une rubrique dédiée à la prise en main de l’extension ;
  • une section de dépannage ;
  • une autre dédiée aux tarifs et aux licences ;
  • des guides ciblés ;
  • une FAQ ;
  • ainsi que d’autres ressources.

Vous pouvez également retrouver cette documentation dans Réglages > Stackable, onglet Documentation.

L'onglet Documentation dans les réglages de l'extension Stackable.

En cas de pépin technique, l’équipe en charge de l’extension met à disposition des utilisateurs une liste de problèmes fréquemment rencontrés, ainsi que les solutions pour y remédier.

Si vous séchez encore, vous pouvez faire appel au support de Stackable, ou encore rejoindre leur groupe Facebook afin d’obtenir les réponses à vos questions.

Hélas, toute la documentation est en anglais. Cependant, vous pouvez toujours demander de l’aide à la communauté française de WordPress.

Concernant le support, l’équipe de Stackable peut vous prêter main forte si vous lui envoyer votre requête via le formulaire de contact dans l’onglet Contact Us dans Réglages > Stackable, ou encore à l’adresse e-mail support@wpstackable.com.

Quel rapport qualité-prix ?

La version gratuite de Stackable comprend 89 designs de blocs, contre 264 en version premium. Les options de personnalisation sont aussi plus nombreuses en version Pro.

Pour le bloc Feature par exemple, on trouve 2 options d’agencement en version gratuite (Basic et Plain), contre 13 en version Pro.

La version Pro de Stackable offre davantage d'options d'agencement.

Dans la version pro, on retrouve aussi des paramètres plus ou moins intéressants, selon votre usage de Stackable, comme l’intégration à Font Awesome Pro et le Role Manager, ainsi que la possibilité de modifier en CSS n’importe quel bloc. Pour utiliser cette dernière fonctionnalité, rendez-vous dans la section Advanced, puis Custom CSS. Pratique : vos modifications s’affichent en temps réel.

Ajouter du CSS personnalisé dans un bloc de l'extension WordPress Stackable.

La version Pro donne également accès à un an de support et de mises à jour.

Entre version gratuite et premium, votre cœur balance ? Avant de passer à la caisse, vous avez la possibilité de visualiser une démo de la version premium afin de faire le choix le plus éclairé possible.

Utiliser Stackable ou un constructeur de page : telle est la question

Ça y est, nous avons balayé ensemble les fonctionnalités et les paramètres de Stackable. Vous avez maintenant une idée plus précise de ce que l’extension de blocs a dans le ventre.

Si vous êtes un adepte des constructeurs de page, ou que vous vous y êtes déjà intéressé de près, vous vous demandez peut-être : mais pourquoi utiliser Stackable plutôt qu’un constructeur de page ?

En effet, les options proposées par Stackable et la version gratuite d’Elementor par exemple sont comparables. Et pour cause, Stackable s’approche d’une expérience de conception avec un constructeur de page, tel que revendiqué sur son site officiel : « Have the confidence to easily build the fastest websites using a new page building experience for Gutenberg ».

Et avec l’arrivée du Full Site Editing, qui permettra d’agir sur tous les éléments de l’interface du site (et non plus uniquement le contenu des publications), Stackable risque de s’en approcher encore plus. Cela dit, Stackable a pour avantage de s’utiliser directement dans l’éditeur de contenus de WordPress, ce qui simplifie l’expérience de conception comparé aux page builders actuels.

En revanche, la version pro d’Elementor offre des widgets et des fonctionnalités beaucoup plus avancées. Étant donné que les tarifs des deux extensions sont identiques pour une utilisation sur un seul site (49 $, soit environ 41 €), on vous conseille plutôt de vous tourner vers le mastodonte des constructeurs de page.

Notre avis final sur Stackable

En somme, on peut dire que Stackable est un plugin plutôt intuitif qui propose des designs modernes et esthétiques.

Stackable s’adresse à tout créateur de site qui veut disposer de blocs plus avancés pour personnaliser le design de son site, sans avoir besoin de toucher à la moindre ligne de code (mais en ayant la possibilité, s’il maîtrise le CSS, de mettre les blocs à sa sauce).

Cependant, faut-il l’utiliser ou partir directement sur un constructeur de page plus évolué comme Elementor ?

En effet, avec Stackable on s’approche d’une expérience de conception d’un constructeur de page directement dans l’éditeur de WordPress. On pourrait dire qu’il s’agit des prémices de l’objectif final du projet Gutenberg, à savoir devenir un véritable « constructeur de site ».

Toutefois, nous n’en sommes pas encore là aujourd’hui. Pour le moment, Stackable vous aidera à créer des publications du même acabit que la version gratuite d’Elementor, sans aucune gestion des modèles (Stackable permet de charger des designs préconçus, mais pas d’enregistrer les siens).

Si vous appréciez travailler avec l’éditeur de WordPress et que les blocs fournis par Stackable sont suffisants pour votre projet, foncez ! Utiliser Elementor ne sera pas nécessaire.

Par contre, si vous avez besoin de fonctionnalités plus avancées ou de concevoir un site de A à Z (j’entends par là personnaliser tous les modèles de page), Elementor (lien aff) ou un de ses concurrents sera indispensable.

Et si vous faites partie des utilisateurs déjà séduits par Elementor, Stackable risque de ne pas vous emballer. Après tout, vous avez vos habitudes, il n’y a pas vraiment de raison de tout bouleverser.

Si la version Pro de Stackable vous fait de l’œil, n’hésitez pas à visualiser la démo disponible et à parcourir la version gratuite, pour être sûr que les blocs et les options proposés sont à votre goût.

Télécharger l’extension Stackable :

Et vous, l’avez-vous déjà utilisée ? Cet article vous en a-t-il donné envie ? Partagez-nous vos impressions dans les commentaires.