Stackable : le plugin qui débloque vos blocs

Vous souvenez-vous des années 80 ? L'arrivée de la nouvelle vague, l'avènement des coupes de mulet, le succès de Cyndi Lauper, Michael Jackson, Madonna, Prince, Whitney Houston, Duran Duran etc. 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 de pouce : Tetris.

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

Le concept peut se résumer en une ligne : « Tetris correspond parfaitement à la définition du meilleur jeu : une minute pour l'apprendre, toute une vie pour le maîtriser » , comme l'a dit le journaliste Bill Kunkel (alias The Game Doctor).

Une affirmation qui pourrait s'appliquer à de nombreux programmes, comme WordPress.

En parlant de WordPress, si j'évoque Tetris, c'est parce que le plugin que je vais décortiquer aujourd'hui s'appelle Stackable. Et pour cause, ce plugin ajoute de nouveaux blocs Gutenberg à imbriquer dans votre site WordPress .

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

Initialement écrit en juillet 2021, cet article a été mis à jour en novembre 2021 avec les versions gratuite et premium 3.0.5 de Stackable.

Vos meilleurs projets WordPress ont besoin du meilleur hébergeur !

WPMarmite recommande Bluehost : excellentes performances, excellent support. Tout ce dont vous avez besoin pour un bon départ.

Essayez Bluehost

Qu'est-ce que l'empilable ?

« Propulser la prochaine génération de conception Web ». C'est la mission de Stackable sur son site officiel, où le plugin se définit comme une "nouvelle expérience de création de page pour Gutenberg". Pas moins!

Il faut dire que sur le répertoire WordPress, le plugin block compte plus de 40 000 installations actives et une belle note de 4,9 étoiles sur 5, accompagnée d'une kyrielle de critiques élogieuses.

Si vous êtes déjà à la recherche de nouveaux blocs Gutenberg , vous êtes peut-être déjà tombé sur des plugins tels que Ultimate Addons for Gutenberg, Qubely, Getwid ou Coblocks.

Nous en avons parlé dans notre article sur les addons pour augmenter les pouvoirs de Gutenberg. Leur mission est simple : diversifier la gamme de blocs Gutenberg disponibles dans l'éditeur de contenu.

Stackable est aussi un plugin conçu pour Gutenberg, auquel il apporte une myriade de blocs, des grands classiques (header, galerie, call to action) aux plus exotiques (devis, tableaux de prix, timer, témoignages, etc.).
Ces blocs sont prêts à l'emploi et personnalisables.

Alors, vous pourriez penser, quel est l'intérêt d'installer Stackable ? Ce ne sont que des blocs parmi d'autres blocs. Eh bien, Gutenberg fournit de nombreux blocs utiles, mais avec Stackable, les possibilités sont multipliées.

De plus, vous avez accès à des fonctionnalités de personnalisation plus avancées que celles proposées nativement avec Gutenberg, telles que : ajuster la disposition des éléments à l'intérieur des blocs, l'espacement, changer le fond, ajouter des effets de survol, etc.

Il existe deux versions de Stackable :

• Une version gratuite est disponible sur le répertoire WordPress.

• Une version payante est disponible sur le site officiel du plugin, à partir de 49 $ pour une utilisation sur un seul site.

Comme vous pouvez l'imaginer, le second donne accès à plus de blocs et permet de les personnaliser plus finement.

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

Paramètres empilables

Pour commencer à configurer Stackable, installez et activez le plugin. Allez ensuite dans Paramètres > Empilable.

Sur son interface, vous aurez accès aux paramètres suivants :

• Icônes Font Awesome Pro (premium) : pour intégrer un kit Font Awesome Pro à Stackable.
• Paramètres de l'éditeur : vous permet de contrôler certaines fonctionnalités de l'éditeur de Stackable. Par exemple, vous pouvez désactiver la bibliothèque de conception, définir la largeur de certains blocs, fermer les volets de l'éditeur que vous n'utilisez pas et lier des colonnes afin qu'elles subissent les mêmes modifications.
• Gestionnaire de rôles (premium) : pour donner ou bloquer l'accès à l'éditeur de blocs à certains rôles d'utilisateurs et les laisser uniquement modifier le contenu. Remarque : cette gestion fonctionne sur tous les blocs , pas seulement ceux inclus avec Stackable.
• Champs personnalisés (premium) : cette fonctionnalité vous permet de créer des champs personnalisés que vous pouvez ajouter dynamiquement à votre contenu depuis l'éditeur. Pour cela, rendez-vous dans la section Champs de votre administration WordPress, cliquez sur « Ajouter nouveau », définissez un type de champ (Texte, Nombre, Date, Heure ou URL) et un nom.

