Blocs WordPress : qu'est-ce qu'ils sont et comment les utiliser

WordPress a transformé la façon dont les utilisateurs créent et gèrent du contenu, et les blocs WordPress jouent un rôle important dans cette évolution.

Avec l’introduction de l’éditeur Gutenberg, les blocs sont devenus les éléments de construction essentiels pour la conception d’articles, de pages et de sites entiers.

La version actuelle de WordPress comprend plus de 90 blocs par défaut. Ils incluent du texte, des médias, des widgets, des éléments de thème et des intégrations.

Dans cet article, nous examinerons les blocs WordPress, notamment pourquoi ils sont utiles, les différents types de blocs disponibles et comment les utiliser. Nous examinerons également certains des plugins de blocs WordPress les plus populaires qui offrent des blocs de contenu supplémentaires, des fonctionnalités de personnalisation et des modèles de mise en page pour vous aider dans votre conception.

Commençons donc par un rapide aperçu des blocs WordPress.

Que sont les blocs WordPress ?

Les blocs WordPress sont les éléments de construction essentiels de l’éditeur de blocs WordPress, également connu sous le nom de Gutenberg. Les blocs vous permettent d'ajouter et de structurer du contenu sur vos publications et pages. Chaque section de contenu (un paragraphe, une image, une vidéo ou une galerie) est un bloc distinct qui peut être déplacé, modifié et personnalisé indépendamment. Ce système rend la création de contenu beaucoup plus flexible par rapport à l'éditeur classique.

Les blocs fournissent également une interface visuelle pour interagir avec votre contenu. Vous pouvez voir vos modifications en temps réel, ce qui vous permet de conserver une mise en page cohérente. Cette approche modulaire est au cœur de l’expérience WordPress actuelle, la rendant accessible à tous les utilisateurs.

Pourquoi utiliser les blocs WordPress ?

L'ancien éditeur WordPress était un éditeur de texte basé sur TinyMCE. L'interface était très similaire à celle d'un éditeur de texte, sans éléments visuels pour les aperçus de page ou de publication.

D’autre part, les blocs de contenu permettent de modifier la mise en page de la page et d’inclure facilement divers éléments visuels et interactifs, ce qui n’était pas possible avec l’ancien éditeur classique.

De plus, les blocs ont facilité plusieurs tâches. Par exemple, l'intégration de médias externes, comme des vidéos YouTube, est désormais aussi simple que d'ajouter le bon bloc au contenu et de coller l'URL.

Auparavant, une telle personnalisation du contenu pouvait nécessiter l'utilisation de code HTML supplémentaire.

De plus, le modèle de bloc synchronisé vous permet d'enregistrer un bloc pré-personnalisé pour une utilisation future, éliminant ainsi le besoin de créer le contenu à partir de zéro.

L'autre option consiste à utiliser des modèles de blocs réguliers ou non synchronisés, qui sont des dispositions de blocs prédéfinies adaptées à diverses utilisations.

De plus, un thème WordPress basé sur des blocs vous permet également de personnaliser des modèles à l'aide de l'éditeur de blocs et de l'interface de styles globaux. Il facilite la personnalisation des modèles ou même de la mise en page complète du site en réorganisant simplement les blocs de contenu.

Dans l’ensemble, le nouvel éditeur WordPress améliore l’expérience utilisateur pour l’édition de contenu.

Quels types de blocs WordPress sont disponibles dans l’éditeur de blocs ?

La dernière version de WordPress contient environ 90+ blocs, regroupés en six catégories : texte, média, design, widgets, thème et intégrations.

Jetons un coup d'œil à quelques blocs de l'éditeur de blocs WordPress.

Blocs de texte

Les blocs de texte sont essentiels à la création de contenu écrit sur votre site Web. Les blocs de texte les plus courants incluent :

