Meilleurs blocs WordPress originaux [Aperçu rapide]

Nous vous apportons un guide sur la façon d'utiliser l'éditeur et les blocs Gutenberg WordPress. Veuillez lire les nouvelles sur les changements de blocs qui arrivent dans la toute prochaine version 5.4. Nous avons sélectionné tous les blocs les plus utilisés qui doivent être utilisés sur n'importe quel site Web. Une fois publié, nous publierons plus de détails sur toutes les fonctionnalités.

Lorsque WordPress a annoncé le nouvel éditeur Gutenberg en 2018, nous en étions ravis. Maintenant, quelques années plus tard, nous constatons une énorme amélioration. L'éditeur Gutenberg WordPress est un excellent outil pour créer un site Web.

Tous ces blocs WordPress standard pour l'éditeur Gutenberg sont entièrement fonctionnels dans notre dernier projet Gratuit Citadela Thème WordPress. Vous pouvez l'utiliser sur n'importe quel site Web, s'il vous plaît créer un compte et téléchargez-le gratuitement.

Avec Plugins AitThemes Citadela, vous pouvez créer un contenu spécifique pour une présentation d'entreprise, d'entreprise, de blog ou de site Web à but non lucratif. Ou même démarrer une nouvelle activité en ligne. La vitesse du site Web et la facilité d'édition du site Web sont les facteurs les plus importants.

Qu'est-ce qu'un bloc ?

Les blocs Gutenberg WordPress sont des unités de construction du site Web. Chacun d'eux a sa propre place et son propre but. Il est très important d'utiliser le bon bloc WordPress pour un certain type de contenu.

Mais comment trouvez-vous le bloc le plus approprié qui correspond à votre intention ?

Pour vous aider à mieux comprendre les blocs WordPress, nous avons préparé cet aperçu des plus populaires.

Blocs de contenu textuel

Il existe plusieurs blocs que vous pouvez utiliser pour insérer du contenu textuel sur votre site Web. Vous pouvez utiliser plusieurs blocs. À partir de WordPress 5.4, il y a un nouveau paramètre, vous pouvez changer la couleur du texte.

• Paragraphe
• Titre
• Citation
• Liste
• Pullquote
• Tableau
• Verset
• Préformaté

Sauf cela, vous utilisez le bloc Classic qui peut être plus pratique pour un long paragraphe.

Bloc de boutons

Créer un bouton CTA convaincant dans WordPress est devenu super facile avec le bloc de boutons. Vous n'avez pas besoin d'entrer un CSS personnalisé ou de comprendre le HTML. Vous pouvez – mais vous n'êtes pas obligé – saisir le code hexadécimal de votre couleur préférée pour que le bouton soit beau et accrocheur.

Où utiliser le bloc de boutons ?

Une fois que le visiteur Web arrive sur votre site Web, vous voulez l'encourager à agir. C'est à cela que servent les boutons CTA.

En général, il y a 3 endroits où vous devez utiliser le bloc WordPress Button :

• Page d'accueil - pour effectuer une action qui vous permettra d'atteindre votre objectif, comme vous inscrire à la newsletter, découvrir une offre spéciale ou vous inscrire pour un essai gratuit.
• Page produit - selon la manière dont votre page produit est dirigée, il peut y avoir 1 bouton CTA (ACHETER) ou plusieurs boutons, par exemple les détails du produit, acheter, ajouter à la liste de souhaits, etc.
• Blog – Les boutons CTA peuvent faire référence à un autre article utile ou à l'achat de votre produit/service.

Paramètres du bloc de boutons

Dans Inspector, sur le côté droit, vous pouvez facilement gérer les paramètres de votre bouton :

• Style
• Couleur de l'arrière plan
• Couleur de la police
• Frontière

Le texte écrit dans votre bouton CTA doit être court et simple, encourageant l'action que vous souhaitez que vos visiteurs Web entreprennent.

Nouvelles à venir dans la prochaine version de WordPress 5.4 (sortie le 31 mars 2020)

Le bloc de boutons va être remplacé par un nouveau boutons bloc.
Vous pouvez supposer à partir du nouveau nom que vous pourrez créer plus de boutons à côté un par un dans un conteneur de blocs. Il est souvent nécessaire de créer deux CTA à la fois, par exemple : Acheter maintenant et Lire la suite. En outre, de nouveaux paramètres de style et de couleur sont à venir. Choisissez le style de remplissage ou de contour, puis la couleur de l'arrière-plan. Vous pouvez choisir un arrière-plan uni ou dégradé. Certains préréglages comme point de départ seront disponibles pour un réglage plus facile. La bonne nouvelle est que tous les blocs de boutons existants fonctionneront et qu'il n'est pas nécessaire de les migrer.

Bloc de colonnes

Le bloc de colonnes est un bloc WordPress incroyable qui ouvre les portes à de nouvelles mises en page. Il vous offre plus d'options d'agencement des éléments de page, ce qui se traduit par davantage d'alternatives de conception.

