GenerateBlocks : une alternative aux Pages Builders WordPress

Disclaimer : Cet article inclut des liens affiliés, ce qui signifie qu’on gagne une petite commission si tu réalises un achat après avoir cliqué sur le lien. Passer par un de nos liens affiliés est un moyen de supporter l’équipe Web & SEO. Merci pour ton soutien et bonne lecture !

Précédemment, je te parlais de GeneratePress, un thème ultra léger et facilement personnalisable. Aujourd’hui, je reviens pour te présenter GenerateBlocks. Il s’agit d’un plugin qui a été développé par les fondateurs du thème GeneratePress.

Avec lui, tu auras accès à plusieurs fonctionnalités très pratiques pour compléter le Page Builder (constructeur de pages) de WordPress : Gutenberg. Performant, flexible et réactif, ce plugin est un petit bijou que je ne peux que te recommander !

Si tu es à la recherche d’un plugin pratique pour personnaliser tes boutons, tes titres, mais aussi ajouter des tableaux et des blocs de contenu facilement, alors GenerateBlocks est la solution qu’il te faut.

Le plugin propose de nombreuses possibilités en termes de typographies, d’icônes, de couleurs de texte, d’arrière-plans, d’espacement et bien plus encore. Avec GenerateBlocks, tu pourras configurer ton site comme tu le souhaites et ce, en toute facilité.

GenerateBlocks : c’est quoi ?

GenerateBlocks est un plugin WordPress gratuit développé par la team GeneratePress, et plus particulièrement Tom Usborne. GenerateBlocks a vu le jour en Février 2020 et il compte désormais plus de 50 000 installations actives ainsi qu’une note globale de 5/5. Une version pro est disponible avec encore plus de fonctionnalités, celle-ci est disponible depuis Janvier 2021.

J’utilise ce plugin sur Web & SEO et j’en suis ravi. Il apporte des fonctionnalités de personnalisation supplémentaires, sans ralentir la vitesse de chargement, comme ça peut être le cas avec un constructeur de pages WordPress classique. Le fait qu’il soit hyper léger ne change rien au temps de chargement du blog, et ça correspond parfaitement à ce que je recherchais.

GenerateBlocks vs GeneratePress

Nombreux sont ceux et celles qui se demandent quelle est la différence entre GenerateBlocks et GeneratePress ? Il s’agit en réalité de deux choses bien distinctes. GeneratePress est un thème WordPress, que tu pourras installer via l’onglet Thèmes dans ton tableau de bord WordPress. GenerateBlocks est quant à lui un plugin que tu pourras installer dans l’onglet Extensions. 

GenerateBlocks est une extension qui permet d’avoir accès à plus de fonctionnalités que ce qu’offre WordPress. En natif, Gutenberg permet déjà de bénéficier de fonctionnalités sympathiques. Avec GenerateBlocks, on va un cran plus loin.

Étant un plugin à part entière, GenerateBlocks peut être utilisé avec n’importe quel thème. Néanmoins, je te recommanderais de l’utiliser avec GeneratePress pour un max de performance. Le combo est très puissant. Les deux ont été créé par la même équipe et ils font parfaitement bien la paire.

Si tu as besoin d’assistance avec GeneratePress ou GenerateBlocks, tu pourras prendre contact avec le même support client. Tu pourras même être assisté par Tom Usborne pour la partie Technique.

GenerateBlocks : un constructeur ultra léger

Contrairement aux constructeurs de pages populaires sur WordPress, comme Elementor, Divi Builder, Beaver Builder, Brizy ou encore Oxygen, GenerateBlocks est extrêmement léger. Son code est si léger et optimisé que ton site ne sera pas impacté par la moindre latence. Alors certes, ses fonctionnalités sont moins nombreuses, mais il est ~90% plus léger !

Les fonctionnalités

L’avantage de GenerateBlocks réside dans sa facilité d’utilisation. En effet, il propose des fonctionnalités simples et intuitives. La prise en main du plugin est un jeu d’enfant pour les personnes déjà familières avec WordPress. Et si toutefois tu prends tes marques sur WordPress, tu n’auras pas de mal à utiliser GenerateBlocks car ses fonctionnalités sont directement intégrées dans l’éditeur Gutenberg. Voyons ensemble les différentes fonctionnalités proposées par GenerateBlocks.