Cliquez ensuite sur « Enregistrer le champ », entrez une valeur pour votre champ et cliquez sur « Enregistrer les modifications » pour l'enregistrer.

Pour l'intégrer à votre contenu, placez le curseur à l'endroit où vous souhaitez que la valeur de votre champ apparaisse et cliquez sur l'icône de la base de données (elle correspond aux Champs Dynamiques).

Sélectionnez "Site" comme "Source dynamique", puis votre champ nouvellement créé (il apparaît sous "Champs personnalisés empilables"), et enfin cliquez sur "Appliquer". C'est ça!

C'est bien beau, mais pourquoi avons-nous fait tout cela ? Grâce à la magie du contenu dynamique, dès que je le mettrai à jour, mon adresse e-mail sera automatiquement mise à jour à chaque endroit de mon site où le champ personnalisé est intégré.

• Points d' arrêt responsive : il est possible de modifier la largeur d'écran à partir de laquelle votre site sera visualisé en mode Tablette ou Mobile, et ainsi afficher les paramètres que vous avez définis pour ces appareils.
• Paramètres globaux : deux fonctionnalités sont disponibles pour pallier les éventuelles incompatibilités avec le thème en place sur votre site. Vous pouvez entrer dans le sélecteur de la zone de contenu de votre thème, et forcer l'utilisation des polices de Stackable pour qu'elles prennent le pas sur celles de votre thème.

Comme Elementor, Stackable a des paramètres globaux : les couleurs et la typographie qui s'appliquent aux pages créées avec Elementor. Mais avec Stackable, vous avez la possibilité de définir ces paramètres pour tous les blocs qui composent votre site .

• Activer et désactiver le bloc : si vous n'avez pas besoin de certains blocs, vous pouvez les désactiver afin qu'ils n'apparaissent pas dans la liste des blocs disponibles.
• Paramètres d'optimisation (premium) : permet de charger les fichiers JavaScript et CSS uniquement dans les articles contenant des blocs empilables plutôt que sur l'ensemble du site. Le but de cette fonctionnalité est d'améliorer les performances de votre site. Cette fonctionnalité ne s'applique qu'aux blocs de la version 2 car elle s'applique déjà aux blocs les plus récents du plugin (à partir de la version 3).

Comment utiliser Empilable ?

Kits et blocs

Stackable s'utilise directement depuis l'éditeur WordPress. Pour ce faire, créez ou ouvrez une page ou un article, puis sélectionnez Bibliothèque de conception en haut de votre article.

La bibliothèque de conception contient des kits et des catégories d'interface utilisateur. Qu'est-ce que c'est?

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 Categories les regroupent par type de bloc : header, témoignage, call to action, etc., que l'on retrouve dans toutes les chartes graphiques disponibles.

Les catégories et les kits d'interface utilisateur sont deux façons différentes de trouver le bon bloc pour vous.

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

Pour trouver le bloc dont vous avez besoin, vous pouvez également utiliser la barre de recherche mise à votre disposition. Les quatre icônes en haut à droite de la fenêtre permettent de rafraîchir les résultats de la recherche et de modifier la taille des vignettes pour obtenir une vue plus précise ou plus grande des différents blocs.

Comment intégrer un bloc empilable dans un article

Vous pouvez également simplement cliquer sur l'icône "+" comme vous le feriez pour ajouter n'importe quel bloc, et vous reconnaîtrez facilement les blocs du plugin Stackable, car ils sont ornés d'un dégradé violet-orange.

En cliquant sur le bouton "Parcourir tout", vous pouvez accéder à tous les blocs Gutenberg à votre disposition. Les blocs Stackable sont présents dans les sections « Text » et « Appearance », et sont tous regroupés dans la section éponyme « Stackable », qui donne également accès à la Design Library.

Tous ces chemins mènent à Rome vers les blocs empilables, oui, mais c'est principalement le chemin de la bibliothèque de conception qui donne accès aux conceptions pré-construites.

Prenez ce bloc Témoignage, par exemple, qui a un formatage minimal, un texte de remplissage et aucune image d'exemple :

Et voyez un autre bloc Testimonial, ajouté à partir de la bibliothèque de conception (le bloc Prime Testimonial 2 ):

Une fois que vous avez trouvé l'ajustement parfait, cliquez sur l'élément souhaité pour l'intégrer directement dans votre publication. Vous pouvez ensuite réorganiser l'élément sur la page, comme n'importe quel bloc Gutenberg, et le personnaliser.

Personnalisation empilable

Pour personnaliser un bloc Empilable, rendez-vous dans la section "bloc" sur le côté droit de votre message, où vous trouverez un tas d'options, classées en trois catégories : Bloc , Style et Avancé .

