Review de Gutenberg Blocks – Ultimate Addons for Gutenberg

La plupart d’entre nous sont déjà familiers avec Gutenberg et son fonctionnement. Pour les nouveaux arrivants dans l’univers WordPress, Gutenberg est le nouvel éditeur de WordPress publié avec la version 5.0. WordPress a introduit cet éditeur basé sur des blocs dans le système central. Gutenberg utilise des blocs pour créer toutes sortes de contenus, ce qui facilite la création de blogs et de sites web.

Dans cet article nous allons voir le plugin Gutenberg Block – Ultimate Addons for Gutenberg qui offre un certain nombre de blocs uniques et créatifs pour Gutenberg qui vous aident à construire et à concevoir des pages ou des articles sans code. Une interface facile à utiliser et plusieurs personnalisations facilitent la construction de pages et de sites Web complets. Nous allons nous pencher sur ses fonctionnalités qui en font un réel atout pour votre site web. Etant donné que les possibilités sont immenses nous explorerons quelques unes des fonctionnalités phares pour que vous preniez la mesure de son potentiel.

Avec plus de 300 000 installations actives, des mises à jour régulières grâce à la communauté et un support réactif de la part de l’équipe Brainstorm Force, ce plugin séduit toujours plus de nouveaux utilisateurs.

 

Qu’est-ce qu’un bloc ? 

Bloc ou bloc Gutenberg est un terme utilisé pour tout type de contenu que vous ajoutez dans le nouvel éditeur de WordPress. Tout ce que vous insérez au sein d’une page ou d’un article est un bloc dans l’éditeur. Gutenberg a quelques blocs par défaut tels que le Paragraphe, l’Image, l’En-tête, la Galerie, etc. qui vous donnent de bonnes bases pour commencer à personnaliser votre site.

Si vous utilisez actuellement des constructeurs de pages dans votre travail, comme Beaver Builder ou Elementor, UAG vous semblera très familier. Mis à part quelques différences au niveau de l’interface utilisateur, les caractéristiques des blocs sont les mêmes.

 

Installer le plugin Ultimate Addons for Gutenberg 

Une fois que vous êtes familiarisé avec Gutenberg, vous pouvez installer le plugin Ultimate Addons for Gutenberg (UAG) en allant dans Extensions -> Ajouter -> Barre de recherche pour Ultimate Addons for Gutenberg. Vous pouvez également télécharger le plugin gratuitement depuis le site web de UAG ou depuis le répertoire de wordpress.org et l’installer comme n’importe quel autre plugin WordPress sur votre site web.

Après l’activation, vous serez dirigé vers la page de bienvenue du plugin.

Cette page de bienvenue vous permet d’avoir des informations sur le plugin et d’accéder aux différentes ressources existantes (démos, base de connaissances, etc.) mais aussi de voir la liste de tous les blocs disponibles ci-dessous. Comme vous pouvez le voir à droite, il nous est proposé le thème Astra pour Gutenberg qui est excellent et vous comprendrez les liens évidents entre Astra, UAG et Brainstorm Force !

Donc, à partir de cette liste vous pouvez activer ou désactiver les différents blocs et voir ceux qui sont réutilisables.

Au fur et à mesure que vous utilisez des blocs vous pourrez également les placer dans votre liste de blocs réutilisables.

Maintenant, nous pouvons commencer à explorer les différentes fonctionnalités des blocs d’UAG.

Rendez-vous dans la section Pages puis appuyer sur le bouton “+” pour ouvrir le menu déroulant. Ensuite, faites défiler jusqu’à trouver les éléments de blocs UAG. Le plugin se compose de 29 blocs ayant des fonctionnalités différentes.

 

Les templates UAG 

Les modèles d’UAG sont la première chose que l’on remarque en haut de notre page. Cliquez dessus pour effectuer une recherche de modèles. De la page d’accueil, en passant par la section blog, à la page produits, vous y trouverez une vaste sélection d’items pour vos différentes pages et contenus de votre site web.

 

Forms Block 

Ultimate Addons for Gutenberg a introduit le bloc Forms dans la v1.22.0. Vous n’aurez pas à utiliser un plugin Contact Forms pour cela, il suffit d’insérer le bloc, de sélectionner les Variations, de les styliser et le tour est joué.

Les trois variations proposées sont explicites de par leur titre :

• Simple Contact Form
• Newsletter Form
• Suggestion Form

Voici quelques fonctionnalités clés que vous retrouverez :

• Nom/Texte
• Oui/Non (Basculer)
• Numéro de téléphone
• Courriel
• Sélectionnez une case
• Case à cocher
• Radiobox
• Zone de texte
• Numéro de téléphone
• URL
• Champ caché
• Date
• Bouton d’envoi

L’interface est très intuitive et permet de rechercher, ajouter ou retirer des éléments