• Bloc de paragraphe : il s'agit du bloc le plus largement utilisé pour ajouter et formater du contenu textuel.
• Bloc de titre : permet d'insérer des titres (H1, H2, H3, etc.) pour structurer logiquement votre contenu.
• Bloc de liste : idéal pour créer des listes à puces ou numérotées pour décomposer les informations.
• Bloc de citation : vous permet d'insérer des citations ou des témoignages, mettant en évidence les points clés de votre contenu.
• Bloc de code : utile pour afficher des extraits de code avec un formatage approprié.
• Bloc de table : créez du contenu structuré en lignes et en colonnes pour afficher des informations.
• Et plus encore.

Blocs multimédias

Les blocs multimédias vous permettent de télécharger des fichiers vers la médiathèque et de les intégrer dans votre contenu. Ceux-ci incluent :

• Bloc d'image : ajoutez et personnalisez des images, y compris des légendes et du texte alternatif pour le référencement.
• Bloc vidéo : insérez des vidéos directement ou intégrez-les à partir de sources externes comme YouTube.
• Bloc Galerie : affichez plusieurs images dans un format de grille, parfait pour créer une riche galerie.
• Bloc audio : téléchargez et partagez des fichiers audio, ce qui est idéal pour les podcasts ou les sites de musique.
• Blocage de fichiers : incluez des fichiers téléchargeables, tels que des fichiers PDF ou des documents Word, dans votre contenu.
• Et plus encore.

Blocs de conception

Les blocs de conception aident à améliorer la présentation visuelle de vos articles et pages. Ils offrent des options pour structurer et styliser le contenu, notamment :

• Bloc de colonnes : créez des mises en page multi-colonnes pour diviser le contenu en sections, améliorant ainsi la lisibilité.
• Bloc d'espacement : ajoutez un espace vide entre les éléments, créant ainsi un aspect plus propre et plus organisé.
• Bloc de boutons : insérez des boutons personnalisables pour les appels à l'action, dirigeant les utilisateurs vers d'autres pages ou actions.
• Bloc séparateur : ajoutez des lignes horizontales pour diviser visuellement les différentes sections de votre contenu.
• Bloc de groupe : combinez plusieurs blocs en un seul groupe pour une meilleure gestion de la mise en page.
• Et plus encore.

Blocs de widgets

Les blocs de widgets vous permettent d'insérer du contenu dynamique sur votre site, notamment :

• Bloc de shortcode : utilisez des codes courts de plugins ou de fonctions personnalisées pour améliorer votre contenu.
• Bloc des dernières publications : affichez une liste de vos publications récentes, améliorant ainsi les liens internes et la navigation.
• Bloc calendrier : ajoutez une vue calendrier à votre site, ce qui est idéal pour les blogs axés sur les événements.
• Bloc HTML personnalisé : ajoutez du code HTML personnalisé et prévisualisez-le au fur et à mesure que vous le modifiez.
• Bloc d'icônes sociales : affichez des icônes renvoyant à vos profils ou sites sociaux.
• Et plus encore.

Blocs thématiques

Les blocs thématiques sont utilisés pour ajouter et gérer du contenu lié à la présentation générale de votre site. Les exemples incluent :

• Bloc de logo du site : affichez le logo de votre site Web dans n'importe quelle publication ou page.
• Bloc de navigation : ajoutez un menu ou des liens de navigation directement dans votre zone de contenu.
• Bloc de titre : affichez le titre d'un article, d'une page ou de tout autre type de contenu.
• Bloc d'auteur : affichez les détails de l'auteur de la publication, tels que le nom, l'avatar et la biographie.
• Bloc de requête : il vous permet d'afficher les types de publications en fonction de différents paramètres de requête.
• Et plus encore.

Incorpore des blocs

Les blocs d'intégration facilitent l'intégration de contenus externes tels que des publications sur les réseaux sociaux, des vidéos et des podcasts. WordPress prend en charge un large éventail d'intégrations :

