Sélectionner une page

Tuto éditeur

Présentation

Au total 63 blocs ! Dont, la moité est inutile

Les blocs communs :

Ils sont au nombre de 10.

Ils remplacent tout simplement une bonne partie des outils anciennement proposés par l’éditeur classique (la barre d’outils qui se trouvait tout en haut de l’éditeur).

  1. paragraphes
  2. listes
  3. images
  4. titres
  5. citation
  6. galerie
  7. son
  8. bannière
  9. fichiers
  10. vidéo

Donc pour une rédaction “basique”, ces blocs feront amplement l’affaire…

Les blocs de mise en forme :

7 blocs se classent sous la catégorie “mise en forme”.

Ils permettent de créer des tableaux ou d’ajouter du code, du HTML etc.

  1. HTML
  2. Classique
  3. Tableau
  4. Couplet
  5. Code
  6. Pré-formaté
  7. Citation en exergue

Ces blocs sont tout aussi utiles que les blocs communs. La fonctionnalité de HTML a remplacé la version “texte” de l’ancien éditeur. Le bloc classique fait office d’ancien éditeur). Les blocs Tableau et Code viennent enrichir les possibilités.

Les blocs de mise en page :

Pour construire les pages, on peut choisir des blocs de mise en forme, qui sont au nombre de 7.

  1. Colonnes
  2. Bouton
  3. Média & Texte
  4. Lire la suite
  5. Saut de page
  6. Séparateur
  7. Espacement

Les blocs de contenus embarqués :

34 blocs de contenu embed

  1. Facebook
  2. Twitter
  3. YouTube
  4. Viméo
  5. Article WordPress
  6. Instagram

le tutoriel pour maîtriser le nouvel éditeur de WordPress

Découverte de L’éditeur

La logique repose sur l’utilisation de blocs de contenus. On ajoute des blocs, on y insère différents contenus (textes, images, vidéos, etc.) puis on les dispose dans la page comme on le souhaite

Présentation de l’interface

Créez chacune et chacun une belle page ,

  • créer une bannière,
  • rédiger une phrase d’accroche,
  • présenter votre texte ou pdf
  • ajouter un bouton d’appel à l’action.

On commence par créer une nouvelle page. Sachez que si vous souhaitez continuer à utiliser l’éditeur classique, c’est possible en cliquant sur le bouton Editeur classique qui s’affiche au survol d’un article ou d’une page.

Gutenberg WordPress editeur-classique-2
Gutenberg WordPress interface

L’interface

En haut à gauche

  • ajouter un nouveau Bloc avec le bouton (+),
  • Annuler ou rétablir une action grâce aux flèches,
  • Afficher les informations relatives à la page/article (nombre de mots, de titres, de paragraphes, de blocs) avec le bouton (i).

En haut à droite

Les boutons de publication les plus importants :

  • Enregistrer le brouillon,
  • Aperçu (l’oeil) et
  • Publier.

L’engrenage permet de masquer la barre latérale et de passer en pleine largeur et les 3 points déroulent quelques options supplémentaires, notamment la possibilité de passer en aperçu HTML

Gutenberg WordPress code editor

Dans la barre latérale, dans l’onglet Document, on retrouve tous les réglages liés à la publication . Les onglets sont par défaut fermés et il vous suffit de dérouler ceux qui vous intéressent.

Dans l’onglet Block, on a accès au descriptif et aux réglages du bloc sélectionné. Chaque bloc de contenu possède ses propres options.
Comme vous pouvez le constater sur les captures d’écran ci-dessous, les réglages sont basiques.

Gutenberg Réglages Blocs

Présentation des blocs de contenus

Pour bien comprendre leur fonctionnement, il faut imaginer que les blocs de contenus sont des briques que l’on empile les unes sur les autres pour créer une page que l’on peut déplacer et même supprimer sans incidence sur le reste de votre mise en page.

Pour ajouter des blocs, on clique sur le petit (+) en haut à gauche. Par défaut le bloc est ajouté en bas de la page. Si vous sélectionnez un bloc et cliquez sur le (+), le nouveau bloc sera ajouté sous le bloc sélectionné. Vous pouvez voir l’emplacement du bloc que vous êtes sur le point d’ajouter grâce à l’indicateur en bleu.

Gutenberg emplacement bloc

Remarque : les boutons pour modifier, supprimer ou déplacer un bloc n’apparaissent qu’au survol des blocs.

On distingue 5 groupes de blocs de contenus :

  • Communs : ce sont les blocs basiques – les titres, les paragraphes, les listes à puce, les citations, les images, les galeries d’images, etc.
  • Formattage : ce sont les différents formats dans lesquels vous pourrez rédiger vos contenus – classique, HTML, code source, texte préformatté, etc.
  • Mise en page : il s’agit des blocs qui vous permettront de soigner votre mise en page. C’est à mon sens le groupe le plus important, mais il est encore très pauvre pour le moment – séparateur, colonnes, boutons, etc.
  • Widget : vous pourrez, dans ce groupe, retrouver vos widgets WordPress et les intégrer directement dans vos pages / articles.
  • Embed : ce sont des contenus embarqués depuis d’autres plateformes (YouTube, Flickr, Twitter, Tumblr, etc.).

Construction de la page

Insérer une bannière en haut de la page avec le module Cover Image, qui permet d’insérer facilement du texte sur une image.

Ajouter un titre ou une phrase d’accroche à l’aide du module Headings.

Comment déplacer ou supprimer un bloc de contenu.

Insérer, avec le module Gallery, trois images, dans trois colonnes

Module Text Columns

Afficher une image et la redimensionner

On peut choisir une dimension dans les réglages du bloc à droite ou bien redimensionner directement l’image en saisissant les poignées bleues et en les faisant glisser. Attention avec les tailles des images : ce que vous voyez dans l’éditeur n’est pas forcément ce que vous aurez sur le site en ligne. Le rendu peut être différent, pensez donc bien à vérifier votre mise en page avant de publier ou de mettre à jour.

Appel à l’action à l’aide d’un bloc paragraphe que l’on va styliser et d’un bloc bouton.

Autres blocs les plus utiles : les listes à puces, les titres, les sous-titres et les blocs de citations.