Travailler avec le bloc Colonnes est facile :

• Aucune installation de plug-in supplémentaire.
• Aucun codage requis.
• Tout ce dont vous avez besoin est un peu de sens pour un design soigné.

Par rapport aux tracas précédents que vous deviez traverser avant la sortie de l'éditeur de blocs WordPress, il est très simple d'utiliser le bloc Colonnes WordPress.

Comment utiliser le bloc Colonnes ?

Comme indiqué ci-dessus, il existe 2 façons d'utiliser le bloc Colonnes :

• Pour organiser le flux de vos textes (dans un article de blog ou sur la page habituelle).
• Pour organiser d'autres blocs en colonnes.

Lorsque vous organisez du texte en colonnes, par exemple dans un article de blog, vous augmentez la lisibilité et rendez votre site Web plus transparent et convivial.

Cependant, lorsque vous utilisez le bloc Colonnes pour imbriquer d'autres blocs, tels que des images, des textes et des boutons, vous modifiez toute la mise en page de la page que vous avez choisie et créez de nouveaux modèles.

Paramètres du bloc de colonnes

Après avoir inséré un bloc Colonne sur la page, choisissez le nombre de colonnes que vous souhaitez. Il peut s'agir de n'importe quel montant de 2 à 6 colonnes. Ensuite, vous pouvez commencer à taper votre texte ou à ajouter des blocs dans chaque colonne.

L'alignement du contenu de votre bloc de colonnes peut être défini séparément pour l'ensemble du bloc ainsi que pour des colonnes individuelles. Vous pouvez même choisir la proportion de la largeur de la colonne. De cette façon, une colonne peut être plus large qu'une autre.

Bloc de couverture

Parlons de l'en-tête de votre site Web. C'est une section qui définit la première impression quand quelqu'un vient sur votre page d'accueil. Un peu important, n'est-ce pas ? Et saviez-vous que le bloc Couverture peut être utilisé comme en-tête sur n'importe laquelle de vos pages ?

Cover est le cœur des blocs WordPress qui vous aide à impressionner vos visiteurs Web. Surtout lorsqu'il est utilisé correctement, ou mieux, lorsqu'il est parfaitement intégré à votre conception Web.

Où utiliser le bloc Cover ?

Comme mentionné ci-dessus, le bloc de couverture peut être utilisé sur n'importe laquelle de vos pages. De plus, il peut être ajouté n'importe où sur la page, contrairement à l'en-tête de votre site Web qui est fixé en haut de votre site Web.

Le bloc de couverture peut être utilisé comme :

• En-tête de n'importe quelle page, y compris la page d'accueil.
• Image ou vidéo écrasée par le texte utilisé sur la page du produit.
• Séparateur de contenu dans l'article de blog.

Paramètres du bloc de couverture

La configuration de votre bloc de couverture est très simple. Tout d'abord, choisissez une image ou une vidéo comme arrière-plan. Vous pouvez également utiliser une seule couleur à la place. Lorsque vous avez défini votre arrière-plan, ajoutez un titre et un sous-titre. 

Vous pouvez choisir l'alignement du bloc et, bien sûr, l'alignement du texte à l'intérieur.

L'alignement du bloc de couverture offre les options suivantes :

• Alignez à gauche
• Aligner le centre
• Aligner à droite
• Grande largeur
• Pleine largeur

Mon préféré est la superposition de couleurs disponible dans l'inspecteur - l'image d'arrière-plan du bloc de couverture peut être teintée de la couleur de votre choix. Avec la taille et la couleur de police personnalisées, vous pouvez créer de beaux contrastes et l'aspect final de votre bloc de couverture sera étonnant.

À partir de WordPress 5.4, vous pouvez choisir le fond dégradé au lieu d'un fond uni.

Bloc Galerie

Présentez des images sur votre site Web à l'aide du bloc Galerie. Ce bloc WordPress standard a été conçu pour contenir vos images et les afficher joliment sur n'importe quelle page de votre site Web. Comme pour les autres blocs WordPress, le bloc Galerie peut être positionné n'importe où sur le site Web ou dans l'article de blog.

Le téléchargement de vos images peut être effectué en choisissant des fichiers dans la médiathèque, depuis votre ordinateur ou en utilisant la fonction glisser-déposer.

Où utiliser le bloc Galerie ?

Selon le type de votre site Web, vous souhaiterez peut-être créer une galerie de photos complexe ou une simple présentation d'images. Vous pouvez utiliser le bloc Galerie sur :

• Votre page d'accueil
• Sous-pages individuelles créées en tant qu'albums de votre galerie de photos
• Fiches produits
• Article de blog

Paramètres du bloc Galerie

Outre les différentes options d'alignement du bloc Galerie lui-même, il existe quelques options intéressantes dans ce bloc, telles que :

• Nombre de colonnes dans lesquelles les images sont alignées.
• Recadrage de l'image pour correspondre à la même taille (de la plus petite image).
• Lien hypertexte pour vous donner la possibilité de créer un lien vers une autre page ou un autre fichier multimédia.