Les blocs (Container)

La première fonctionnalité proposée par GenerateBlocks concerne les blocs. Aussi appelés conteneurs, ils sont pratiques pour ajouter des éléments de façon ordonnée et personnalisable. GenerateBlocks offre la possibilité de sélectionner la hauteur, la largeur du bloc, la couleur de fond, et plus encore.

Pour créer un bloc, il te suffit au choix de :

• sélectionner le type d’élément “Container” avec Gutenberg
• ou insérer la requête /container dans l’éditeur

Les colonnes (Grid)

Egalement appelées les grilles, les colonnes te permettent de personnaliser la présentation de tes contenus et les rendre plus lisibles. GenerateBlocks t’offre le choix entre 12 modèles différents. Tu pourras les intégrer dans les blocs et supprimer les lignes qui les séparent si tu le souhaites. Là encore, tu pourras personnaliser les colonnes grâce à plusieurs options, notamment l’espacement horizontal et vertical, mais aussi l’alignement en hauteur et en largeur. 

Pour créer des colonnes, il te suffit au choix de :

• sélectionner le type d’élément “Grid” avec Gutenberg
• ou insérer la requête /grid dans l’éditeur

Les titres

GenerateBlocks va te permettre de personnaliser tes titres comme bon te semble. Depuis ton éditeur Gutenberg, tu vas pouvoir choisir le type de titre (H1, H2, H3…), la police d’écriture, la couleur du texte et l’espacement. Tu pourras aussi ajouter une icône SVG, une classe CSS et plus encore, pour un rendu attractif sur mesure.

Pour placer ces sous-titres personnalisés dans ton contenu, tu pourras au choix :

• sélectionner le le type d’élément “Headline” avec Gutenberg
• ou insérer la requête /headline dans l’éditeur

Les boutons d’appel à l’action

Cette fonction GenerateBlocks te permettra d’insérer de jolis boutons CTA (Call to Action) personnalisables n’importe où dans ton contenu. Tu pourras les utiliser dès que tu as un élément important à mettre en avant, que ce soit pour faire un lien interne ou externe.

Tu pourras personnaliser le texte, la police d’écriture, la couleur du texte, la couleur de fond (classique ou dégradé), la taille du bouton, les espacements et l’icône qui va bien avec.

Pour insérer un bouton d’appel à l’action personnalisé, tu pourras au choix :

• sélectionner le le type d’élément “Button” avec Gutenberg
• ou insérer la requête /button dans l’éditeur

Les blocs de navigation

GenerateBlocks va te permettre d’insérer des éléments dans d’autres éléments, et cela sans limite. Pour te donner un exemple, tu vas pouvoir mettre un bouton dans une colonne qui elle pourra se trouver dans un bloc. Cela dit, si tu viens à répéter ce procédé à plusieurs reprises sur ta page, il peut être difficile de bien s’y retrouver.

Pour t’aider, GenerateBlocks a mis en place un système de navigation très pratique. En appuyant sur les trois petites barres présentes sur le menu, tu auras accès à tous les éléments de ta page en un clic. Tu pourras alors cliquer sur l’élément de ton choix et apporter une modification si nécessaire. 

À savoir : toutes ces options peuvent être personnalisées pour avoir un rendu parfaitement adapté pour les ordinateurs, smartphones et tablettes.

La typographie

L’option typographie te permettra de sélectionner la police d’écriture de ton choix dans la librairie Google Fonts, ou encore mieux, System Fonts pour une meilleure performance (ce que j’utilise sur Web & SEO). GenerateBlocks offre également d’autres options de personnalisation, comme la taille, l’espacement des lettres, l’épaisseur, la distorsion, etc.

L’espacement

Cette option te permet d’ajouter de l’espacement sur n’importe quel élément. C’est pratique et cela permet de personnaliser ta page dans les moindres détails. Parmi les options d’espacement, tu as la possibilité de personnaliser : 

