10 conseils et astuces utiles pour l'éditeur WordPress Gutenberg

L'éditeur de Gutenberg a changé la façon dont les gens utilisent WordPress. Il est plus visuel, basé sur des blocs et flexible que l'ancien éditeur classique. Mais si vous êtes nouveau, ou même si vous l'utilisez depuis un certain temps, certaines choses peuvent toujours être un peu difficiles.

La bonne nouvelle? Il y a des tonnes de conseils et astuces utiles qui peuvent rendre les choses plus rapides, plus faciles et plus amusantes.

Dans cet article, nous partageons 10 conseils pratiques de Gutenberg. Ceux-ci vous aideront à créer un meilleur contenu et à en faire plus sans la frustration habituelle.

Évolution de l'éditeur WordPress Gutenberg

Gutenberg a été présenté pour la première fois dans WordPress 5.0 en décembre 2018. Il a remplacé l'éditeur classique, qui existait depuis des années. L'idée principale derrière Gutenberg était de donner aux utilisateurs plus de contrôle sur leur contenu à l'aide d'un système basé sur des blocs.

Au début, de nombreux utilisateurs n'étaient pas sûrs du changement. L'interface était différente. Il a fallu un certain temps pour s'y habituer. Mais au fil du temps, Gutenberg s'est beaucoup amélioré. Il est devenu plus rapide, plus stable et plus flexible.

Avec chaque mise à jour WordPress, Gutenberg a acquis de nouvelles fonctionnalités. Vous pouvez désormais créer des mises en page entières avec des blocs. Vous pouvez réutiliser les blocs personnalisés. Vous pouvez même concevoir des en-têtes, des pieds de page et des modèles à l'aide de l'éditeur de site (pour les thèmes de bloc).

Aujourd'hui, Gutenberg n'est pas seulement un éditeur de contenu. Cela devient un outil d'édition complet . Et ça va mieux à chaque version.

10 conseils et astuces utiles pour l'éditeur WordPress Gutenberg

Gutenberg offre bien plus que de simples blocs de contenu de base. Une fois que vous avez appris quelques conseils intelligents, vous pouvez travailler plus rapidement et créer des pages plus belles sans toucher à aucun code.

Voici une liste rapide des astuces utiles qui peuvent améliorer votre expérience Gutenberg:

1. Utilisez des commandes de slash pour insérer rapidement les blocs
2. Transformez n'importe quel bloc en un bloc réutilisable
3. Faites glisser et déposez les blocs pour réorganiser le contenu
4. Utilisez la vue de la liste pour une navigation en blocs facile
5. Blocs de groupe pour les déplacer ou les coiffer ensemble
6. Blocs de verrouillage pour éviter les modifications accidentelles
7. Utilisez des raccourcis clavier pour gagner du temps
8. Utilisez des modèles pour les dispositions prêtes à l'emploi
9. Copier et coller des blocs entre les pages
10. Ajouter un CSS personnalisé à des blocs spécifiques

Maintenant, passons dans les détails!

01. Utilisez les commandes de slash pour insérer rapidement les blocs

Disons que vous écrivez un article de blog et que vous souhaitez ajouter une image juste après un paragraphe. Vous déplacez votre curseur vers le bas, appuyez sur la touche Entrée, puis… vous atteignez la souris, cliquez sur l'icône Little Plus, faites défiler les options de bloc et enfin choisissez le bloc d'image. Cela semble familier?

Maintenant, rendons-le plus intelligent.

Au lieu de tout ce clic, tapez simplement une barre oblique avant (/) juste après avoir appuyé sur Entrée. Au moment où vous le faites, une liste de blocs apparaît. Tapez /image et appuyez à nouveau entre. Fait. Vous venez d'insérer un bloc d'image sans même toucher votre souris.

Cette astuce n'est pas seulement pour les images. Essayez /heading , /quote , /table , ou même /columns . Une fois que vous vous y êtes habitué, vous aurez l'impression de taper des commandes dans un outil d'écriture suralimenté.

Il est rapide, lisse et maintient votre flux d'écriture en vie. Plus de mise au point de rupture. Tapez et construisez simplement au fur et à mesure.

02. Transformez n'importe quel bloc en un bloc réutilisable

Avez-vous déjà écrit un appel à l'action ou une boîte d'inscription à la newsletter que vous souhaitez réutiliser sur plusieurs messages? Le copier à chaque fois n'est pas idéal. Vous en modifiez un, oubliez d'en mettre à jour un autre, et Boom - votre site se retrouve avec cinq versions différentes de la même chose.

Voici où les blocs réutilisables sont utiles.

