Guide étape par étape de Gutenberg Builder pour WordPress

Guide étape par étape de Gutenberg Builder pour WordPress

Je pense que vous serez d’accord quand je dis: Toute cette entreprise de Gutenberg prête à confusion.


Premièrement, le nouvel éditeur de blocs est-il difficile à utiliser ou quoi? Je veux dire, vous ne savez pas où sont passés tous vos outils préférés. Maintenant, vous avez probablement mis plus de temps à créer un article, à droite?

Peut-être que l’ajout d’un lien (affilié ou autre) vous a jeté un diable et vous vous êtes senti déçu. Vous avez peut-être eu des problèmes pour ajouter une image à côté de votre texte.

Vous avez peut-être essayé d’ajouter plusieurs colonnes et les choses n’ont pas fonctionné comme prévu. Si ce n’est pas le cas, vous ne pouvez peut-être pas ajouter facilement vos fichiers PDF, ou vous voyez le redoutable message «Échec de la mise à jour» séparément.

Eh bien, ne vous inquiétez plus; J’étais dans votre position exacte il n’y a pas longtemps, mais maintenant je trouve Gutenberg un plaisir à utiliser. Il y a une courbe d’apprentissage, oui, mais à la fin de l’article d’aujourd’hui, vous penserez Gutenberg différemment.

Qu’est-ce que l’éditeur Gutenberg?

éditeur wordpress gutenberg

Vous regardez Gutenberg, l’éditeur de blocs WordPress par défaut

Si vous utilisez WordPress 5.0 et supérieur, vous devez avoir rencontré le nouvel éditeur WordPress brillant, connu sous le nom de Gutenberg.

Et comme beaucoup d’autres utilisateurs, vous voulez utiliser l’éditeur révolutionnaire, mais vous hésitez car Gutenberg c’est compliqué.

Ou peut-être que lorsque vous avez rencontré Gutenberg pour la première fois, diverses choses n’ont pas fonctionné. Après tout, les développeurs rendaient et continuent de rendre les thèmes et les plugins compatibles avec l’éditeur de blocs.

Donc, vous êtes rapidement revenu à la Éditeur classique, qui, BTW, nous convient. Gardez à l’esprit que WordPress ne prendra pas en charge l’éditeur classique après 2022. De plus, vous manquez tous les avantages supplémentaires offerts par Gutenberg.

En termes de fonctionnalité, l’éditeur classique et Gutenberg font la même chose; vous savez, les deux outils vous aident à créer du contenu sans codage.

Cependant, nous sommes tellement habitués à l’ancien éditeur WYSIWYG que nous trouvons que l’adaptation à la nouvelle interface utilisateur de Gutenberg est un peu étrangère, sinon complètement déroutante. C’est du moins ce que je pense.

Mais quel est exactement Gutenberg?

Gutenberg est le nouvel éditeur WordPress par défaut. C’est différent de l’éditeur visuel / texte traditionnel; Gutenberg utilise des blocs de contenu un peu comme de nombreux constructeurs de pages modernes.

Il est livré avec des fonctionnalités plus intuitives que l’éditeur classique, ce qui signifie que vous pouvez créer du contenu multimédia à la volée. Maintenant, vous pouvez créer rapidement des mises en page extraordinaires, que vous travailliez avec des publications ou des pages WordPress.

Et avec quelques modules complémentaires, Gutenberg peut rivaliser favorablement avec les constructeurs de pages WordPress établis tels que Brizy, Elementor et Divi.

Le seul inconvénient est que les constructeurs de pages offrent souvent plus de fonctionnalités car ils sont principalement des constructeurs de pages! Dans le même temps, Gutenberg est encore assez jeune, et vous ne pouvez vous attendre à ce que l’éditeur de blocs se développe à pas de géant.

Dans l’article d’aujourd’hui, nous aurons un moment passionnant à créer un article WordPress avec l’éditeur Gutenberg. Je vise à couvrir chaque petit détail et fonctionnalité afin que vous puissiez utiliser Gutenberg pour créer du contenu comme les pros.

Es-tu prêt? Si oui, créons cette publication WordPress.

Comment créer un article WordPress avec Gutenberg

Si vous exécutez un site Web WordPress, vous créez probablement plus de publications que de pages. Dans la section suivante, nous créons un article WordPress dans Gutenberg à partir de zéro. J’espère que vous vous amuserez autant que moi en testant Gutenberg.

