Tutoriel WordPress Gutenberg : Guide du débutant

Un plugin de création de pages est de la plus haute importance si vous souhaitez créer et développer des pages Web pour votre site Web WordPress. L'éditeur de blocs WordPress Gutenberg est arrivé en 2021 avec des fonctionnalités d'édition de site complètes. Bien qu'il n'y ait pas longtemps depuis son arrivée, l'éditeur de blocs Gutenberg est en concurrence avec d'autres constructeurs de pages populaires. Si vous souhaitez développer un site Web WordPress optimisé pour le référencement, l'éditeur de blocs Gutenberg pourrait figurer en tête de liste. Ce didacticiel WordPress Gutenberg vous montrera avec quelle facilité vous pouvez utiliser l'éditeur de blocs Gutenberg pour développer des pages optimisées pour le référencement pour votre site Web WordPress.

Nous vous présenterons toutes les fonctionnalités de base de l'éditeur de blocs Gutenberg pour vous permettre de démarrer votre premier projet !

Pourquoi devriez-vous choisir Gutenberg Block Editor ?

L'éditeur de blocs Gutenberg contient tous les éléments essentiels dont vous avez besoin pour développer un site Web WordPress époustouflant et léger. Il est facile à utiliser ; ainsi, vous n'avez pas besoin de beaucoup de temps pour créer des pages à l'aide de l'éditeur de blocs Gutenberg. Ce qui distingue explicitement l'éditeur de blocs Gutenberg de l'autre constructeur de pages populaire est son codage optimisé pour le référencement. Tous les autres constructeurs de pages populaires sur le marché ont un taux de codage très élevé, ce qui ralentit le chargement des pages de votre site Web.

L'éditeur de blocs Gutenberg est fourni gratuitement avec l'installation de WordPress WooCommerce. Vous n'avez pas besoin de payer de frais pour utiliser l'éditeur.

D'un autre côté, vous devez payer un supplément pour utiliser les autres constructeurs de pages populaires si vous souhaitez utiliser leur version complète. Avec un codage à faible ratio et une version complète gratuite, l'éditeur de blocs Gutenberg est en tête de la course avec l'autre plugin populaire de création de pages. Vous pouvez utiliser l'éditeur de blocs Gutenberg avec les meilleurs thèmes WooCommerce pour WordPress.

.

Tutoriel WordPress Gutenberg : Blocs disponibles dans l'éditeur Gutenberg

Étant donné que Gutenberg est un éditeur basé sur des blocs, vous devez travailler avec différents blocs pour développer et personnaliser entièrement votre site Web WordPress. Vous trouverez ci-dessous la liste de tous les blocs disponibles dans l'éditeur de blocs Gutenberg.

Tutoriel WordPress Gutenberg : Ajouter et personnaliser des blocs Gutenberg

Après avoir ouvert une page dans l'éditeur de blocs, vous verrez une icône noire (+) plus. Cette icône est utilisée pour ajouter des blocs à votre éditeur. Vous obtiendrez une liste d'éléments en cliquant sur l'icône (+). Cliquez sur les éléments que vous souhaitez ajouter et ils seront ajoutés à votre éditeur. Après cela, cliquer sur ce bloc vous fournira des options personnalisées pour apporter des modifications à votre bloc comme vous le souhaitez.

Paramètres de blocage

Dans ce tutoriel WordPress Gutenberg, nous ajouterons plusieurs blocs et observerons leur utilisation. Créons une nouvelle page et procédons au développement.

Tutoriel WordPress Gutenberg : Changer le type de bloc

Après avoir ajouté un bloc à l'éditeur, survolez ou cliquez sur le bloc et vous verrez plusieurs options de personnalisation. La première option dans les paramètres du bloc Gutenberg est de changer le type de bloc. Après avoir ajouté du contenu à un bloc, vous pouvez toujours convertir le type de bloc.

Par exemple, vous avez ajouté un bloc de titre. En cliquant sur l'option de changement de type de bloc dans la barre d'outils du bloc, vous pouvez convertir le type de bloc en plusieurs autres types. Notez que vous ne pouvez convertir votre type de bloc qu'en un type de bloc limité. Par exemple, vous ne pouvez pas convertir un bloc de titre en bloc d'image. Mais vous pouvez convertir un bloc de paragraphe en un bloc de citation.

Tutoriel WordPress Gutenberg : Alignement

Vous pouvez modifier l'alignement du texte ou du module à partir des paramètres du bloc Gutenberg. Les alignements disponibles sont l'alignement à gauche, à droite et au centre.