• Bloc YouTube : intégrez des vidéos YouTube directement dans votre contenu avec une simple URL.
• Blocage Twitter : affichez les tweets ou des fils de discussion Twitter entiers en collant l'URL du tweet.
• Bloc Spotify : intégrez des listes de lecture, des albums ou des chansons de Spotify pour améliorer le contenu multimédia.
• Bloc Pinterest : vous permet d'intégrer des épingles, des tableaux et des profils Pinterest.
• Et plus encore.

Comment utiliser les blocs WordPress

Maintenant que vous savez ce que sont les blocs WordPress, voyons comment vous pouvez les utiliser pour concevoir votre site Web.

Comment ajouter un bloc WordPress

Pour ajouter un nouveau bloc, cliquez sur l'une des icônes plus (+) dans l'interface pour ouvrir l'outil d'insertion de blocs. Ensuite, recherchez et sélectionnez le bloc que vous souhaitez ajouter.

Pour ouvrir l'outil d'insertion de blocs complets, cliquez sur l'icône plus (+) dans la barre d'outils principale. Sélectionnez ensuite un bloc. Lorsque vous survolez un bloc, vous verrez un aperçu de ce à quoi il peut ressembler.

De plus, vous pouvez également survoler une zone particulière de votre contenu et cliquer sur l'icône plus (+) pour obtenir une interface d'insertion de blocs plus petite. Si vous utilisez cette méthode pour sélectionner un bloc, il sera inséré automatiquement dans la zone où vous avez cliqué sur l'icône.

Comment personnaliser un bloc WordPress

Pour personnaliser un bloc, cliquez simplement dessus pour le sélectionner. Si vous ne parvenez pas à trouver le bloc approprié, ouvrez la vue liste et sélectionnez-le dans la liste (plus d'informations à ce sujet dans la section suivante).

Après avoir sélectionné le bloc, vous disposez de deux options principales pour le personnaliser. Premièrement, de nombreux blocs proposeront des options de base sur leur barre d’outils flottante. En règle générale, vous pouvez ajouter une mise en forme du texte, ajuster son alignement et apporter d'autres modifications de base.

Ensuite, pour accéder à des paramètres plus avancés, utilisez les paramètres de blocage dans la barre latérale droite. Ces paramètres seront uniques à chaque bloc, vous donnant un contrôle total sur son fonctionnement.

Par exemple, le bloc de paragraphe propose des options pour personnaliser la couleur, la typographie, la marge et le remplissage, ainsi que d'autres éléments de conception.

Comment utiliser la vue Liste pour sélectionner des blocs

En général, vous pouvez sélectionner un bloc en cliquant simplement dessus. Cependant, il peut arriver qu’il soit difficile de sélectionner le bloc exact souhaité. Cela est particulièrement vrai avec les blocs Colonnes et Groupe, dont nous parlerons plus tard.

Pour résoudre ce problème, utilisez la List View de l'éditeur de blocs. Lorsque vous ouvrez la vue liste, elle affichera une liste de tous les blocs de votre message dans l’ordre dans lequel ils apparaissent.

Pour sélectionner un bloc, cliquez dessus dans la liste.

Comment réorganiser les blocs WordPress

Lorsqu’il s’agit de réorganiser les blocs WordPress, vous avez deux options.

Tout d’abord, si vous devez déplacer un bloc de quelques positions vers le haut ou vers le bas, sélectionnez-le, puis cliquez sur la flèche vers le haut ou vers le bas, comme le montre l’image ci-dessous.

Deuxièmement, si vous avez besoin de plus de contrôle, vous pouvez utiliser la fonctionnalité glisser-déposer pour déplacer le bloc n'importe où sur votre page. Pour l'utiliser, sélectionnez le bloc et cliquez avec votre curseur sur l'icône à six points (comme le montre l'image ci-dessus).

Ensuite, déplacez le bloc vers son nouvel emplacement. Pour vous aider à vous assurer que vous êtes dans la bonne zone, une ligne bleue apparaîtra à l'endroit où le bloc se déplacerait si vous relâchez votre souris.

