Je pense que vous serez d’accord quand je dirai: Toute cette affaire de Gutenberg est source de confusion.
Premièrement, le nouvel éditeur de blocs est-il difficile à utiliser ou quoi? Je veux dire, vous ne savez pas où tous vos outils préférés sont allés. Maintenant, vous avez probablement pris plus de temps pour créer un post, non?
Peut-être que l’ajout d’un lien (affilié ou autre) vous a jeté un sacré virage et vous vous êtes senti déçu. Vous avez peut-être eu des problèmes pour ajouter une image à côté de votre texte.
Peut-être avez-vous essayé d’ajouter plusieurs colonnes et les choses ne se sont pas déroulées comme prévu. Si ce n’est pas le cas, vous ne pourrez peut-être pas ajouter facilement vos fichiers PDF ou vous verrez le message redouté «Update Failed» (Echec de la mise à jour) plusieurs fois.
Eh bien, ne vous inquiétez plus; J'étais dans votre position exacte il n'y a pas si longtemps, mais je trouve que Gutenberg est un plaisir à utiliser. Il faut apprendre, certes, mais d’ici la fin du billet, vous allez penser à Gutenberg différemment.
Qu'est-ce que l'éditeur Gutenberg?
Vous consultez Gutenberg, l'éditeur de blocs WordPress par défaut
Si vous utilisez WordPress 5.0 et versions ultérieures, vous devez avoir rencontré le nouvel et brillant éditeur WordPress, connu sous le nom de Gutenberg.
Et comme beaucoup d’autres utilisateurs, vous voulez utiliser l’éditeur révolutionnaire, mais vous hésitez parce que 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 étaient et sont toujours en train de créer des thèmes et des plugins compatibles avec l'éditeur de blocs.
Donc, vous êtes rapidement revenu à l'éditeur classique, qui, BTW, nous convient. N'oubliez pas que WordPress ne supportera plus l'éditeur classique après 2022. De plus, vous manquerez de tous les avantages supplémentaires offerts par Gutenberg.
En termes de fonctionnalité, Classic Editor 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 étrange, voire totalement déroutante. Au moins c'est ce que je pense.
Mais qu'est-ce que Gutenberg?
Gutenberg est le nouvel éditeur WordPress par défaut. C’est différent de l’éditeur de texte / visuel traditionnel; Gutenberg utilise des blocs de contenu un peu comme beaucoup de 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 riche à 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 ajouts, Gutenberg peut rivaliser 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 on ne peut que s'attendre à ce que l'éditeur de blocs progresse à pas de géant.
Dans le post d’aujourd’hui, nous aurons beaucoup de plaisir à créer un post WordPress avec l’éditeur Gutenberg. Mon objectif est de couvrir tous les détails et toutes les fonctionnalités afin que vous puissiez utiliser Gutenberg pour créer un contenu comparable à celui des pros.
Es-tu prêt? Si tel est le cas, créons ce post WordPress.
Comment créer un post WordPress avec Gutenberg
Si vous utilisez un site Web WordPress, vous créez probablement plus de messages que de pages. Dans la section suivante, nous créons un post WordPress dans Gutenberg à partir de zéro. J'espère que vous aurez autant de plaisir que moi lorsque j'ai testé Gutenberg.
Cela à l'écart, naviguez jusqu'à Messages> Ajouter un nouveau comme nous le soulignons dans la capture d'écran ci-dessous.
Cela vous conduit directement à l'éditeur Gutenberg présenté ci-dessous.
Plutôt chouette, hein? Maintenant, relevons nos manches et passons aux choses sérieuses.
Ajouter un titre
Vous ne pouvez pas écrire un article sans un titre solide. La bonne chose est que Gutenberg rend incroyablement facile 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 Modifier bouton comme indiqué ci-dessous.
Après avoir ajouté votre titre, appuyez sur le bouton ENTRER clé pour commencer une nouvelle ligne. Oh oui, Gutenberg conserve la navigation native que vous aimiez dans l'éditeur classique de WordPress.
Ajout d'un nouveau paragraphe
Frapper le ENTRER la clé crée un nouveau Paragraphe bloc, comme indiqué ci-dessus. Avant de taper du texte, le bloc vous présente deux options. Voir l'image numérotée ci-dessous pour plus de détails.
Remarques. Vous pouvez:
- Convertissez le nouveau bloc de paragraphe en un autre bloc, par exemple une image, un en-tête, une couverture, une galerie, WooCommerce, un formulaire, etc.
- Utilisez le raccourci pour changer le bloc de paragraphe en bloc d'image
- Changer le bloc de paragraphe en un bloc d'en-tête, c'est-à-dire H2, H3 et H4
- Transformez le bloc de paragraphe en bloc d'image de couverture
À des fins d'illustration, je réserverai le premier paragraphe à l'introduction ultérieure. Une fois que vous avez ajouté du texte, une barre d'outils de mise en forme apparaît, comme illustré ci-dessous.
Grâce à la barre de formatage, vous pouvez:
- Convertir le paragraphe en un verset, une citation, un en-tête, une liste, un code et un 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érer une image en ligne (oui, ça existe!)
- Masquer les paramètres de blocage
- Dupliquer le bloc
- Insérer un bloc avant ou après le bloc actuel (dans notre cas, c'est le premier paragraphe, alors rien n'a été ajouté avant, mais après.) Vous pouvez ajouter un bloc d'image de couverture avant le premier paragraphe si vous le souhaitez, car il a l'air si bien
- Editer le bloc en HTML
- Ajouter le bloc actuel aux blocs réutilisables afin de pouvoir l'utiliser dans d'autres publications
- Retirer le bloc entièrement
Vous pouvez personnaliser davantage le bloc de paragraphe avec les options disponibles dans Bloquer onglet dans le menu de la barre latérale, comme indiqué ci-dessous.
Quelques notes sur l'image ci-dessus:
- Choisir la Bloquer onglet ici pour afficher toutes les options et tous les paramètres du bloc
- Sélectionnez la taille de la police et activez Drop Let ici
- Ajoutez une couleur de fond à 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 un nombre illimité de couleurs personnalisées
- Vous pouvez ajouter ici une classe CSS personnalisée, ce qui signifie que vous pouvez ajouter des styles CSS supplémentaires à votre bloc.
- Le fond bleu et les lettrines sont 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.
Ici, les notes pour l'image ci-dessus:
- Cliquez ici pour basculer vers le Document languette
- Ici, vous pouvez planifier une publication, définir la visibilité sur Privé ou Publique, définissez un post sur En attendant l'examen statut, choisissez le format de post et créez un post-it
- La section vous permet de modifier votre lien permanent
- Vous pouvez sélectionner ou créer de nouvelles catégories ici
- Ajouter des tags à votre message
- Définir l'image sélectionnée
- Créer un extrait manuel
- Autoriser les commentaires, les pingbacks et les rétroliens
Comme vous pouvez le constater, vous disposez de nombreuses options pour concevoir un bloc de paragraphes (et l’ensemble du message) de la manière que vous souhaitez. Soit dit en passant, différents blocs ont 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). Ajoutons maintenant une image sous le premier paragraphe.
Ajout d'images à Gutenberg
Ils disent qu'une image parle mille mots et qu'un blog sans images est terne. Pour ajouter une image dans votre publication WordPress à l'aide de Gutenberg, vous avez plusieurs options.
Quand vous frappez le ENTRER clé il y a quelques instants, vous avez déclenché un nouveau bloc de paragraphe. Comme 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.
Quelques notes:
- Vous pouvez ajouter une image via les icônes plus (+)
- Ici, vous pouvez facilement ajouter une image
- 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 indiqué ci-dessous.
En cliquant sur le Image onglet charge le Image bloc montré dans la capture d'écran ci-dessous.
le Image block vous permet de télécharger une image ou d'en ajouter une à partir d'une URL ou de la bibliothèque multimédia. Au cours de ce processus, vous pouvez ajouter du texte alternatif (important pour le référencement), une légende et une description via les paramètres d'écran ou le Bloquer barre latérale comme indiqué dans les images suivantes.
Les paramètres de support habituels…
…et le Image bloquer les paramètres.
Est-ce que vous apprenez 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 (+), naviguez jusqu'à Blocs Communs et frapper le Fichier onglet comme nous le soulignons ci-dessous.
Cela lance le bloc suivant:
Du Fichier bloquer, vous pouvez télécharger un nouveau fichier ou en ajouter un de votre médiathèque. Après avoir ajouté votre fichier, Gutenberg ajoute une jolie Télécharger bouton automatiquement comme dans l'image ci-dessous.
Vous pouvez jouer avec les options. Par exemple, vous pouvez éditer / supprimer le “Gutenberg PDF Checklist gratuitement”Titre ainsi que le Télécharger bouton. Vous pouvez ajouter une classe CSS au bloc et la styler à votre guise.
Ajouter un devis à Gutenberg
Ensuite, ajoutons un devis car ils sont charmants, accrocheurs et vous aident à conduire le point. Dans une nouvelle ligne, cliquez sur le signe plus (+), naviguez jusqu'à Blocs Communs et frapper le Citation onglet comme indiqué ci-dessous.
Cela ajoute le Citation bloquer dans votre message comme nous le soulignons dans le screengrab ci-dessous.
Remarquez les paramètres de blocage des guillemets dans la barre latérale droite ci-dessus?
Pour ajouter votre devis, tapez à l'intérieur du bloc. Voici mon résultat.
Ça a l'air incroyable, non?
Ajout de médias intégrés à Gutenberg
Gutenberg est livré avec plusieurs blocs pour intégrer des vidéos et autres médias de plus de 30 sites tels que YouTube, Vimeo, Facebook, SoundCloud, WordPress, Slideshare, etc.
Pour incorporer du contenu, cliquez sur l'icône plus (+), naviguez jusqu'à Intègre, et choisissez le site. Par exemple, je voulais YouTube, comme indiqué ci-dessous.
Ensuite, copiez-collez l’URL de la vidéo YouTube et cliquez sur le bouton Intégrer bouton comme indiqué dans l'image ci-dessous.
Dès que vous frappez le Intégrer bouton, Gutenberg recouvre le lien dans une vidéo automatiquement comme nous le soulignons ci-dessous.
Navigation en douceur tout le chemin. Ajoutons maintenant un bouton autonome idéal pour créer un appel à l’action (CTA).
Comment ajouter un bouton à Gutenberg
Vous ne devriez pas avoir de difficulté à ajouter des blocs à ce stade. Cliquez simplement sur le plus (+) et choisissez votre bloc. Cela ne peut pas être plus facile que ça.
Alors, comment pouvons-nous ajouter un bouton?
Dans une nouvelle ligne (ou bloc), cliquez sur l'icône plus (+), naviguez jusqu'à Éléments de mise en page et cliquez sur le Bouton onglet comme indiqué ci-dessous.
Cela vous mène à la Bouton bloquer comme nous détaillons ci-dessous.
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.
Au fait, si vous utilisez des combinaisons de couleurs difficiles à lire sur vos boutons, Gutenberg vous le fera savoir 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 ce qu'il faut faire. Cliquez sur l'icône plus (+), naviguez jusqu'à Éléments de mise en page et cliquez sur le Colonnes onglet comme indiqué dans l'image ci-dessous.
Gutenberg ajoute deux colonnes par défaut. Voir l'image ci-dessous et n'oubliez pas que j'ai déjà ajouté du contenu dans les colonnes.
Ce qui me fait:
Pas mal pour quelques secondes de travail. Mais peut-être que vous ne souhaitez pas créer de colonnes. Peut-être que vous souhaitez 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
Souhaitez-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 (+), naviguez jusqu'à Éléments de mise en page et cliquez Média et texte comme indiqué ci-dessous.
Vous devriez voir le Média et texte bloquer, comme indiqué ci-dessous.
Ensuite, téléchargez votre image / vidéo / média ou ajoutez-en une de la médiathèque. Après cela, ajoutez votre texte à côté du support, comme indiqué dans l'image ci-dessous.
J'ai joué avec Média et texte bloquer, et je suis venu avec ce qui suit. Remarquez J'ai réussi à presser un bouton là aussi 🙂
Oh, c’est le back-end! Laissez-moi vous montrer le front-end. Ici:
Ça a l'air très professionnel, non? Vous pouvez certainement imaginer tout ce que vous pouvez réaliser avec l’éditeur Gutenberg.
Blocs de Gutenberg tiers
Les développeurs WordPress souhaitent créer des thèmes et des plug-ins compatibles avec l'éditeur Gutenberg. Quelques exemples incluent WooCommerce, Jetpack et Yoast SEO.
Par exemple, vous pouvez ajouter des blocs WooCommerce dans votre message WordPress. Tout d'abord, vous devez installer et activer WooCommerce.
Ensuite, dans une nouvelle ligne, cliquez sur l'icône plus (+), naviguez jusqu'à WooCommerce et choisissez le bloc que vous désirez comme indiqué ci-dessous.
Savez-vous ce que cela signifie? Cela signifie que vous pouvez créer des contenus multimédia riches et d'excellents messages et pages en quelques minutes.
Autres blocs notables
Nous en sommes déjà à plus de 2 000 mots, et si nous continuons dans cette voie, nous finirons par écrire un livre entier. Ma prière est que vous puissiez maintenant utiliser Gutenberg sans aucun hoquet.
Ceci dit, voici une liste des autres blocs disponibles.
- Widgets – Vous pouvez ajouter du contenu de vos widgets dans des articles de blog
- Codes courts – Vous pouvez toujours utiliser des codes courts WordPress natifs
- Classique – Un super bloc qui contient votre ancien contenu
- Plus – Le bloc était autrefois connu sous le nom de Lire la suite étiquette
- Saut de page, séparateurs, entretoises
- HTML personnalisé, Pullquote, Table
- Galerie et HTML5 audio / vidéo
- Et bien plus encore en fonction des thèmes et des plugins que vous utilisez
De côté: Créer une page WordPress revient à créer une publication, à l'exception de quelques différences minimes. Nous n'allons donc pas approfondir cette question aujourd'hui.
Quick Gutenberg Hacks & 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, une liste de blocs s’affiche.
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» pour afficher le bloc d'image parmi les autres blocs liés à l'image. Voir l'image ci-dessous pour plus de détails.
Raccourcis clavier: Pour afficher tous les raccourcis disponibles, appuyez sur MAJ + ALT + H sous Windows et OPT + CTRL + H sous Mac.
En haut du document, vous pouvez voir la structure du document en cliquant sur l'icône (i), comme indiqué ci-dessous.
Agréable. Extraordinairement lisse.
Oh, et d'ailleurs, l'erreur «Update Failed» (Echec de la mise à jour) se produit généralement en raison d'une connexion Internet fragile 🙂
Entre vous et moi, Gutenberg est un éditeur de contenu fantastique. Pourvu que vous vouliez apprendre les ficelles du métier; vous pouvez tirer beaucoup de choses de l'éditeur WordPress du futur.
Gutenberg est encore relativement jeune et vous pouvez vous attendre à ce qu'il grandisse 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 page doivent être plus vigilants, sinon ils manqueront d'activité
Nous espérons que notre guide pas à pas de l’éditeur Gutenberg vous aura aidé à mettre les choses en perspective. Nous pensons que vous pouvez maintenant utiliser l'éditeur de blocs pour créer du contenu comme un pro.
S'il vous plaît partager vos préoccupations, pensées et questions dans la section commentaire ci-dessous.