Tutoriel WordPress Gutenberg : Gras / Italique

L'option suivante est les options Gras et Italique. Après avoir sélectionné une portion de texte, vous pouvez modifier son format en gras et en italique.

Tutoriel WordPress Gutenberg : Liens

Vous pouvez ajouter des liens internes ou externes à l'aide de l'option de lien des outils de paramètres de bloc Gutenberg. Sélectionnez simplement une partie du texte que vous souhaitez lier, puis cliquez sur l'icône de lien. Vous verrez un champ de saisie pour l'URL.

Tutoriel WordPress Gutenberg : Typographie

Vous pouvez modifier la couleur et la taille de la police d'un texte sélectionné. Sur le côté droit de votre éditeur, des options seront visibles chaque fois que vous sélectionnerez un bloc à personnaliser. Accédez à la section de bloc sur le côté droit de votre éditeur et recherchez l'option de personnalisation sous la section En-tête. Dans la zone de typographie de la section Titre, choisissez la taille de la police, le poids de la police et la casse. Les options de typographie sont les mêmes dans tous les meilleurs thèmes WordPress compatibles avec Gutenberg.

Tutoriel WordPress Gutenberg : Couleur

Vous pouvez facilement modifier la couleur du texte et son arrière-plan à l'aide des options de couleur du texte et de couleur d'arrière-plan.

Tutoriel WordPress Gutenberg : Classe CSS supplémentaire

Lorsque vous sélectionnez un bloc pour la personnalisation, vous trouverez une zone de classe CSS supplémentaire sur le côté droit à l'intérieur de la zone de personnalisation du bloc sous la section Avancé. Vous pouvez écrire plusieurs classes dans la case CSS supplémentaire en séparant les classes par des virgules (,).

Création d'un modèle simple à l'aide de Gutenberg Block Editor

Nous avons vu l'utilisation et les paramètres de base de Gutenberg. Nous allons maintenant utiliser quelques blocs généraux et créer un modèle simple.

Tutoriel WordPress Gutenberg : Création et personnalisation d'un titre

Dans l'éditeur de blocs Gutenberg, cliquez sur l'icône (+) et cliquez sur le bloc "Titre" pour l'ajouter à l'éditeur. Modifiez la couleur et le style de police selon vos préférences.

Tutoriel WordPress Gutenberg : Ajouter un paragraphe à la page

Cliquez à nouveau sur l'icône (+) et ajoutez un paragraphe pour bloquer l'éditeur. Insérez et stylisez un paragraphe en utilisant les paramètres de bloc Gutenberg et les options de personnalisation à droite.

Tutoriel WordPress Gutenberg : Ajouter une image et du texte dans deux colonnes

Dans la liste des blocs de Gutenberg, cliquez sur "Colonnes", puis sélectionnez 50/50, car nous prendrons côte à côte deux colonnes également divisées. Maintenant, dans la première colonne, ajoutez un bloc d'image et téléchargez une image en l'utilisant. Dans la deuxième colonne, ajoutez un bloc de paragraphe et insérez un paragraphe. Assurez-vous de « Cliquer » sur la mise à jour chaque fois que vous souhaitez enregistrer une modification.

Tutoriel WordPress Gutenberg : Ajout d'un devis pour la section Témoignage

Parcourez la liste des blocs et choisissez le bloc 'Quote'. Insérez la citation dans les blocs et personnalisez-la comme vous le souhaitez.

Tutoriel WordPress Gutenberg : Ajouter un bouton à la page

Parcourez la liste des blocs Gutenberg et sélectionnez le bloc "Bouton". Donnez au bouton un nom à afficher et utilisez la fonction de lien dans les paramètres du bloc Gutenberg pour lier ce bouton à votre contenu.

Tutoriel WordPress Gutenberg : sortie finale

Conclusion

Dans ce didacticiel, nous avons appris l'utilisation de base des paramètres du bloc Gutenberg. Nous avons également utilisé plusieurs blocs pour construire un modèle Web simple. L'éditeur de blocs Gutenberg est simple et rapide et est très efficace pour un meilleur référencement de votre site WordPress.

Si vous pouvez apprendre toutes les bases que nous avons montrées ici, vous pouvez acquérir beaucoup plus de compétences grâce à la pratique en un rien de temps ! Nous espérons que ce tutoriel vous a été utile sur la route de l'apprentissage de l'éditeur de blocs WordPress Gutenberg. N'hésitez pas à parcourir notre article sur l'utilisation du balisage de schéma WordPress pour améliorer le référencement d'un site Web.