Vous pouvez également utiliser la vue liste pour réorganiser les blocs.

Comment sélectionner plusieurs blocs

Dans certains cas, vous souhaiterez peut-être choisir plusieurs blocs. Ceci est particulièrement utile si vous souhaitez organiser de nombreux blocs en utilisant les méthodes répertoriées ci-dessus.

Pour sélectionner plusieurs blocs, cliquez dessus et faites-les glisser, tout comme vous sélectionnez plusieurs paragraphes dans un document texte.

Même pour plus de contrôle, vous pouvez également utiliser la vue liste pour sélectionner plusieurs blocs pour un contrôle supplémentaire. Pour ce faire, cliquez simplement sur le premier bloc que vous souhaitez sélectionner. Après cela, maintenez Shift sur votre clavier et cliquez sur le dernier bloc à choisir. Tous les blocs entre le premier et le dernier seront automatiquement sélectionnés.

Comment mettre les blocs WordPress côte à côte dans des colonnes

Mettre des blocs côte à côte est très simple, et vous pouvez le faire en utilisant le bloc Colonnes.

Pour ce faire, cliquez simplement sur l'icône plus (+) , puis recherchez le bloc Colonnes et ajoutez-le à l'éditeur. Lorsque vous ajoutez le bloc, il vous sera demandé de sélectionner la structure de colonnes souhaitée. Par exemple, vous pouvez utiliser deux colonnes de taille similaire ou agrandir une colonne par rapport à l’autre. Vous pouvez également utiliser plus de deux colonnes.

Après avoir configuré la structure des colonnes, vous remarquerez des icônes plus (+) dans chaque colonne. Vous pouvez utiliser ces icônes pour ajouter du contenu directement à chaque colonne, vous permettant ainsi de le mettre côte à côte.

Si vous devez modifier la disposition des colonnes à l'avenir, vous pouvez facilement le faire en modifiant les paramètres du bloc de colonnes principal.

Comment regrouper les blocs WordPress ensemble

Regrouper des blocs peut être utile dans certains cas, par exemple lors de l'application de la même couleur d'arrière-plan à plusieurs blocs.

Vous pouvez le faire en utilisant le bloc Groupe.

Ajoutez simplement un nouveau bloc Groupe à l'éditeur WordPress Gutenberg. Ensuite, cliquez sur l'icône plus (+) dans le bloc Groupe pour ajouter d'autres blocs de contenu à ce groupe.

Si vous modifiez les paramètres du bloc principal du groupe, comme l'ajout d'un arrière-plan de couleur, cela affectera tous les blocs du groupe. Vous pouvez également déplacer le bloc Groupe. Tous les autres blocs resteront à l’intérieur.

Quelques meilleurs plugins de bloc WordPress

L'installation d'un plugin WordPress est un excellent moyen d'ajouter de nombreuses autres options de blocage à l'éditeur WordPress.

Il existe plusieurs plugins WordPress qui peuvent être utilisés pour ajouter davantage de blocs de contenu, d'options de personnalisation et même de modèles de mise en page à la bibliothèque de blocs.

Voici quelques-uns des meilleurs plugins de bloc pour WordPress.

1. Blocs Genèse

Genesis Blocks est un plugin Gutenberg gratuit qui contient un certain nombre de blocs WordPress personnalisés.

Il comporte 14 blocs de base Gutenberg, quatre mises en page prédéfinies et huit sections de page prédéfinies.

Certains des blocs de la bibliothèque incluent :

• Bloc de colonnes avancées
• Bloc Newsletter
• Bloc de tarification
• Bloc de témoignage
• Bloc accordéon
• Et plus

Genesis Blocks propose une version payante, Genesis Pro, qui comprend plus de blocs, 26 mises en page pleine page prédéfinies, 56 sections prédéfinies et d'autres fonctionnalités. C'est le choix ultime pour créer un site Web époustouflant et fonctionnel en un rien de temps.