Quelques informations générales à retenir pour ce bloc :

• Espace réservé : Vous pouvez insérer un caractère qui servira de marqueur pour chacun des éléments du champ.
• Nombre de lignes : Lorsque vous cliquez sur le champ Message, vous trouverez ce champ afin que le champ puisse être développé.
• Hidden Field Label (Étiquette de champ caché) : Dans le champ Bouton, ce champ ajoute une option permettant d’insérer une étiquette pour le champ caché.
• Style : Choisissez parmi les options Encadré/Souligné pour le bouton. Cette option est visible lorsque vous cliquez sur le champ du bouton.
• Alignement général : Permet d’aligner tous les champs à gauche/à droite/au centre. Disponible dans le champ du bouton
• Type de confirmation : Vous pouvez choisir d’afficher un message ou une URL vers laquelle vous souhaitez vous rediriger. Disponible dans le champ du bouton.

Du bouton d’envoi, en passant par les messages de réussite, aux erreurs d’envoi, tous les éléments sont personnalisables selon vos envies et vos besoins. Imposer un code couleur peut aider vos utilisateurs à comprendre si l’action entreprise sur votre formulaire a été un succès ou non.

 

Bloc des onglets

Le bloc d’onglets est l’une des fonctionnalités les plus demandées. Sans surprise on y retrouve des tonnes de personnalisations, de styles et d’options de mise en page qui permettent de créer des onglets en quelques clics seulement.

 

De la définition des styles de bordure, marge, remplissage pour l’en-tête à l’application des styles de mise en page verticaux et horizontaux pour mobile, bureau ou tablette, les options se présentant à vous sont nombreuses.

Le reste des fonctionnalités que vous trouverez :

• Sélectionnez une conception mobile Stack.
• Choisissez l’onglet à ouvrir à partir du paramètre Ouvrir l’onglet initial.
• Ajoutez une icône et modifiez le style des icônes dans l’en-tête de l’onglet.
• Définissez l’alignement de l’en-tête de l’onglet
• Personnalisez avec des styles de couleur de corps et de couleur de titre d’onglet.
• Fonction de positionnement et d’espacement des icônes
• Stylisation de l’ombre d’une boîte
• Ajoutez n’importe quel bloc enfant ou plusieurs blocs enfants dans le corps des onglets.

Pour définir le style de vos onglets, il vous suffit d’ouvrir le menu déroulant Réglages où vous pouvez sélectionner le style qui convient à votre ordinateur, à votre tablette ou à votre téléphone portable. Vous avez également la possibilité de choisir parmi 10 mises en page différentes, dont 5 horizontales et 5 verticales.

Une autre fonction intéressante se trouve dans “Tabs Title Settings”, vous pourrez gérer les titres de vos onglets et définir quel onglet s’ouvrira par défaut :

• Alignement : Cette option permet d’aligner le titre de l’en-tête dans les styles de présentation verticaux ou lorsque la largeur est suffisante dans les styles de présentation horizontaux.
• Activer l’icône : cette option active l’icône et affiche une autre section qui vous permet de sélectionner l’icône, sa couleur, sa taille, etc.
• Marge du titre de l’onglet et personnalisation du texte : Comme son nom l’indique, vous pouvez gérer la marge et l’espacement du titre de l’onglet ainsi que d’autres options de couleur et de typographie.

 

Publications Carrousel 

En ce qui concerne les publications, UAG propose d’afficher :

• Une grille de publications,
• En mode Masonry
• En mode Carrousel.

Ce dernier fournit des options pour présenter vos articles/pages avec une disposition en carrousel. Il offre une option pour sélectionner les types d’articles disponibles : articles, pages, médias ou tout autre contenu que vous avez. Il offre également des contrôles de taxonomie et des contrôles prédéfinis pour chaque partie du message comme l’image mise en avant, l’extrait, l’auteur, etc.

Fonctionnalités principales

• Possibilité de choisir le type de message (messages, pages, médias,) à afficher.
• Contrôle de la taxonomie comme la catégorie, les tags, etc.
• Contrôle total du carrousel
• Classement des articles par titre ou par date
• Position et taille de l’image principale
• Décidez du nombre d’articles par page
• Définissez les colonnes pour les appareils de bureau et les appareils réactifs
• Affichez/masquez les métadonnées des articles, comme l’auteur, la date, les commentaires, les extraits et les liens vers d’autres articles.
• Options de couleur et de typographie pour chaque partie du blog
• Options d’espacement pour la grille des articles

Contrôle total du carrousel

L’onglet carrousel offre beaucoup d’options très utiles telles que :

• Pause au survol
• Lecture automatique
• Boucle infinie
• Vitesse de transition
• Afficher les flèches et les points