1. Le remplissage (px, em, %)
2. La marge (px, em, %)
3. La taille de la bordure (px)
4. Le rayon de la bordure (px, em, %)
5. Le Z Index extérieur / intérieur

Les couleurs

GenerateBlocks embarque une option qui te permet de personnaliser des éléments de la couleur de ton choix. Tu pourras choisir le coloris que tu souhaites via une palette de couleurs, mais aussi intégrer le code qui correspond à ta couleur. Tu pourras personnaliser l’arrière-plan de tes blocs, de tes textes, de tes liens, de tes boutons, des bordures, etc. Les possibilités de personnalisation sont assez vastes.

Les dégradés 

En plus d’apporter de la couleur aux différents éléments, tu pourras également créer de jolis dégradés. C’est une solution pour ajouter des ombres élégantes ou des superpositions subtiles. Cette option propose plusieurs réglages, notamment le choix des couleurs, mais aussi la position de la transition, la direction du dégradé, etc.

Les arrière-plans

Grâce à cette option, tu vas pouvoir intégrer des arrières plans dans certains éléments, notamment dans les blocs. On peut ajouter une photo en arrière-plan, mais aussi des motifs (vagues, angles, triangles, etc.).

GenerateBlocks t’offre la possibilité de sélectionner la taille de l’image, l’opacité de l’arrière-plan, la position, etc. Tu pourras également choisir de répéter l’arrière-plan sur toutes la zone ou laisser une simple image. Il est également possible de faire défiler l’arrière-plan de haut en bas quand on scrolle la page (Paralax).

Combien coûte GenerateBlocks ?

GenerateBlocks se décline en deux versions. La première est entièrement gratuite et disponible dans le répertoire de plugins de WordPress, elle te permet d’accéder à toutes les fonctionnalités présentées ci-dessus.

La deuxième version payante t’offre accès à des options et fonctionnalités supplémentaires. Il existe 3 formules Pro : 

• Personal : 39$ / an (1 site)
• Plus : 69$ / an (10 sites)
• Professional : 99$ / an (250 sites)

La version Premium te permet d’accéder à des fonctionnalités supplémentaires, telles que :

• Plus de 150 modèles professionnels prédéfinis
• La possibilité de créer des modèles et de les enregistrer
• Des blocs avec effets
• Une bibliothèque de formes et d’icônes SVG
• Des arrière-plans avancés
• Des fonctionnalités de survol des blocs
• Des attributs personnalisés

À savoir : GenerateBlocks t’offre une garantie de 30 jours. Si tu n’es pas satisfait(e) des fonctionnalités, tu peux annuler ton abonnement et demander un remboursement. 

Les fonctionnalités Pro de GenerateBlocks

Comme tu as pu le constater juste avant, la version payante de GenerateBlocks embarque des fonctionnalités supplémentaires. Certaines te seront sans doute plus utiles que d’autres mais dans l’ensemble, elles sont très pratiques et elles font gagner beaucoup de temps. Voici les fonctionnalités auxquelles tu pourras accéder avec la version payante.

Plus de 150 modèles prédéfinis

GenerateBlocks propose plus de 150 modèles de blocs prédéfinis que tu peux sélectionner et mettre en place sur ton site. Pour y accéder, c’est très simple : il te suffit de te rendre sur l’éditeur WordPress et de te diriger vers la bibliothèque de templates. Tu pourras alors choisir le modèle de ton choix selon ton besoin. 

Pour info, GenerateBlocks propose des blocs personnalisés pour du contenu, mais aussi pour mettre en place des appels à l’action, des formulaires de contact, des tableaux de prix, des logos, des icônes pour réseaux sociaux et bien plus encore. 

La bibliothèque de templates te permettra de mettre en place des blocs plus facilement et surtout beaucoup plus rapidement. Tu pourras les personnaliser à ta guise et les enregistrer dans ta bibliothèque pour les réutiliser sur d’autres pages.  Là encore, tout est extrêmement simple et intuitif.

Les arrière-plans avancés 