Genesis Blocks appartient à WP Engine, l'une des sociétés d'hébergement WordPress gérées les plus populaires. Ils fournissent également des thèmes StudioPress de haute qualité qui fonctionnent parfaitement avec le plugin Genesis Blocks.

Tarif :

Une version gratuite est disponible. La version pro coûte 30 $/mois.

Obtenez des blocs Genesis

2. Spectres

Spectra, anciennement connu sous le nom d'Ultimate Addon for Gutenberg, est le plugin de bibliothèque de blocs Gutenberg le plus populaire.

Ce plugin, créé par les mêmes développeurs qui ont créé le thème populaire Astra, est actuellement installé sur plus de 900 000 sites.

Il contient plus de 30 blocs Gutenberg, dont les suivants :

• Bloc curseur
• Bloc de compteur
• Bloc de classement par étoiles
• Blocage des FAQ
• Bloc de boîte d'informations
• Et plus

L’un des avantages de l’utilisation de ce plugin est qu’il prend en charge le thème Astra, ainsi que tous ses sites de démarrage et kits de modèles. En conséquence, vous pouvez importer un site de démarrage et utiliser l'éditeur de blocs pour concevoir de superbes mises en page.

Tarif :

Une version gratuite est disponible. La version pro commence à 49 $/an ou 199 $ pour une licence à vie d'un seul site.

Obtenez des spectres

3. Blocs Kadence

Kadence Blocks est un autre excellent plugin de bloc WordPress. Il comprend certains des blocs les plus utilisés et vous permet d'ajouter des fonctionnalités supplémentaires à votre éditeur de contenu.

Le plugin est disponible en versions gratuite et payante. La version gratuite est livrée avec 23 blocs personnalisés, dont les suivants :

• Bloc accordéon
• Bloc de boutons avancé
• Bloc Galerie avancé
• Bloc de compte à rebours
• Bloc Table des matières
• Et plus

Le plugin vous permet de désactiver tous les blocs dont vous n'aurez pas besoin, gardant ainsi votre éditeur propre et léger.

Il propose également une bibliothèque de conception, qui contient une bibliothèque de modèles de blocs et de mises en page pleine page que vous pouvez utiliser pour personnaliser n'importe quelle publication ou page.

Si vous appréciez ces blocs et souhaitez en savoir plus sur Kadence Themes, vous pouvez acheter leur plugin professionnel ou leur plan d'adhésion.

Tarif :

Une version gratuite est disponible. La version pro commence à 149 $/an.

Obtenez des blocs Kadence

Conclusion

L'éditeur Gutenberg est construit sur des blocs WordPress, qui offrent un moyen flexible de créer et de gérer du contenu. Vous pouvez facilement créer des pages d'aspect professionnel en utilisant un certain nombre de types de blocs, notamment du texte, des médias, des widgets et des intégrations. Grâce à leur nature configurable, l’utilisation de blocs améliore également le référencement et l’expérience utilisateur.

De plus, pour plus de blocs et de fonctionnalités, pensez à utiliser les plugins de blocs pour débloquer de nouvelles possibilités de conception.

Expérimentez avec différents blocs et plugins pour voir ce qui fonctionne le mieux pour votre site. En connaissant les blocs WordPress, vous pouvez créer un contenu convaincant et dynamique qui se démarque.

Maintenant, ouvrez votre éditeur WordPress et découvrez les possibilités illimitées qu'offrent les blocs !

Pour en savoir plus, consultez ces autres ressources utiles :

• 12 meilleurs thèmes de blocs WordPress pour l'édition complète du site
• Comparaison Elementor vs Gutenberg : quel est le meilleur ?
• Meilleurs constructeurs de pages WordPress pour 2024 : top 13 comparés

Enfin, suivez-nous sur Facebook et Twitter pour rester informé des derniers articles liés à WordPress et aux blogs.