Trouver celui qui vous intéresse peut être fastidieux car il y a tellement de choix, mais vous pouvez également le trouver en double-cliquant simplement sur l'élément de bloc que vous souhaitez modifier. Vous serez ensuite redirigé vers les paramètres de ce bloc en un clic.

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

• Bloc : c'est ici que vous pouvez personnaliser la disposition des différents éléments qui composent votre bloc, ajouter des bordures et des ombres et agir sur le fond, l'espacement et l'alignement du texte.

Vous pouvez également ajuster l'espacement entre les éléments de vos blocs en les survolant, puis en utilisant les poignées en bas de l'élément. Vous pouvez même voir le nombre de pixels qui le séparent de son voisin. Très utile!

• Style : permet de gérer les colonnes et d'agir sur la typographie, les couleurs, les boutons et les séparateurs. C'est plus inattendu, mais vous pouvez aussi ajouter un titre et une description à votre bloc.
• Avancé : ici vous avez accès à des fonctionnalités avancées comme la balise HTML associée au bloc et la gestion du responsive (possibilité de masquer le bloc sur ordinateur, tablette ou mobile). Vous pouvez ajuster les marges du bloc et l'alignement du contenu, mais aussi vous amuser à ajouter des effets d'animation ou de transition à vos éléments (allez-y doucement, cependant).
  La cerise sur le gâteau pour les aficionados du CSS est 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.
  Enfin, l'affichage conditionnel permet de n'afficher un élément que lorsqu'une condition que vous avez préalablement définie est remplie.

Rejoignez les abonnés WPMarmite

Obtenez les derniers messages WPMarmite (ainsi que des ressources exclusives).

ABONNEZ-VOUS MAINTENANT

Si vous n'êtes pas entièrement satisfait du design d'un bloc, vous avez la possibilité de modifier de nombreux paramètres pour l'ajuster à votre guise.

Par exemple, j'ai aimé pouvoir facilement ajouter des effets au survol des éléments ou de l'élément parent (appliquer un fond au bloc parent pour profiter de cette dernière fonctionnalité), ou encore modifier facilement les marges de chaque élément du bloc .

Encore mieux : vous pouvez choisir différentes marges sur mobile et tablette ! Vous pouvez donc facilement modifier l'aspect responsive de votre site. Pour cela, cliquez d'abord sur l'icône du bureau (ordinateur) pour afficher les icônes des autres appareils.

Une autre option intéressante consiste à ajouter des séparateurs en haut ou en bas d'un élément, comme avec Elementor. Vous pouvez bien sûr ajuster l'apparence de ces séparateurs, et même ajouter une ou deux couches plus claires dans la version Premium.

Voici à quoi cela ressemble au fond de cet appétissant burger :

Lorsque vous survolez leur nom, certains paramètres deviennent violets et votre curseur se transforme en point d'interrogation. Si vous ne savez pas ce qu'ils sont, cliquez pour voir une animation qui vous aidera à comprendre à quoi ils servent. Très utile pour se repérer dans toutes ces options.

Quelle adaptation aux thèmes et plugins ?

Adaptation aux thèmes

Selon la documentation officielle, "Stackable devrait fonctionner avec n'importe quel thème", tant que le thème que vous avez sur votre site est optimisé pour Gutenberg.

En parlant de thèmes, je l'ai mentionné au début de ce post : il existe un thème maison , conçu pour fonctionner avec l'éditeur Gutenberg et le plugin Stackable. Il est gratuit et disponible sur le répertoire officiel de WordPress. Avec lui, la compatibilité est garantie, en somme.

Il est aux couleurs du plugin du même nom, alors j'espère que le rose bonbon ne vous dérange pas.

Téléchargez le thème Stackable :

Adaptation aux plugins

La documentation Stackable garantit sa compatibilité avec le constructeur de pages elementor (lien aff). Mais attention, vous ne pourrez pas utiliser les blocs Stackable dans l'éditeur de page builder.

C'est en fait la même manière que pour les blocs Gutenberg, vous ne pouvez pas les utiliser dans l'éditeur Elementor, vous devez faire un choix : construire votre page avec Elementor ou avec l'éditeur WordPress.

Le site officiel Stackable affirme également que ses blocs sont compatibles avec n'importe quel plugin , vous pouvez donc les utiliser avec d'autres bibliothèques de blocs sans aucun problème.

Créez votre site Web avec Elementor

Concevez facilement l'apparence de votre site Web WordPress avec le célèbre constructeur de pages. Essayez Elementor

Essayez Elementor

Documentation et assistance

Si vous rencontrez des difficultés lors de l'utilisation de Stackable, vous pouvez vous référer à la documentation officielle à tout moment.

Vous y trouverez :

• Une section dédiée à la prise en main du plugin.
• Une section de dépannage.
• Détails des prix et des licences.
• Guides ciblés.
• Une FAQ.
• Et d'autres ressources.