À l’écart, accédez à Messages> Ajouter un nouveau comme nous le soulignons dans la capture d’écran ci-dessous.

création d'un nouveau poste à gutenberg

Cela vous mène directement à l’éditeur Gutenberg illustré ci-dessous.

éditeur wordpress gutenberg

Assez bien, hein? Maintenant, laissez-nous retrousser ces manches et passer aux choses sérieuses.

Ajout d’un titre

ajouter un nouveau titre à gutenberg

Vous ne pouvez pas écrire un article sans titre solide. La bonne chose est que Gutenberg facilite incroyablement l’ajout d’un titre.

Le premier bloc que vous voyez est le Titre en haut du document comme nous le détaillons dans l’image ci-dessus. Pour créer un titre pour votre message, tapez à l’intérieur du bloc. Simple comme A, B, C.

Besoin de modifier le permalien? Vous pouvez facilement le faire dans le Titre bloquer en cliquant sur le Éditer bouton comme indiqué ci-dessous.

modifier le permalien du message à gutenberg

Après avoir ajouté votre titre, appuyez sur le ENTRER pour démarrer une nouvelle ligne. Oh oui, Gutenberg conserve la navigation native que vous aimiez dans l’éditeur WordPress classique.

Ajout d’un nouveau paragraphe

nouveau bloc de paragraphe à gutenberg

Frapper le ENTRER clé crée un nouveau Paragraphe bloc, comme indiqué ci-dessus. Avant de taper un texte, le bloc vous présente quelques options. Voir l’image numérotée ci-dessous pour plus de détails.

nouvelles options de bloc de paragraphe gutenberg

Remarques. Vous pouvez:

  1. Convertissez le nouveau bloc de paragraphe en n’importe quel autre bloc, par exemple, image, en-tête, couverture, galerie, WooCommerce, formulaire, etc..
  2. Utilisez le raccourci pour changer le bloc de paragraphe en bloc d’image
  3. Transformez le bloc de paragraphe en bloc de titre, c’est-à-dire H2, H3 et H4
  4. Transformez le bloc de paragraphe en bloc d’image de couverture

À des fins d’illustration, je réserverai le premier paragraphe pour la post-introduction. Une fois que vous avez ajouté du texte, une barre d’outils de mise en forme apparaît comme illustré ci-dessous.

barre d'outils de mise en forme de paragraphe gutenberg

Grâce à la barre d’outils de mise en forme, vous pouvez:

  • Convertissez le paragraphe en vers, citation, en-tête, liste, code et texte préformaté
  • Audacieux, Mettre en italique, barré, et souligner contenu
  • Aligner le texte à gauche, à droite, au centre et justifier
  • Ajouter un lien qui peut également s’ouvrir dans un nouvel onglet
  • Insérez une image en ligne (oui, elle existe!)
  • Masquer les paramètres de blocage
  • Dupliquer le bloc
  • Insérez un bloc avant ou après le bloc actuel (dans notre cas, c’est le premier paragraphe, donc n’ajoutez rien avant, seulement après.) Vous pouvez ajouter un bloc d’image de couverture avant le premier paragraphe si vous le souhaitez car il semble si bien
  • Modifier le bloc au format HTML
  • Ajoutez le bloc actuel à des blocs réutilisables afin de pouvoir l’utiliser dans d’autres publications
  • Retirez complètement le bloc

Vous pouvez personnaliser davantage le bloc de paragraphe avec les options disponibles dans le Bloquer onglet trouvé dans le menu de la barre latérale comme indiqué ci-dessous.

Options de la barre latérale gutenberg pour le bloc de paragraphe

Quelques notes sur l’image ci-dessus:

  1. Choisir la Bloquer onglet ici pour afficher toutes les options et paramètres de blocage
  2. Sélectionnez la taille de police et activez Drop Cap ici
  3. Ajoutez une couleur d’arrière-plan à votre paragraphe. Je l’ai mis en bleu à des fins d’illustration. Vous pouvez également personnaliser la couleur du texte. Dans les deux cas, vous pouvez ajouter des couleurs personnalisées illimitées
  4. Vous pouvez ajouter une classe CSS personnalisée ici, ce qui signifie que vous pouvez ajouter des styles CSS supplémentaires à votre bloc
  5. Le fond bleu et Drop Cap déjà appliqués dans l’éditeur Gutenberg

L’onglet Document dans la barre latérale