Bloc d'images

Le bloc d'image n'est rien d'autre que le bloc pour afficher une image sur votre site Web.

C'est exact. Si vous souhaitez simplement ajouter une image à l'une de vos pages, vous devez utiliser le bloc Image WordPress. Il peut être similaire aux autres blocs présentés, mais il existe des différences significatives qui le rendent parfait pour les images uniques.

Quand utiliser le bloc Image ?

Le bloc d'image doit être utilisé en particulier lorsque l'objet affiché sur l'image est particulièrement important pour votre visiteur Web que vous souhaitez :

• Attirez l'attention du visiteur Web avec une image spécifique.
• Afficher l'image avec légende.
• Affichez des infographies qui aident les visiteurs à mieux comprendre le sujet abordé.

Paramètres du bloc d'images

L'un des plus grands avantages du bloc Image WordPress est ses options de taille d'image. Vous pouvez facilement redimensionner une image en la tirant par son coin, choisir une taille fixe en pixels ou définir la taille en pourcentage.

Une autre option importante est les champs de saisie pour le texte alternatif, la légende et le lien. Je recommande fortement d'utiliser ces champs car ils jouent un rôle important dans le référencement sur la page.

Média et bloc de texte

Passons à des mises en page plus avancées que vous pouvez créer à l'aide du bloc Média et texte. Ce bloc principal de WordPress vous permet de combiner des médias et du texte côte à côte, d'une manière esthétique et contextuelle.

Où utiliser le bloc média et texte ?

Bien que le bloc Média et texte soit le plus approprié pour une utilisation dans les articles de blog, avec un peu d'imagination, vous pouvez également l'utiliser ailleurs. Par exemple, vous pouvez créer un bel aperçu du produit ou du service en utilisant une image et du texte côte à côte.

N'oubliez pas d'ajouter un bloc Bouton à la section de texte du bloc Médias et texte, s'il est utilisé comme aperçu du produit/service. De cette façon, vous pouvez concevoir une belle section CTA sur n'importe quelle page.

Avantages des médias et du bloc de texte

• Rassembler l'image et le texte qui correspondent contextuellement les uns aux autres.
• Éviter les erreurs d'image dans le blogpost.
• Aide à la réactivité du site (utilisez la fonction "Stack on mobile").

Paramètres des médias et des blocs de texte

Lorsque vous regardez le réglage du bloc Média et texte, vous remarquerez plusieurs options d'alignement, certaines d'entre elles sont uniques, par rapport à la plupart des autres blocs.

Le réglage intéressant et utile de ce bloc est la couleur d'arrière-plan. En colorant la zone autour de l'image et du texte qui s'emboîtent, vous pouvez visuellement mettre en évidence leur connexion.

Insérer un lien depuis WordPress version 5.4 (31.3.2020). Vous pouvez choisir entre un lien, un fichier multimédia ou une page de pièce jointe.

Bloc de tableau

Le bloc de table est l'un des exemples de l'amélioration de WordPress après l'introduction de l'éditeur de blocs WordPress dans la version 5.0 et au-delà. Alors qu'auparavant vous aviez besoin d'un plugin pour insérer une table dans votre site Web WordPress, vous pouvez maintenant simplement utiliser le bloc Table.

Où utiliser le bloc de table ?

Les tableaux jouent un rôle énorme en fournissant un contenu utile de manière bien organisée et transparente. Certes, la plupart des sites Web ont utilisé des tableaux. Voici quelques exemples d'utilisation de tableaux sur différents sites Web :

• Comparaison des données
• Tableaux de prix
• Détails techniques du produit
• Recettes
• Aperçu des forfaits d'adhésion

Avoir le bloc Table dans le cadre du noyau WordPress gratuit est vraiment incroyable.

Paramètres de bloc de tableau

Lorsque vous insérez un bloc Tableau dans la page, vous devez définir un certain nombre de colonnes et de lignes de votre tableau. Ne vous inquiétez pas, ce nombre n'est pas fixe. Vous pouvez ajouter plus de lignes et de colonnes (ou les supprimer) à tout moment.

Ensuite, choisissez un style de votre tableau : défaut ou rayures. Passez à l'alignement et au style de police et enfin, remplissez votre tableau avant d'y ajouter une touche finale.

Plus d'options incluent:

• Couleur de l'arrière plan
• Cellules à largeur fixe
• Entête
• Bas de page
• Lien (une entrée de texte dans un tableau peut créer un lien vers d'autres pages)

Quel bloc aimeriez-vous voir ensuite ?

J'espère que vous avez apprécié la lecture de notre sélection de blocs de base WordPress très utiles - disponibles gratuitement pour tout le monde. S'il vous plaît, faites-nous savoir quels blocs aimeriez-vous lire ensuite ou quelles fonctionnalités vous trouvez toujours manquantes dans le noyau de WordPress. Merci d'avoir lu!