Niveau présentation du contenu, l’option Contenu permet de bien gérer les différents éléments de manière à mettre en avant l’affichage du titre, de l’auteur, la date, les commentaires, l’extrait et le nombre de mots dans l’extrait à présenter à vos visiteurs. Sinon vous pouvez désactiver certaines de ces informations si vous le souhaitez.

 

Présentation de l’équipe et témoignages

Le bloc équipe d’Ultimate Addons for Gutenberg est assez simple, mais il offre un large panel d’outils pour personnaliser la typographie, l’image de la personne, les couleurs et l’espacement entre les éléments.

La simplicité du bloc et la possibilité d’ajouter des hyperliens vers vos réseaux sociaux sont très utiles pour renforcer votre présence sur la toile. Évidemment à chaque lien vous pourrez choisir de l’ouvrir dans un nouvel onglet.

Quant aux témoignages, cela vous permet de mettre en avant la satisfaction de vos clients. Le bloc de témoignages permet d’ajouter un certain nombre de références dans un joli slider.

Sélecteur d’images et positionnement des images

Une fois que vous avez sélectionné “Nombre de témoignages” dans l’onglet Général, vous avez la possibilité de choisir l’image pour chaque témoignage. Vous pouvez définir la photo du client, le logo de l’entreprise ou toute autre image appropriée pour un témoignage. Sous la balise Image, vous disposez d’une option d’image distincte pour chaque témoignage. Après avoir sélectionné toutes les images, vous trouverez les options détaillées suivantes

• Position de l’image : Choisissez la position de l’image en haut/en bas/gauche/droite.
• Style de l’image : Choisissez un style circulaire ou carré pour l’image.
• Taille de l’image : Choisissez une taille de vignette, moyenne ou grande.
• Largeur : Définissez la largeur de l’image en pixels.

Ajout du nom du client, de la société et de la description du témoignage

Le bloc témoignage permet d’ajouter un contenu de témoignage, le nom du client et le nom de l’entreprise avec l’image comme indiqué ci-dessus.

Contrôle total sur le carrousel

Le bloc affiche tous les témoignages dans un joli carrousel. Vous pouvez contrôler ce carrousel à l’aide de divers paramètres. Sous l’onglet Carrousel, vous disposez des options suivantes pour définir le carrousel en fonction de vos besoins.

• Pause au survol
• Lecture automatique
• Boucle infinie
• Vitesse de transition (ms)
• Taille de la flèche

Options de couleurs, de typographie et d’espacement pour chaque section

Les onglets Paramètres de couleur, Typographie et Espacement offrent des options distinctes pour le contenu, le nom, le nom de la société et l’image.

Style d’arrière-plan et de bordure

Vous disposez d’options distinctes pour définir l’arrière-plan et la bordure de chaque témoignage. L’arrière-plan peut être défini comme une image ou une couleur. Quant à la bordure, elle offre un certain nombre d’options de style et de couleur.

Support réactif

Ce bloc vous permet de sélectionner un certain nombre de colonnes pour le bureau, la tablette et le mobile. Sous l’onglet Général, vous obtiendrez des options pour sélectionner un nombre de témoignages et la façon dont vous souhaitez les afficher dans la colonne.

 

Chronologie de publications

Un des blocs phares de ce plugin est sans doute la chronologie des publications.

La chronologie est un excellent moyen de montrer les événements. Cela permet de choisir des extraits et de les afficher dans la chronologie. Ce bloc offre une option pour sélectionner les types de messages disponibles : messages, pages, médias ou tout autre élément que vous avez. Il permet de sélectionner les articles par catégorie/tag et de définir leur ordre. Il offre également des contrôles prédéfinis pour chaque partie du message comme l’image vedette, l’extrait, l’auteur, etc.

Fonctionnalités principales

• Option pour choisir le type de message (messages, pages, médias) à afficher.
• Contrôles de taxonomie pour les catégories et les balises
• Classer les articles par titre ou par date
• Mise en page (centre, gauche, droite)
• Position et taille de l’image en vedette
• Afficher/masquer les méta-matières des articles comme l’auteur, la date, le commentaire, l’extrait, le lien “Lire la suite”.
• Sélecteur d’icônes et personnalisation des connecteurs
• Options de couleur et de typographie pour chaque partie du blog
• Options d’espacement pour les articles

Choisir le type de message et définissez la taxonomie.

Sous l’onglet Requête, l’option Type de message permet de choisir tous les types de messages disponibles – messages, pages, médias ou tout autre CPT dont vous disposez. Les commandes de taxonomie permettent de choisir les articles en fonction des catégories ou des balises. L’option Ordre par permet de classer les articles par date ou par ordre alphabétique en fonction du titre.

Disposition (centre, gauche, droite)

La disposition de l’icône et d’une carte chronologique peut être définie sur Centre, Gauche, Droite à partir de Disposition > Orientation. L’alignement de la flèche peut être défini verticalement en haut, en bas ou au centre par rapport à la carte chronologique.