Il y a un autre onglet dans le menu de la barre latérale; le Document onglet comme indiqué ci-dessous.

onglet de document de la barre latérale du bloc de paragraphe

Ici, les notes pour l’image ci-dessus:

  1. Cliquez ici pour basculer vers le Document languette
  2. Ici, vous pouvez planifier une publication, définir la visibilité sur Privé ou Publique, définir une publication sur En attendant l’examen statut, choisissez le format de publication et créez une publication collante
  3. La section vous permet de modifier votre permalien
  4. Vous pouvez sélectionner ou créer de nouvelles catégories ici
  5. Ajoutez des tags à votre message
  6. Définir l’image sélectionnée
  7. Créer un extrait manuel
  8. Autoriser les commentaires, les pingbacks et les trackbacks

Comme vous pouvez le voir, vous disposez de nombreuses options pour concevoir un bloc de paragraphe (et l’ensemble du message) de la manière que vous souhaitez. Soit dit en passant, différents blocs sont livrés avec des paramètres différents, comme nous l’apprendrons dans une minute.

Après le premier paragraphe, appuyez sur le ENTRER à nouveau pour créer une nouvelle ligne (ou bloc de paragraphe). Maintenant, ajoutons une image sous le premier paragraphe.

Ajout d’images à Gutenberg

ajouter une nouvelle image à gutenberg

Ils disent qu’une image vaut mille mots et qu’un article de blog sans images est bien terne. Pour ajouter une image dans votre publication WordPress en utilisant Gutenberg, vous avez quelques options.

Lorsque vous frappez le ENTRER il y a quelques instants, vous avez déclenché un nouveau bloc de paragraphe. Étant donné que Gutenberg est intuitif, vous pouvez ajouter une image en cliquant sur les icônes plus (+), image ou couverture comme nous le soulignons dans l’image ci-dessous.

ajout d'une nouvelle image dans l'éditeur gutenberg

Quelques notes:

  1. Vous pouvez ajouter une image via les icônes plus (+)
  2. Ici, vous pouvez facilement ajouter une image
  3. Cette option vous permet d’ajouter un couverture image (elles sont généralement plus grandes que les autres photos. De plus, vous pouvez ajouter du texte sur les images de couverture, BTW)

Allez-y et cliquez sur l’une des icônes plus (+). Ensuite, cliquez sur le Image onglet, comme illustré ci-dessous.

ajout d'images à gutenberg

Cliquer sur le Image tab charge le Image bloc montré dans la capture d’écran ci-dessous.

bloc d'image gutenberg

le Image bloc vous permet de télécharger une image ou d’en ajouter une à partir d’une URL ou de la médiathèque. Dans le processus, vous pouvez ajouter du texte alternatif (important pour le référencement), une légende et une description via les paramètres de l’écran multimédia ou Bloquer barre latérale comme indiqué dans les images suivantes.

Les paramètres multimédias habituels…

paramètres des médias wordpress

…et le Image paramètres de blocage.

paramètres de bloc d'image gutenberg

Apprenez-vous quelque chose ici aujourd’hui? J’espere. Allons-nous en.

Après avoir ajouté votre image, Gutenberg ajoute un nouveau bloc de paragraphe juste en dessous. Vous pouvez ajouter ce que vous voulez, mais à des fins d’illustration, j’ai ajouté du texte, puis un bouton en dessous.

Comment ajouter des fichiers téléchargeables, par exemple PDF, images, vidéos, etc.

Gutenberg facilite incroyablement l’ajout de fichiers téléchargeables à votre publication ou page WordPress.

Dans un nouveau Paragraphe bloquer, cliquez sur l’icône plus (+), accédez à Blocs communs et a frappé le Fichier onglet comme nous le soulignons ci-dessous.

ajout de fichiers téléchargeables dans gutenberg

Cela lance le bloc suivant:

bloc de fichiers gutenberg

Du Fichier bloc, vous pouvez télécharger un nouveau fichier ou en ajouter un à partir de votre bibliothèque multimédia. Après avoir ajouté votre fichier, Gutenberg ajoute un mignon Télécharger bouton automatiquement comme le montre l’image ci-dessous.

ajout de fichier dans gutenberg

Vous pouvez jouer avec les options. Par exemple, vous pouvez modifier / supprimer le “Liste de contrôle PDF Gutenberg gratuite“Titre ainsi que le Télécharger bouton. Vous pouvez ajouter une classe CSS au bloc et le styler comme vous le souhaitez.