Disons que vous avez conçu une section CTA parfaite. C'est peut-être un titre, une courte phrase et un bouton. Sélectionnez tous ces blocs, cliquez sur le menu à trois points (⋮) et choisissez «Ajouter aux blocs réutilisables». Donnez-lui un nom comme «Post Footer CTA» et économisez.

Maintenant, chaque fois que vous écrivez un nouvel article, recherchez simplement ce bloc réutilisable. Insérez-le en un seul clic. Et voici la meilleure partie - si vous mettez à jour ce bloc, cela change partout où vous l'avez utilisé.

Plus d'incohérences. Plus de temps perdu.

C'est comme avoir votre propre modèle personnalisé, prêt chaque fois que vous en avez besoin.

03. Faites glisser et déposez les blocs pour réorganiser le contenu

Parfois, votre contenu ne circule pas comme vous le pensiez.

Peut-être que cette image a l'air mieux au-dessus du texte. Peut-être que la citation semble plus puissante vers la fin. Le réarrangement du contenu dans Gutenberg est aussi simple que de traîner et de laisser tomber les blocs.

Voici comment cela fonctionne.

Planer sur n'importe quel bloc. Vous verrez une poignée à six points sur le côté gauche. Prenez-le et faites glisser le bloc où vous voulez. Vous voulez déplacer une section complète faite de plusieurs blocs? Regrouper d'abord, puis faites glisser tout le groupe en un seul mouvement en douceur.

Cela vous donne un contrôle total sur la disposition, sans découper, coller ou gérer un code désordonné.

C'est comme travailler avec des blocs de construction. Déplacez-vous jusqu'à ce que tout s'adapte correctement.

Simple. Visuel. Instantané.

04. Utilisez la vue de la liste pour une navigation en blocs facile

Avez-vous déjà construit un long article de blog avec des tonnes d'images, de texte, de boutons et peut-être de quelques colonnes? À un moment donné, défiler de haut en bas pour trouver un bloc spécifique se transforme en maux de tête.

C'est là que la vue de la liste sauve la journée.

Cliquez sur la petite icône avec trois lignes empilées dans le coin supérieur gauche de l'éditeur. Cela ouvre un panneau montrant chaque bloc de votre message, dans l'ordre. Vous verrez un contour propre et structuré, tout comme une table des matières pour vos blocs de contenu.

Vous pouvez cliquer sur n'importe quel bloc de la liste pour y sauter directement. Vous pouvez également faire glisser et déposer des blocs directement à partir de la vue de la liste. Besoin de sélectionner un bloc qui se trouve à l'intérieur d'un groupe ou d'une colonne? La vue de liste vous permet de le trouver instantanément, plus de chasse.

Il est particulièrement utile lorsque vous travaillez avec des dispositions complexes ou des blocs imbriqués.

05. Blocs de groupe pour les déplacer ou les styliser ensemble

Imaginez ceci, vous avez construit une section avec un titre, un paragraphe, un bouton et peut-être une couleur d'arrière-plan. Ça a l'air super. Mais maintenant, vous voulez déplacer le tout vers un autre endroit sur la page. Un bloc à la fois? Non. Trop trop lent.

Il suffit de les regrouper.

Sélectionnez tous les blocs que vous souhaitez garder ensemble. Cliquez ensuite sur le menu à trois points et choisissez «groupe». Maintenant, ces blocs sont enveloppés dans un seul conteneur.

Vous pouvez les déplacer en tant qu'unité. Ajoutez un arrière-plan au groupe. Ajuster le rembourrage. Changer l'alignement. Même dupliquez la section entière en un seul clic.

Les groupes facilitent les dispositions complexes. Ils gardent également les choses organisées, surtout lorsque vous travaillez sur des pages de destination ou des sections personnalisées.

06. Blocs de verrouillage pour éviter les modifications accidentelles

Vous avez votre conception comme vous le souhaitez. Tout est parfaitement aligné. Mais ensuite, lors de l'édition, vous supprimez accidentellement un bloc ou déplacez quelque chose hors de propos. Ennuyeux, non?

Voici le correctif: verrouillez vos blocs .

Cliquez sur n'importe quel bloc, ouvrez les paramètres (menu à trois points) et choisissez «Lock». Vous pouvez empêcher le mouvement, empêcher le retrait ou les deux. De cette façon, personne, y compris vous, ne peut le gâcher sans le déverrouiller en premier.

C'est super utile lorsque vous travaillez avec des dispositions réutilisables et des pages partagées ou si vous voulez simplement protéger votre propre travail acharné.

07. Utilisez les raccourcis clavier pour gagner du temps

Cliquez sur fonctionne, mais les raccourcis clavier? C'est l'efficacité de niveau supérieur.