La version gratuite du Page Builder propose plusieurs arrière-plans, mais ceux de la version pro sont encore plus personnalisables. Tu pourras ajouter des dégradés ou des images d’arrière-plan à tes blocs en toute facilité. GenerateBlocks a également mis en place une option qui te permettra d’ajuster l’arrière-plan sur tous les appareils (ordinateurs, smartphones, tablettes). 

L’option copier / coller

Pour te faire gagner du temps, GenerateBlocks a mis en place une option copier /coller. Avec elle, tu pourras dupliquer un style en un clic.

Les Global Styles

Viens ensuite l’une de mes fonctionnalités préférées, à savoir les global styles. Grâce à cette option, tu vas pouvoir personnaliser des éléments et les enregistrer de façon à pouvoir les réutiliser où tu le souhaites à ta guise.

Disons par exemple que tu utilises un Global Styles sur 3 pages de ton site, lorsque tu apportes une mise à jour à ton Global Style, il se mettra à jour automatiquement sur les 3 pages concernées. C’est vraiment pratique et cela permet de gagner pas mal de temps. 

Les effets CSS

La version Pro de GenerateBlocks te permet de disposer de nouveaux effets CSS. Tu pourras ainsi accéder aux codes pour personnaliser tes éléments comme tu le souhaites. Parmi les nombreux effets, tu pourras changer l’opacité, la transition, les ombres, les filtres, etc.

L’ajout de liens aux blocs

Avec la version Pro, tu pourras transformer un simple bloc en un encart personnalisé avec des liens stylés. Tu pourras même ajouter une touche de design avec les options de couleurs et de style lorsque la souris survole ce même lien.

Choisir le type d’appareil

GenerateBlocks t’offre la possibilité de choisir les appareils sur lesquels seront visibles tes éléments. Tu pourras choisir de le publier sur smartphone, PC ou tablette. C’est une option qui peut être très pratique, surtout si tu souhaites rendre ton site plus fluide et minimaliste sur smartphone.

Les avantages à utiliser GenerateBlocks

Venons-en maintenant aux avantages d’utiliser un Page Builder comme GenerateBlocks :

• C’est un plugin simple et intuitif, parfaitement adapté à Gutenberg
• Toutes les fonctionnalités sont accessibles depuis l’éditeur WordPress
• De nombreux styles et effets
• Il est rapide et hyper léger
• Le développeur est disponible en cas de besoin
• La version de base est entièrement gratuite, tout comme GeneratePress

Les performances GenerateBlocks

Brian Jackson, le créateur de l’excellent plugin Perfmatters utilise GenerateBlocks sur son site Pro, mais aussi Perfmatters (bien sûr), Cache Enabler (plugin de cache), KeyCDN (CDN) et Kinsta (hébergeur premium).

Voici la performance de son site :

C’est propre 🙂 Typiquement un constructeur de pages classique pourrait ralentir le chargement de ton site d’une seconde à lui seul.

Alors ça vaut le coup ?

Si tu recherches plus d’options de personnalisation à ton éditeur Gutenberg, sans impacter les temps de chargement et sans avoir à installer un plugin usine à gaz, alors GenerateBlocks est LA solution qu’il te faut. Très facile à prendre en main, il s’intègre à n’importe quel thème WordPress, et il offre des fonctionnalités et options de personnalisation bien pratiques.

On apprécie le fait de disposer d’une version Gratuite qui est déjà assez complète et satisfaisante. Tu peux aussi opter pour la version Pro qui offre plus de fonctionnalités et une large palette de templates prêts à être importés en un clic. J’ai récemment fait l’acquisition de cette version Pro et je vais la déployer très rapidement sur le blog Web & SEO 😉

En bref, GenerateBlocks est un constructeur de pages WordPress qui va à l’essentiel, il est pratique et très léger ! 

J’espère que cet avis sur le plugin GenerateBlocks t’aura plu, si c’est le cas ne manque pas de le partager, et n’hésites pas à laisser un commentaire si tu as une question ou si tu souhaites partager ton retour d’expérience avec les constructeurs de page WordPress.