Vous pouvez également trouver cette documentation dans Paramètres > Empilable, onglet Documentation .

En cas de pépins techniques, l'équipe en charge du plugin fournit aux utilisateurs une liste des problèmes fréquemment rencontrés, ainsi que des solutions pour les résoudre.

Si vous êtes toujours bloqué, vous pouvez appeler le support de Stackable ou rejoindre leur groupe Facebook pour obtenir des réponses à vos questions.

Concernant le support, l'équipe Stackable peut vous aider si vous leur envoyez votre demande via le formulaire de contact dans l'onglet Contactez-nous dans Paramètres > Stackable, ou à l'adresse e-mail [email protected] .

Quel est le rapport qualité prix ?

La version premium est naturellement plus généreuse dans la variété des blocs proposés. Les options de personnalisation sont également plus nombreuses.

Pour le bloc Feature , par exemple, il existe 2 options de mise en page dans la version gratuite (Basic et Plain ), contre 13 dans la version Premium.

Dans la version Premium, on trouve également des paramètres plus ou moins intéressants, selon votre utilisation de Stackable, comme l'intégration avec Font Awesome Pro et le Role Manager ainsi que la possibilité de modifier n'importe quel bloc en CSS.

Pour utiliser cette dernière fonctionnalité, rendez-vous dans la section Avancé , puis Custom CSS . Pratique : vos modifications sont affichées en temps réel.

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

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

Voilà, nous avons passé en revue les fonctionnalités et les paramètres de Stackable ensemble. Vous avez maintenant une idée plus claire de ce que le plugin de bloc a en réserve.

Si vous êtes un fan des constructeurs de pages, ou si vous les avez déjà examinés de près, vous vous demandez peut-être : pourquoi utiliser Stackable au lieu d'un constructeur de pages ?

Car les options proposées par Stackable et la version gratuite d'Elementor par exemple sont comparables. Et pour cause, Stackable aborde une expérience de conception avec un constructeur de pages , comme le prétend sur son site officiel : "Ayez la confiance nécessaire pour créer facilement les sites Web les plus rapides en utilisant une nouvelle expérience de création de pages pour 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 pas seulement sur le contenu des posts), Stackable pourrait s'en rapprocher encore. Cela dit, Stackable a l'avantage d'être utilisé directement dans l'éditeur de contenu WordPress , ce qui simplifie l'expérience de conception par rapport aux constructeurs de pages actuels.

D'autre part, la version pro d'Elementor propose des widgets et des fonctionnalités beaucoup plus avancés. Étant donné que les deux plugins coûtent le même prix pour une utilisation sur un seul site (49 $), nous vous suggérons de vous tourner plutôt vers le mastodonte des constructeurs de pages.

Notre avis final sur Stackable

Dans l'ensemble, 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 souhaite disposer de blocs plus poussés pour personnaliser le design de son site , sans avoir besoin de toucher à une quelconque ligne de code (mais ayant la possibilité, s'il maîtrise le CSS, de mettre les blocs à sa guise).

Cependant, faut-il l'utiliser ou passer directement à un constructeur de page plus avancé comme Elementor ?

En effet, avec Stackable on s'approche d'une expérience de conception d'un constructeur de page directement dans l'éditeur WordPress. On pourrait dire que c'est le début de l'objectif final du projet Gutenberg, qui est de devenir un véritable "site builder".

Cependant, nous n'en sommes pas encore là. Pour l'instant, Stackable vous aidera à créer des publications de la même manière que la version gratuite d'Elementor, sans aucune gestion de modèles (Stackable vous permet de charger des conceptions prédéfinies, mais pas de sauvegarder les vôtres).

Si vous aimez travailler avec l'éditeur WordPress et que les blocs fournis par Stackable suffisent à votre projet, foncez ! L'utilisation d'Elementor ne sera pas nécessaire.

Cependant, si vous avez besoin de fonctionnalités plus avancées ou avez besoin de concevoir un site à partir de zéro (j'entends par là personnaliser tous les modèles de pages), Elementor (lien aff) ou l'un de ses concurrents sera indispensable.

Et si vous faites partie des utilisateurs déjà séduits par Elementor, Stackable risque de ne pas être un grand succès. Après tout, vous avez vos propres habitudes, il n'y a donc aucune raison réelle de les changer.

Si vous êtes intéressé par la version Pro de Stackable, n'hésitez pas à consulter la démo disponible et à parcourir la version gratuite, pour vous assurer que les blocs et les options sont à votre goût.

Téléchargez le plug-in empilable :

Et vous, l'avez-vous déjà utilisé ? Cet article vous a-t-il donné envie de l'utiliser ? Partagez votre opinion dans les commentaires.