Au lieu de déplacer votre souris toutes les quelques secondes, apprenez quelques combos rapides et vous parcourerez votre contenu. Par exemple:

• Ctrl + Shift + D (CMD sur Mac): Dupliquez un bloc
• Ctrl + alt + t: insérer un bloc au-dessus
• Ctrl + Alt + Y: insérer un bloc ci-dessous
• Shift + Alt + Z: Retirez un bloc
• / (Slash vers l'avant): Ouvrez l'inserteur de blocs instantanément

Il y en a plus, mais même quelques-uns peuvent vous faire économiser des minutes, surtout si vous construisez régulièrement de longs messages ou pages.

C'est comme connaître les codes de triche secrètes. Et une fois que vos doigts s'en souviennent, vous vous demanderez comment vous avez travaillé sans eux.

08. Utilisez des modèles pour les dispositions prêtes à l'emploi

La conception d'une page à partir de zéro peut sembler écrasante. Vous savez ce que vous voulez, mais y arriver bloquer par bloc prend du temps. C'est là que les modèles entrent en jeu.

Les modèles sont des dispositions de blocs pré-conçues. WordPress comprend un tas par défaut - comme des sections de héros, des témoignages, des CTA, etc. Vous en choisissez un et déposez-le dans votre page. Fait.

Cliquez sur l'icône Plus pour ajouter un nouveau bloc. Ensuite, passez à l'onglet Modèles . Vous trouverez des catégories comme du texte, des images, des colonnes, des en-têtes - vous le nommez. Choisissez-en un et toute la mise en page apparaît instantanément.

Vous pouvez modifier le texte, remplacer les images et les styles de modification. Mais la structure est déjà là.

C'est comme avoir un designer vous remettre un kit de démarrage. Sections superbes. Pas de stress. Pas d'anxiété de page vierge.

09. Copier et coller des blocs entre les pages

Vous avez construit quelque chose de gentil sur une page et vous voulez la même chose sur une autre? Ne commencez pas de zéro. Copiez et collez les blocs.

C'est plus facile que vous ne le pensez.

Cliquez sur le bloc (ou le groupe de blocs), puis appuyez sur Ctrl + C (ou CMD + C sur Mac). Accédez à votre autre page ou publication. Cliquez sur où vous voulez qu'il aille et appuyez sur Ctrl + V. Boom - tout apparaît, juste comme ça.

Tous les formations, styles, boutons, images - tout se présente.

Et oui, cela fonctionne même entre les onglets du navigateur. Vous pouvez donc ouvrir deux messages côte à côte et déplacer du contenu entre eux en quelques secondes.

10. Ajouter un CSS personnalisé à des blocs spécifiques

Parfois, les styles intégrés ne le coupent pas. Vous voulez quelque chose de plus unique. C'est là que le CSS personnalisé entre en jeu.

Gutenberg vous permet d'appliquer CSS personnalisé aux blocs individuels, afin que vous puissiez faire ressortir les parties de votre contenu sans affecter toute la page.

Voici comment le faire:

• Sélectionnez le bloc que vous souhaitez personnaliser.
• Dans les paramètres de bloc à droite, trouvez la section avancée .
• Dans le cadre des classes CSS supplémentaires , ajoutez un nom de classe personnalisé (par exemple, my-custom-style ).
• Ensuite, accédez à votre personnalisateur WordPress ou .my-custom-style { color: red; } une section CSS personnalisée dans votre thème et ajoutez des styles en utilisant cette classe (par exemple,.

De cette façon, vous ne jouez pas avec les styles mondiaux, mais plutôt l'adapter juste pour ce bloc.

Il est parfait lorsque vous voulez un bouton, un titre ou une section spécifique pour avoir un look différent sans affecter le reste de votre contenu.

Conclusion

Avec ces conseils et astuces, vous êtes en bonne voie de maîtriser l'éditeur WordPress Gutenberg. De l'accélération de votre flux de travail avec des commandes de barre oblique à l'ajout de styles personnalisés avec facilité, Gutenberg offre une tonne de flexibilité pour les créateurs de contenu.

N'oubliez pas que la clé est d'expérimenter et de trouver les outils qui fonctionnent le mieux pour votre style. Que vous créiez des messages simples ou des dispositions complexes, ces fonctionnalités vous aideront à gagner du temps, à rester organisé et à ajouter une touche personnelle à votre site.

Si vous souhaitez comparer Gutenberg avec Elementor, vous pouvez consulter notre article de blog sur Elementor vs Gutenberg pour savoir qui ouvre la voie.

Vous souhaitez partager vos commentaires liés à ce billet de blog? Veuillez le faire en utilisant la zone de commentaire ci-dessous. Nous aimerions connaître vos commentaires. Prends soin de toi!