GenerateBlocks est un plugin WordPress gratuit développé par Tom Usborne et son équipe hautement talentueuse chez GeneratePress. Il a été ajouté au référentiel WordPress en février 2020 et a depuis accumulé plus de 20 000 installations actives, avec une évaluation remarquable de 5 étoiles. Une version professionnelle est également disponible, offrant encore plus de fonctionnalités, et elle a été lancée en janvier 2021.
I. GenerateBlocks vs GeneratePress
GenerateBlocks est une collection de blocs WordPress qui peut être utilisée avec n’importe quel thème, bien qu’il soit fortement recommandé d’utiliser le thème GeneratePress pour une expérience optimale. GenerateBlocks est considéré comme les blocs de construction qui vous permettent de concevoir et de personnaliser votre site selon vos souhaits. L’équipe derrière GeneratePress développe à la fois le thème et les blocs, ce qui garantit une compatibilité et une intégration harmonieuses. De plus, si vous avez besoin d’une assistance, vous pouvez compter sur l’équipe compétente et bien informée pour vous aider.
Il est important de noter que l’utilisation de GenerateBlocks suppose l’utilisation de l’éditeur de blocs de WordPress, qui a remplacé l’ancien éditeur classique. La transition vers l’éditeur de blocs est fortement recommandée, car il offre une expérience de conception plus moderne et flexible.
II. Caractéristiques
GenerateBlocks se distingue par sa facilité d’utilisation, ce qui le rend accessible même aux utilisateurs novices de WordPress. Grâce à sa combinaison avec GeneratePress, de nombreux utilisateurs ont réussi à créer leur propre site Web sans nécessiter de compétences en codage ou de formation technique préalable.
Parmi les fonctionnalités appréciées de GenerateBlocks, on retrouve :
- Sa rapidité et sa légèreté, sans dépendances complexes de code.
- Une interface utilisateur familière et intuitive, s’appuyant sur les styles et les contrôles natifs de WordPress, ce qui facilite son apprentissage.
- Une accessibilité à 100 %, un aspect souvent négligé mais crucial.
- Une compatibilité avec les appareils mobiles, grâce à l’utilisation de grilles Flexbox modernes. Il est même possible de personnaliser les vues mobiles et de bureau séparément si nécessaire.
- Un excellent support fourni par le développeur Tom, qui est régulièrement présent pour répondre aux questions dans les forums.
La version gratuite de GenerateBlocks propose quatre blocs principaux : Conteneur, Grille, Titre et Boutons.
2.1. Conteneur
Les conteneurs permettent d’organiser le contenu en lignes et en sections. Pour ajouter un conteneur, il suffit de taper /container dans l’éditeur de blocs WordPress. Dans l’exemple ci-dessous, vous pouvez voir qu’il y a une section grise (conteneur 1), suivie d’une section blanche (conteneur 2). Voici quelques-unes des modifications que vous pouvez apporter à un conteneur :
-
- Choisir entre une largeur totale ou une largeur de contenu (permettant de modifier l’apparence de l’extérieur et de l’intérieur séparément)
- Ajuster la largeur du conteneur
- Ajouter une étiquette d’élément
- Activer l’option de page en largeur totale.
2.2. Grille
Les grilles vous permettent de créer des mises en page avancées avec des grilles flexibles. Pour ajouter une grille, il suffit de taper /grid dans l’éditeur de blocs WordPress. Il existe 12 types de grilles différents parmi lesquels vous pouvez choisir. Vous pouvez les considérer comme des colonnes réactives déjà intégrées dans WordPress, mais beaucoup plus puissantes. Dans l’exemple ci-dessous, vous pouvez voir qu’il y a une grille à 3 colonnes à l’intérieur d’un conteneur. Ensuite, dans chaque colonne, j’ai ajouté des conteneurs séparés.
2.3. Titre
Les titres vous permettent de créer un contenu riche en texte avec des options de typographie avancées. Pour ajouter un titre, il vous suffit de taper /titre dans l’éditeur de blocs WordPress.
Voici quelques-unes des choses que vous pouvez personnaliser pour un titre :
-
- Choisissez parmi h1, h2, h3, h4, h5, h6, ou paragraphe ou div
- Options de typographie
- Couleur
- Icône (vous pouvez utiliser les icônes SVG incluses ou inclure votre propre code SVG personnalisé)
Dans l’exemple ci-dessous, vous pouvez voir que j’ai choisi une icône SVG pour le titre. Vous pouvez modifier le positionnement, la taille, le padding et d’autres aspects de l’icône.
2.4. Boutons
Les boutons vous permettent d’améliorer les conversions avec des options de bouton attrayantes. Pour ajouter un bouton, il suffit de taper /button dans l’éditeur de blocs WordPress. Voici quelques-unes des choses que vous pouvez personnaliser pour un bouton :
-
- Typographie
- Espacement
- Couleurs
- Dégradé de fond
- Icône (vous pouvez utiliser les icônes SVG incluses ou inclure votre propre code SVG personnalisé)
Dans l’exemple ci-dessous, vous pouvez voir que j’ai ajouté un bouton et choisi une icône de flèche simple.
III. Bloquer la navigation
Une fois que vous avez un certain nombre de blocs, il peut devenir un peu plus difficile de les sélectionner. C’est là que la navigation par blocs devient utile. Dans l’éditeur de blocs WordPress, vous pouvez cliquer sur les trois lignes en haut pour afficher une vue en liste de vos blocs. Ce que je fais généralement, c’est sélectionner le bloc ou la section sur lequel je veux travailler, puis naviguer vers le conteneur parent si nécessaire. Cela facilite grandement la sélection des blocs. Il est possible de modifier facilement les nombreux composants inclus dans chaque bloc de GenerateBlocks. Toutes ces options sont accessibles via les bascules sur le côté droit de l’éditeur de blocs WordPress. Vous pouvez également modifier séparément les options pour les ordinateurs de bureau, les appareils mobiles et les tablettes. Dans les paragraphes suivants, je vais expliquer certains d’entre eux.
Veuillez noter que les options des composants peuvent varier en fonction du bloc que vous utilisez.
IV. Composantes
4.1. Typographie
Le composant typographie vous permet de personnaliser de nombreux aspects différents de la police utilisée, en choisissant parmi les polices système (ce que je recommande généralement) ou les polices Google Fonts. Voici quelques-unes des options que vous pouvez affiner :
-
- Poids de la police
- Transformation de la police
- Sauvegarde de la famille de polices
- Taille de la police (en pixels, em ou pourcentage)
- Espacement entre les lettres
Ces options vous permettent de créer une apparence typographique précise et adaptée à vos besoins.
4.2. Espacement
La composante d’espacement vous offre un contrôle précis sur la mise en page de vos éléments, avec les options suivantes :
-
- Rembourrage (en pixels, em ou pourcentage)
- Marge (en pixels, em ou pourcentage)
- Taille de la bordure
- Rayon de la bordure (en pixels, em ou pourcentage)
- Z-index extérieur
- Z-index intérieur
Ces options vous permettent de définir l’espacement entre les éléments, la taille de la bordure et d’autres paramètres visuels pour obtenir le positionnement et l’apparence souhaités.
4.3. Couleurs
Le composant de couleurs vous permet de choisir des couleurs pour différents éléments, allant des conteneurs au contenu. Voici quelques exemples :
-
- Couleur de fond
- Couleur du texte
- Couleur du lien
- Couleur du lien survol
- Couleur de la bordure
Ces options vous permettent de personnaliser les couleurs utilisées dans vos blocs, ce qui vous donne un contrôle total sur l’apparence visuelle de votre contenu. Vous pouvez choisir des couleurs qui correspondent à votre marque ou à vos préférences personnelles pour créer une esthétique cohérente et attrayante.
4.4. Formes
Le composant de formes vous permet de choisir parmi une variété de formes différentes que vous pouvez utiliser pour l’arrière-plan des conteneurs. Voici quelques-unes des propriétés que vous pouvez modifier :
-
- Ondes, angles, courbes et triangles aléatoires
- Position
- Couleur
- Hauteur
- Largeur
- Retournement horizontal
- Z-index
En ajustant ces propriétés, vous pouvez créer des arrière-plans uniques et attrayants pour vos conteneurs, ajoutant ainsi une touche visuelle intéressante à votre contenu. Vous avez la liberté de jouer avec différentes formes et configurations pour obtenir le résultat souhaité.
V. Budget
Toutes les fonctionnalités que nous avons explorées jusqu’à présent se trouvent dans la version gratuite de GenerateBlocks. Cependant, si vous souhaitez aller encore plus loin, il existe une version Pro disponible. Il y a trois plans annuels différents parmi lesquels vous pouvez choisir :
- Plan Personnel à 39 euros par an pour 1 site WordPress.
- Plan Pro à 69 euros par an pour 10 sites WordPress.
- Plan Professionnel à 99 euros par an pour 250 sites WordPress.
Tous les plans comprennent les fonctionnalités suivantes :
- Plus de 150 modèles professionnels.
- Création de modèles locaux personnalisés.
- Styles mondiaux pour une cohérence visuelle.
- Effets de bloc avancés pour des mises en page dynamiques.
- Bibliothèque d’actifs pour un accès facile aux éléments réutilisables.
- Options avancées d’arrière-plan pour des designs élégants.
- Caractéristiques de survol du conteneur pour des interactions attractives.
- Attributs personnalisés pour une personnalisation poussée.
- Assistance et mises à jour pendant un an.
Ce qui distingue l’équipe de développement derrière GenerateBlocks et GeneratePress, c’est leur incroyable soutien. Vous n’aurez jamais à vous soucier de rester sans réponse face à une question ou à un problème. De plus, ils offrent une garantie de remboursement de 30 jours. Si vous n’êtes pas satisfait, vous pouvez récupérer votre argent.
VI. Arrière-plans avancés
La version gratuite de GenerateBlocks offre déjà de bonnes fonctionnalités pour les arrière-plans, mais la version Pro vous permet d’aller encore plus loin. Vous pouvez ajouter des dégradés d’arrière-plan et des images à vos conteneurs, et les appliquer à n’importe quel appareil. Cette fonctionnalité vous offre encore plus de possibilités de personnaliser l’apparence de vos conteneurs et de créer des designs attrayants.
VII. Styles mondiaux
Ensuite, nous avons l’une de mes fonctionnalités préférées : les styles globaux. Cette fonctionnalité vous permet de créer des styles que vous pouvez utiliser sur l’ensemble de votre site Web. C’est particulièrement avantageux en termes de performance, car cela évite de créer un code séparé à chaque fois. Les styles globaux vous permettent de maintenir une cohérence visuelle sur l’ensemble de votre site et de gagner du temps en réutilisant les styles déjà définis. C’est un outil puissant pour personnaliser rapidement et efficacement l’apparence de votre site.
VIII. Effets
Le CSS contemporain propose des fonctionnalités avancées, et avec la version professionnelle de GenerateBlocks, vous pouvez en tirer pleinement parti. Voici quelques-uns des effets impressionnants que vous pouvez appliquer :
- Opacité et mélange.
- Transition.
- Ombre de boîte.
- Ombre de texte.
- Transformation.
- Filtre.
Ces effets vous permettent de donner du dynamisme et de la profondeur à vos blocs, en ajoutant des transitions fluides, des ombres réalistes, des transformations visuelles et des filtres pour modifier les couleurs et les apparences. Avec ces fonctionnalités, vous pouvez vraiment améliorer l’esthétique et l’interactivité de votre site Web.
IX. Attributs personnalisés
Vous pouvez facilement appliquer des attributs de données personnalisés à vos éléments grâce à une interface utilisateur conviviale.
Conclusion
En conclusion, GenerateBlocks est un plugin WordPress puissant et convivial qui vous permet de créer des mises en page avancées et personnalisées sans avoir à coder. Avec sa version gratuite, vous bénéficiez d’une multitude de blocs et de fonctionnalités pour personnaliser votre contenu, tels que les conteneurs, les grilles, les titres et les boutons. La version Pro de GenerateBlocks pousse encore plus loin les possibilités en offrant plus de 150 modèles professionnels, des styles globaux, des effets de blocs, une bibliothèque d’actifs, des arrière-plans avancés et bien d’autres fonctionnalités. Cela vous permet de créer des designs visuellement attrayants et d’améliorer l’expérience utilisateur sur votre site. Ce qui distingue GenerateBlocks, c’est également le soutien exceptionnel de l’équipe de développement. Ils sont réactifs aux questions et fournissent une assistance de qualité. Que vous soyez un débutant ou un développeur expérimenté, GenerateBlocks est un outil précieux pour créer des mises en page flexibles et esthétiques. Son intégration parfaite avec le thème GeneratePress en fait une combinaison puissante pour concevoir des sites Web de qualité professionnelle.
En résumé, GenerateBlocks est un choix solide pour ceux qui souhaitent étendre les fonctionnalités de leur site WordPress avec des blocs personnalisables et des options de design avancées.