Ajout d’un devis à Gutenberg

Ensuite, ajoutons un devis, car ils sont charmants, accrocheurs et vous aident à ramener le sujet à la maison. Dans une nouvelle ligne, cliquez sur le signe plus (+), accédez à Blocs communs et a frappé le Citation onglet comme indiqué ci-dessous.

ajouter des guillemets à gutenberg

Cela ajoute la Citation bloquer dans votre message comme nous le soulignons dans la capture d’écran ci-dessous.

Paramètres du bloc de devis Gutenberg

Notez les paramètres du bloc de devis dans la barre latérale droite ci-dessus?

Pour ajouter votre devis, tapez à l’intérieur du bloc. Voici mon résultat.

citation de Gutenberg

Ça a l’air incroyable, non?

Ajouter des intégrations de médias dans Gutenberg

Gutenberg est livré avec plusieurs blocs pour intégrer des vidéos et d’autres médias de plus de 30 sites tels que YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, etc..

Pour intégrer du contenu, cliquez sur l’icône plus (+), accédez à Intégré, et choisissez le site. Par exemple, je voulais YouTube, comme indiqué ci-dessous.

gutenberg youtube embed

Ensuite, copiez-collez l’URL de la vidéo YouTube et cliquez sur le Intégrer bouton comme indiqué dans l’image ci-dessous.

bloc d'intégration YouTube de Gutenberg

Dès que vous frappez le Intégrer bouton, Gutenberg couvre automatiquement le lien dans une vidéo comme nous le soulignons ci-dessous.

vidéo youtube intégrée à gutenberg

Navigation fluide tout le long. Maintenant, ajoutons un bouton autonome parfait pour créer un appel à l’action (CTA).

Comment ajouter un bouton dans Gutenberg

Vous ne devriez pas avoir de difficulté à ajouter des blocs à ce stade. Cliquez simplement sur le signe plus (+) et choisissez votre bloc. Ça ne peut pas être plus simple que ça.

Alors, comment ajouter un bouton?

Dans une nouvelle ligne (ou bloc), cliquez sur l’icône plus (+), accédez à Éléments de mise en page et cliquez sur le Bouton onglet comme indiqué ci-dessous.

ajout de boutons dans l'éditeur gutenberg

Cela vous conduit au Bouton bloquer comme nous le détaillons ci-dessous.

ajout de boutons dans l'éditeur gutenberg

Comme vous pouvez le voir sur l’image ci-dessus, vous pouvez modifier le texte du bouton et ajouter un lien. De plus, vous pouvez personnaliser le bouton via le menu de la barre latérale à droite de l’écran.

Après quelques clics, voici ce que j’ai obtenu.

exemple de bouton gutenberg

Soit dit en passant, si vous utilisez des combinaisons de couleurs difficiles à lire sur vos boutons, Gutenberg vous informera rapidement. Comme c’est gentil?

Comment ajouter des colonnes dans Gutenberg

Avec un beau bouton en place, ajoutons quelques colonnes. Je vais ajouter deux colonnes, alors suivez attentivement.

Voici quoi faire. Cliquez sur l’icône plus (+), accédez à Éléments de mise en page et cliquez sur le Colonnes onglet comme on le voit dans l’image ci-dessous.

onglet colonnes éditeur gutenberg

Gutenberg ajoute deux colonnes par défaut. Voir l’image ci-dessous, et rappelez-vous, j’ai déjà ajouté du contenu dans les colonnes.

colonnes gutenberg dans l'éditeur wordpress

Ce qui me fait:

frontend de colonnes gutenberg

Pas mal pour quelques secondes de travail. Mais vous ne souhaitez peut-être pas créer de colonnes. Vous souhaitez peut-être afficher une image à côté d’un texte.

Y a-t-il un bloc pour cela? Oui il y a!

Comment ajouter une image à côté du texte dans Gutenberg

Cherchez-vous à ajouter une image à côté d’un texte? Si oui, vous allez adorer la section suivante.

Comme d’habitude, cliquez sur l’icône plus (+), accédez à Éléments de mise en page et cliquez Médias et texte comme indiqué ci-dessous.

bloc média et texte gutenberg

Vous devriez voir le Médias et texte bloc, comme indiqué ci-dessous.

médias et bloc de texte à gutenberg