Position et taille de l’image principale

L’image principale peut être placée en haut du contenu du message ou en arrière-plan du contenu du message. Sous l’onglet Image, la position et la taille de l’image en vedette peuvent être gérées.

Afficher/masquer les méta de l’article

Sous l’onglet Contenu, les options sont disponibles pour masquer les paramètres de méta de l’article comme l’auteur, la date, le commentaire, l’extrait, le lien Lire plus.

Sélecteur d’icônes et personnalisation des connecteurs

L’icône de l’élément de la chronologie peut être définie dans l’onglet Connecteur. Vous pouvez choisir parmi environ 1400 icônes. Il est également possible de gérer la taille de l’icône.

Le connecteur comprend l’icône, son arrière-plan, sa bordure et une ligne qui relie deux icônes. Sous l’onglet Connecteur, vous avez la possibilité de sélectionner l’icône, la taille de son arrière-plan, la largeur de la bordure autour de l’arrière-plan de l’icône et la largeur du connecteur.

L’onglet Connecteur (Paramètres de couleur du connecteur) propose deux sous-onglets pour les couleurs Normal et Focus pour l’icône, la bordure et les couleurs d’arrière-plan.

Option de couleur et de typographie pour chaque partie du blog

Sous l’onglet Paramètres des éléments de la ligne de temps et des couleurs, des options de taille et de couleurs de police sont disponibles.

Options d’espacement pour les articles

L’espace peut être géré pour les éléments de la timeline à partir de l’onglet Espacement.

Sous l’onglet Mise en page, en fonction de la mise en page, vous pouvez choisir d’empiler les éléments de la chronologie sur les appareils avec l’option Empiler sur.

P.S. Pour les types de messages personnalisés, assurez-vous que le paramètre “show_in_rest” est défini sur “true”. Tant pour les types de messages personnalisés que pour les taxonomies personnalisées.

 

Liste des prix

Si vous avez un e-commerce et souhaitez présenter vos articles de manière attractive, le bloc liste des prix est un outil intéressant !

Fonctionnalités principales :

• Mise en page des colonnes
• Sélection et positionnement des images
• Espacement
• Couleurs et options de typographie
• Séparateur
• Options appareils

Disposition des colonnes

Sous l’onglet Général, choisissez “Nombre d’éléments”. Tous les éléments peuvent être affichés dans un certain nombre de colonnes. Choisissez un nombre de colonnes pour le bureau, la tablette et le mobile.

Sélecteur d’image et position

Vous pouvez choisir l’image pour chaque élément dans l’onglet Image. Les options suivantes sont disponibles pour contrôler l’image.

• Position de l’image : La position de l’image peut être définie en haut, à droite ou à gauche du contenu.
• Alignement vertical : Si l’image est placée à gauche ou à droite du contenu, vous pouvez gérer sa position verticale par rapport au reste du contenu.
• Empiler sur : Choisissez à quel point de rupture les images seront empilées avec le reste du contenu.
• Taille de l’image : Choisissez la taille de l’image : vignette, moyenne ou grande.
• Largeur : Définissez manuellement la largeur de l’image en px.

Séparateur

Un séparateur est une ligne qui apparaît au bas de chaque élément. Sous l’onglet Séparateur, vous pouvez sélectionner son style, son épaisseur, sa largeur et sa couleur.

Options de couleurs et de typographie

Des options de couleurs et de typographie sont disponibles pour le nom, la description et le prix des articles.

Espacement

Diverses options sont disponibles sous l’onglet Espacement. L’espacement peut être géré pour une ligne, une colonne, un titre, une image et un article entier.

Options appareils

Ce bloc gère les colonnes sur les appareils responsives. Il superpose également l’image au reste du contenu sur les dispositifs réactifs.

 

Conclusion

Le plugin Ultimate Addons for Gutenberg propose des blocs bien axés sur le SEO. Il offre très souvent un panneau de personnalisation pour un style de bloc plus poussé et gère bien les colonnes. UAG dispose d’une fonctionnalité intéressante permettant d’opter pour le style par défaut du plugin pour certains blocs ou d’hériter du style du thème WordPress actif en un clic. Enfin ce plugin contient un bon nombre de blocs pour créer des grilles d’articles et des listes.

Il y a encore beaucoup d’autres blocs à explorer, mais après lecture de cet article je pense que vous avez compris qu’avec Gutenberg Blocks vous pouvez accomplir beaucoup de choses. Je vous ai présenté les éléments, qui à mon sens, sont une valeur ajoutée et font la force du plugin.

En bref, ce plugin est un excellent choix pour vous aider à concevoir un site web tout à fait fonctionnel. Je le recommande fortement et si vous avez des suggestions ou commentaires, n’hésitez pas à les partager avec nous !