La formidable équipe à l’origine du célèbre thème WordPress GeneratePress a lancé un nouveau plugin : GenerateBlocks. Il s’agit d’une petite collection de blocs WordPress légers qui vous permet de concevoir des sites Web sans aucun code. GenerateBlocks incarne vraiment la vision que les blocs gutenberg sont l’avenir de WordPress.
Aujourd’hui, je vais me plonger dans GenerateBlocks et vous montrer pourquoi vous devriez abandonner vos constructeurs de pages et passer à cette solution rapide et légère. Ceux qui adoptent les blocs le plus tôt possible bénéficieront d’un avantage concurrentiel considérable. Les clients et les utilisateurs penseront que vous êtes un concepteur web chevronné, et en termes de performances, les Google Core Web Vitals vous apprécieront encore plus !
GenerateBlocks est un plugin WordPress gratuit créé par Tom Usborne et la talentueuse équipe derrière GeneratePress. Il a été publié dans le répertoire WordPress en février 2020 et compte maintenant plus de 40 000 installations actives avec une note de cinq étoiles sur cinq. Il existe une version pro disponible avec encore plus de fonctionnalités. Elle a été lancée en janvier 2021.
Qu’est-ce que GenerateBlocks exactement ?
GenerateBlocks est essentiellement une collection de blocs WordPress que vous pouvez utiliser avec votre thème. Le thème WordPress, GeneratePress, est un peu la base et les GenerateBlocks sont les blocs de construction qui vous permettent de mettre en forme tout ce que vous pouvez imaginer.
Sachez que vous n’êtes pas obligé d’utiliser le thème GeneratePress pour profiter de GenerateBlocks. Il fonctionne avec n’importe quel thème. Cependant, je vous le recommande vivement. Simplement parce que c’est la même équipe qui a conçu les deux. Une autre raison d’utiliser les deux est que si vous avez besoin de support, vous pouvez l’obtenir de la même équipe qui connaît parfaitement les produits.
Utiliser GenerateBlocks, bien sûr, suppose que vous utilisez l’éditeur de blocs de WordPress. Si vous ne l’utilisez pas, je vous encourage à le faire !
Quelques caractéristiques de GenerateBlocks
Le gros avantage de GenerateBlocks est sa facilité d’utilisation.
Voici quelques unes des fonctionnalités que j’aime dans GenerateBlocks :
- Rapide et léger, pas de code nécessaire.
- Pas de nouvelle interface compliquée à apprendre. Tout comme GeneratePress, GenerateBlocks tire parti des styles et contrôles natifs de WordPress pour tout accomplir. Cela le rend très facile à apprendre.
- 100% accessible, ce qui est un aspect important qui est souvent négligé.
- Très réactif dès le départ avec l’utilisation des grilles Flexbox modernes. Vous pouvez même modifier les vues mobiles séparément du bureau si nécessaire.
- Un soutien incroyable de la part d’un développeur impliqué et d’une équipe remarquable. Vous verrez Tom répondre régulièrement aux questions du forum.
La version gratuite de GenerateBlocks comporte quatre blocs principaux :
- Container (les blocs commes les rangées ou les sections)
- Grid (ou les grilles)
- Title (ou les titres)
- Buttons (ou les boutons)
GenerateBlocks: installation et tutoriel
L’installation du plugin GenerateBlocks est facile et simple puisqu’il s’agit d’un plugin et qu’il est disponible dans le répertoire de WordPress. Vous pouvez aussi le télécharger depuis votre tableau de bord admin WordPress.
Allez dans la section Extensions > Ajouter
Cherchez GenerateBlocks dans la barre de recherche puis cliquez sur Installer maintenant et Activer
Une fois installé et activé, deux sous-sections s’offrent à vous sur votre tableau de bord GenerateBlocks.
Le “dashboard” vous montre les quatre blocs principaux proposés par le plugin. Nous allons explorer ensemble chacun d’entre eux et voir comment les utiliser efficacement. Pour chaque bloc il existe une documentation, c’est-à-dire des instructions, qui expliquent en quoi consiste chaque fonctionnalité avec des illustrations.
Vous verrez que vous pouvez presque tout construire avec ces 4 blocs !
Le bloc Container
Le bloc Container est l’épine dorsale de Generateblocks où vous pouvez organiser votre contenu en ligne et en colonne.
Il vous permet de créer des conteneurs avancés (ou simples) pour votre contenu. Il peut être utilisé seul, mais il est également utilisé à l’intérieur du bloc grille pour chaque élément de grille que vous ajoutez. Nous y reviendrons plus tard.
Lorsque vous créer une page, cliquez sur le bouton ajouter un élément et vous verrez apparaître les différents blocs. Pour insérer du contenu sous forme de colonnes, il suffit de le choisir dans la liste des options proposées.
En cliquant sur l’icône + vous pouvez ensuite modifier ou ajouter un nombre infini d’éléments.
Il est préférable de construire votre site à l’aide d’un bloc “container” et d’un bloc grille, car cela contribue à rendre votre design plus esthétique. Vous pouvez utiliser les composants intégrés tels que la typographie, l’espacement, les couleurs, les dégradés et l’arrière-plan pour contrôler entièrement le bloc conteneur.
Pour du contenu en ligne, il vous suffit d’ajouter les éléments les uns après les autres.
Container
L’enveloppe extérieure de l’élément Container.
Un conteneur “Full width” n’a pas de largeur définie, tandis que le conteneur “Contained width” utilise l’option Container Width.
Inner Container (l’intérieur du conteneur)
L’élément à l’intérieur de l’enveloppe extérieure qui contient le contenu du bloc.
Container Width (largeur du conteneur)
Cela permet de définir la largeur de votre élément. Si vous utilisez GeneratePress, l’option Largeur du conteneur correspondra par défaut à votre option de largeur du conteneur dans le Customizer.
Tag Name
Cela vous permet d’indiquer le type de contenu (div, section, en-tête, bas de page, côté)
Dans les réglages vous trouverez également les composants suivants et ça de manière systématique pour ce plugin :
Typographie
La typographie vous permet de gérer tant le visuel (lettres en gras, normal, ou épaisseur au choix) que le type de police et la taille des lettres.
Espacement
L’espacement de votre container est gérable également. Vous pourrez augmenter ou réduire la hauteur minimum, la taille des bordures et les marges ainsi que la surface de votre élément. C’est assez intuitif car les changements sont visibles directement lorsque vous insérez vos données.
Couleurs
Des couleurs de l’arrière-plan, du texte au couleurs des liens et bordures, c’est un plaisir de personnaliser le container. C’est idéal pour répondre à une charte graphique particulière pour votre site web.
Arrière plan
Vous pourrez aller plus loin dans la personnalisation de votre arrière-plan grâce à la fonctionnalité dégradé pour un rendu couleur unique. Grâce à la jauge de direction vous pouvez choisir des tons correspondants à votre goût.
Formes
Vous pouvez ajouter des formes et les personnaliser directement dans votre container.
Le Grid (les grilles)
La grille est le bloc le plus important de GB, ce qui vous permet de créer de magnifiques designs. Vous pouvez utiliser la grille seule ou avec un bloc Container. Vous avez le choix entre 12 types de grilles différentes. Elles sont similaires aux colonnes déjà présentes dans WordPress.
Le bloc grille utilise un flexbox où il enveloppe les colonnes sur plusieurs lignes. Une grille peut être utilisée pour concevoir un tableau de prix, créer une section de témoignages et une case d’abonnement, ainsi que de nombreux autres modèles.
Voici les différentes options de réglages disponibles :
Container Width (Largeur du conteneur)
Cette option vous permet de définir la largeur de votre conteneur (élément de la grille) en utilisant un pourcentage.
Alignement vertical
Si vous n’utilisez pas l’alignement vertical dans votre grille, vous pouvez indiquer à ce conteneur spécifique où s’aligner verticalement.
Supprimer l’écart vertical
L’écart vertical est défini dans le bloc Grid. Toutefois, cette option nous permet de remplacer cette option pour ce conteneur spécifique. Cette option est généralement utilisée pour la dernière ligne de la grille, comme illustré ci-dessus.
Ordre
Cette option apparaît lors de l’utilisation des contrôles tablette et mobile. Elle vous permet de définir différents ordres pour le conteneur dans la grille, comme ci-dessus.
Le bloc En-tête (Headline)
Headline Block dans GenerateBlocks est similaire à Heading Common Block dans WordPress mais il a beaucoup plus de composants intégrés qui vous permettront d’aller encore plus loin avec les titres et les paragraphes.
Vous pouvez sélectionner des paragraphes et des balises de titre (h1, h2, h3, h4, h5, h6) pour définir le titre de l’élément dans le bloc de titre. Vous pouvez également utiliser des icônes pour définir le titre. Ci-dessus vous voyez l’icône de Pinterest mais vous pouvez aussi importer votre icône personnalisé.
En outre, vous pouvez sélectionner une police, un poids de police et une taille personnalisés à l’aide des composants typographiques, ainsi que des couleurs, ajuster l’espacement, etc. dans le bloc de titre. Vous pouvez également définir l’ID de l’élément et les classes CSS à l’aide des composants avancés.
Le bloc Bouton
En utilisant GenerateBlocks Buttons, vous pouvez créer un bouton élégant qui peut être utilisé dans les CTA. Vous pouvez également créer un bouton de connexion, un bouton d’inscription, un bouton pour les réseaux sociaux, et définir des icônes dans chaque bouton.
Vous pouvez également placer plusieurs boutons sur la même ligne ou les empiler verticalement. Il est également possible d’utiliser d’autres composants comme la typographie, l’espacement, les couleurs, le gradient, etc. pour embellir les boutons.
Navigation entre les blocs
Lorsque vous atteignez un certain nombre de blocs, il peut être un peu plus difficile de sélectionner les choses. C’est là que la navigation par bloc est utile.
Dans l’éditeur de blocs de WordPress, cliquez sur les trois lignes en haut. Cela fera apparaître une liste de vos blocs. Ce que je fais normalement, c’est de sélectionner le bloc ou la zone sur laquelle je veux travailler. Ensuite, je peux naviguer jusqu’au conteneur parent si nécessaire. C’est beaucoup plus facile que d’essayer de cliquer exactement au bon endroit.
Chaque bloc inclus avec GenerateBlocks possède de nombreux composants que vous pouvez facilement modifier. Tout cela se fait à partir de boutons à bascule situés sur le côté droit de l’éditeur de blocs WordPress. Je vous ai présenté la totalité d’entre eux plus haut (typographie, espacement, arrière-plan, icône, etc.).
Version Pro de GenerateBlocks (prix, fonctionnalités, différences)
Prix GenerateBlocks Pro
Tout ce que nous avons abordé ci-dessus se trouve dans la version gratuite de GenerateBlocks. Cependant, si vous voulez aller plus loin, il existe une version Pro. Il existe trois abonnements annuels différents parmi lesquels vous pouvez choisir :
- Personnel à environ 32€ par an pour 1 site WordPress.
- Pro à environ 60€ par an pour 10 sites WordPress.
- Professionnel à environ 80€ par an pour 250 sites WordPress.
Tous ces abonnements comprennent les éléments suivants :
- 150+ modèles pro
- Création de modèles locaux
- Styles globaux
- Effets de bloc
- Bibliothèque d’actifs
- Arrière-plans avancés
- Fonctions de survol des conteneurs
- Attributs personnalisés
- Assistance et mises à jour pendant un an
Quant au support, vous serez rassuré.e.s de savoir qu’ils offrent également une garantie de remboursement de 30 jours. Si vous n’êtes pas satisfait, vous pouvez vous faire rembourser.
Fonctionnalités GenerateBlocks Pro
La version pro de GenerateBlocks nécessite que vous ayez installé la version gratuite au préalable. Voici les fonctionnalités phares de la version payante :
Bibliothèque de modèles
GenerateBlocks propose plus de 150 modèles parmi lesquels vous pouvez choisir. Et ils en ajoutent continuellement. Il suffit d’aller dans l’éditeur de blocs WordPress, de sélectionner le bloc de la bibliothèque de modèles et de choisir ce que vous voulez. Voici quelques modèles :
- Wireframe
- Contenu
- Héros
- Appel à l’action (call to action)
- Équipe
- Boîtes d’information
- Icônes réseaux sociaux
- Contact
- Pied de page
- Tableau des prix
- Logos
- Témoignage
- Titre
- Bouton
Vous pouvez créer une page de contact, un pied de page personnalisé ou une page de prix en quelques secondes. Et le meilleur est que, contrairement à un constructeur de pages, vous ne sacrifiez pas les performances. Ils ont tous été conçus dans un esprit de performance.
Mieux encore, vous pouvez les importer à partir d’un modèle, les modifier et les enregistrer dans votre bibliothèque de modèles locale.
Arrière-plans avancés
Les arrière-plans de la version gratuite fonctionnent très bien, mais la version pro vous permet d’en faire encore plus. Vous pouvez ajouter des images et des dégradés d’arrière-plan à vos conteneurs et les appliquez à n’importe quel appareil (mobile, desktop). Vous pouvez simplement insérer un lien URL et effectuer une recherche sur internet pour importer l’image qui vous convient. Vous pouvez gérer la taille, la position, les pièces jointes, etc. Une fois que cela est fait, ajoutez l’arrière plan en cliquant sur “add background”.
Styles copier/coller
L’option copier/coller représente un gain de temps considérable qui vous permettra d’aller plus vite dans l’application de votre style.
Style globaux
Vous pouvez créer des styles que vous pouvez utiliser sur l’ensemble de votre site web. Cette option est très performante car, encore une fois, il n’est pas nécessaire de créer un code distinct.
Effets
Les CSS sont aujourd’hui très puissants, et la version pro de GenerateBlocks vous permet de les exploiter. Voici quelques-uns des effets que vous pouvez appliquer :
- Opacité et fondus
- Transition
- Ombre portée
- Ombre de texte
- Transformer
- Filtre
Liens conteneurs
Cette option premium vous permet de transformer vos blocs de conteneurs en de magnifiques liens de style carte et de les personnaliser avec des options de survol.
Bibliothèque des ressources
Les “assets” en anglais peuvent se référer à des ressources utiles. Ici, cette option premium vous permet de les ajouter à votre bibliothèque et d’y accéder grâce à l’éditeur de blocs de WordPress.
Visibilité de l’appareil
Selon votre appareil, vous pouvez masquer ou afficher facilement les blocs sur les ordinateurs, les tablettes et les appareils mobiles.
Attributs personnalisés
Cette dernière option vous permet d’appliquer des attributs de données personnalisés à vos éléments grâce à une interface utilisateur simple.
Documentation GenerateBlocks
En ce qui concerne la documentation, Tom et son équipe sont clairs sur ce sujet car c’est un aspect important du plugin GenerateBlocks. Vous pouvez accéder à la documentation complète sur docs.generateblocks.com, la base de connaissances approfondie comprenant les sections Blocks, Components et Block Editor.
Support GenerateBlocks
GenerateBlocks étant un plugin gratuit et payant, tout le monde peut installer une version gratuite à partir du répertoire WordPress. Et, vous pouvez trouver une aide gratuite sur le plugin dans la section support de WordPress.
Il existe également une section de support pour la version Pro de GenerateBlocks sur le site officiel. Vous pouvez obtenir de l’aide directement en ouvrant des tickets de support ou vous pouvez rejoindre la communauté GenerateBlocks pour poster vos questions.
Conclusion
Nous avons fait le tour des fonctionnalités phares du plugin GenerateBlocks. Il est extrêmement simple d’utilisation et sa prise en main ne devrait pas trop vous causer d’ennuis. Comme vous avez pu le constater, la version payante offre de multiples fonctionnalités pour aller plus loin dans la personnalisation et l’amélioration des blocs sur vos pages. Les prix sont abordables et le support est le même. Selon vos besoins, la version premium peut s’avérer plus adaptée !
À noter côté performance que GenerateBlocks a été conçu en mettant l’accent sur les performances. Le plugin n’ajoute qu’un seul fichier CSS par page, il n’y a pas de code CSS en ligne ou d’utilisation de JavaScript et le HTML généré par le plugin est minimal, ce qui rend GenerateBlocks léger et super rapide.
Enfin, si vous n’êtes pas à l’aise avec l’éditeur de bloc de WordPress il se peut qu’il vous faille un peu de temps pour vous habituer à ce mode de fonctionnement. Cependant, la simplicité du glisser-déposer et des blocs devraient vous séduire rapidement.