Ensuite, téléchargez votre image / vidéo / média ou ajoutez-en une à partir de la bibliothèque multimédia. Après cela, ajoutez votre texte à côté du média, comme indiqué dans l’image ci-dessous.

J’ai joué avec le Médias et texte bloc, et je suis venu avec ce qui suit. Attention! J’ai réussi à serrer un bouton là aussi ��

médias et bloc de texte en pleine action

Oh, c’est le back-end! Permettez-moi de vous montrer le front-end. Ici:

bloc de texte multimédia à gutenberg

Ça a l’air très professionnel, non? Vous pouvez certainement imaginer ce que vous pouvez réaliser avec l’éditeur Gutenberg.

Blocs Gutenberg tiers

Les développeurs de WordPress tiennent à rendre les thèmes et les plugins compatibles avec l’éditeur Gutenberg. Quelques exemples incluent WooCommerce, Jetpack et Yoast SEO.

Par exemple, vous pouvez ajouter des blocs WooCommerce dans votre publication WordPress. Tout d’abord, vous devez installer et activer WooCommerce.

Ensuite, dans une nouvelle ligne, cliquez sur l’icône plus (+), accédez à WooCommerce et choisissez le bloc que vous désirez comme indiqué ci-dessous.

blocs de woocommerce gutenberg

Savez-vous ce que cela signifie? Cela signifie que vous pouvez créer des articles multimédias riches et d’excellents articles et pages en quelques minutes.

Autres blocs notables

Nous en sommes déjà à plus de 2 000 mots, et si nous continuons, nous finirons par écrire un eBook entier. Ma prière est que vous pouvez maintenant utiliser Gutenberg sans hoquet.

Cela à l’écart, voici une liste des autres blocs disponibles.

  • Widgets – Vous pouvez ajouter du contenu de vos widgets dans les articles de blog
  • Shortcodes – Vous pouvez toujours utiliser des shortcodes WordPress natifs
  • Classique – Un grand bloc qui contient votre ancien contenu
  • Plus – Le bloc était auparavant connu sous le nom de Lire la suite étiquette
  • Saut de page, séparateurs, entretoises
  • HTML personnalisé, Pullquote, Tableau
  • Galerie et Audio / vidéo HTML5
  • Et bien plus encore en fonction des thèmes et plugins que vous utilisez

De côté: La création d’une page WordPress est similaire à la création d’un article, sauf pour quelques différences de minute, donc nous ne nous y attarderons pas aujourd’hui.

Hacks Gutenberg rapides et raccourcis clavier

Gutenberg est livré avec quelques hacks et raccourcis clavier qui le rendent encore plus facile. Par exemple, si vous tapez «/» dans un bloc de paragraphe, il affiche une liste de blocs.

Vous pouvez même sélectionner un bloc spécifique en tapant le titre du bloc après la barre oblique inverse (/), par exemple, en tapant «/ image» fait apparaître le bloc d’image parmi d’autres blocs liés à l’image. Voir l’image ci-dessous pour plus de détails.

raccourci de jeu de gutenberg

Raccourcis clavier: Pour afficher tous les raccourcis disponibles, appuyez sur MAJ + ALT + H sous Windows et OPT + CTRL + H sur Mac.

En haut du document, vous pouvez voir la structure du document en cliquant sur l’icône (i), comme illustré ci-dessous.

structure du document gutenberg

Agréable. Extraordinairement lisse.

Oh, et en passant, l’erreur «Échec de la mise à jour» se produit généralement en raison d’une connexion Internet instable ��


Entre vous et moi, Gutenberg est un éditeur de contenu fantastique. À condition que vous soyez disposé à apprendre les cordes; vous pouvez récolter beaucoup à partir de l’éditeur WordPress du futur.

Gutenberg est encore relativement jeune et vous pouvez vous attendre à ce qu’il se développe en termes de convivialité et de fonctionnalité. Ce sera une force sérieuse avec laquelle il faudra compter dans les prochains jours. Les constructeurs de pages feraient mieux de faire attention, sinon ils manqueront d’activité ��

Nous espérons que notre guide étape par étape de l’éditeur Gutenberg vous a aidé à mettre les choses en perspective. Nous pensons que vous pouvez désormais utiliser l’éditeur de blocs pour créer du contenu comme un pro.

Veuillez partager vos préoccupations, réflexions et questions dans la section des commentaires ci-dessous.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map