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.
À 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 !
Sommaire
- Qu’est-ce que Stackable ?
- Les réglages de Stackable
- Comment utiliser Stackable ?
- La personnalisation de Stackable
- Quelle adaptation aux thèmes et aux plugins ?
- Documentation et assistance
- Quel rapport qualité-prix ?
- Utiliser Stackable ou un constructeur de page : telle est la question
- Notre avis final sur Stackable
Initialement rédigé en juillet 2021, cet article a été mis à jour en novembre 2021 avec les versions gratuite et premium 3.0.5 de Stackable.
Hébergez votre site chez o2switch
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 100K+ 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 ;
- 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.
- Editor Settings : permet de contrôler certaines fonctionnalités de l’éditeur de Stackable. Vous pouvez par exemple désactiver la Design Library, 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.
- 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.
- Custom Fields (premium) : cette fonctionnalité permet de créer des champs personnalisés que vous pouvez ajouter dynamiquement à vos contenus à partir de l’éditeur. Pour ce faire, rendez-vous dans la rubrique Fields de votre administration WordPress, cliquez sur « Add New », définissez un type de champ (Texte, Nombre, Date, Heure ou URL) et un nom.
Ensuite, cliquez sur « Save Field », entrez une valeur pour votre champ puis cliquez sur « Save changes » pour sauvegarder le tout.
Pour l’intégrer à votre contenu, placez le curseur à l’endroit où vous souhaitez faire apparaître la valeur de votre champ et cliquez sur l’icône en forme de base de données (elle correspond aux champs dynamiques, Dynamic Fields en anglais).
Sélectionnez « Site » comme « Dynamic Source » puis votre champ fraîchement créé (il apparaît sous « Stackable Custom Fields », et enfin sur « Apply ». Le tour est joué !
C’est bien beau, mais pourquoi a-t-on fait tout ça me direz-vous ? Grâce à la magie du contenu dynamique, dès que je l’actualiserai, mon adresse e-mail sera automatiquement mise à jour à chaque endroit de mon site où le champ personnalisé est intégré.
- Responsive breakpoints : il est possible de modifier la largeur d’écran à partir de laquelle votre site va être visualisé en mode Tablette ou Mobile, et ainsi afficher les réglages que vous avez définir pour ces dispositifs.
- 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.
- 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.
- Optimization settings (premium) : 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. Cette fonctionnalité concerne uniquement les blocs de la version 2 car elle s’applique déjà aux blocs les plus récent du plugin (à partir de la version 3).
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.
La Design Library contient des UI Kits et des Categories. 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 Categories 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 Categories et UI kits sont au final deux manières différentes de trouver le bloc qui vous convient.
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é.
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 :
Et voyez un autre bloc de témoignage, ajouté depuis la Design Library (le bloc Prime Testimonial 2) :
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 : Block, 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 différentes options de personnalisation sont regroupées en trois onglets :
- Block : c’est ici que vous pouvez personnaliser l’agencement des différents éléments composant votre bloc, ajouter des bordures et ombrages et agir sur l’arrière-plan, les espacements et l’alignement du texte ;
Vous pouvez aussi ajuster les espacements entre les éléments composant vos blocs en les survolant puis en jouant sur les poignées situées au bas de l’élément. Vous pouvez même visualiser le nombre de pixels qui le sépare de son voisin. Pratique !
- Style : permet de gérer les colonnes et d’agir sur 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 régler 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 mollo, tout de même).
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.
Enfin, l’affichage conditionnel vous permet d’afficher un élément uniquement lorsqu’une condition que vous aurez préalablement définie sera remplie.
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 l’élément parent (appliquez un arrière-plan au bloc parent pour profiter de cette dernière fonctionnalité), ou encore de modifier facilement 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.
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 :
Au survol de leur nom, certains réglages se changent en violet et votre curseur en point d’interrogation. Si vous ignorez à quoi ils correspondent, cliquez pour découvrir une animation qui vous aidera à saisir son utilité. Plutôt utile pour s’y retrouver entre toutes ces options.
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.
Télécharger le thème 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é.
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.
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 premium est naturellement plus généreuse dans la diversité des blocs proposés. Les options de personnalisation y sont aussi plus nombreuses.
Pour le bloc Feature par exemple, on trouve 2 options d’agencement en version gratuite (Basic et Plain), contre 13 en version Pro.
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.
La version Pro donne également accès à un an de support et de mises à jour.
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.