AcadCMS version 3 propose désormais un tout nouvel éditeur de contenu par rapport à ses précédentes versions : Gutenberg.

Créé pour le célèbre CMS Wordpress, ce dernier a été importé dans AcadCMS v3. Du fait, pour celles et ceux qui le connaissent déjà, cela leur paraîtra familier.

Pour les autres, Gutenberg est simple à prendre en main. Il facilite la mise en page.

Cet éditeur sera disponible pour la création de vos articles et de vos pages de contenus.

Écrire un paragraphe

Zone de saisie du texte
Zone de saisie de paragraphe (par défaut)
Premiers paragraphes
La touche entrée permet de créer un nouveau paragraphe

Pour commencer à écrire votre texte, cliquez sur la zone de texte où il est écrit "Ajouter du texte ou taper / pour ajouter du contenu".

Une fois votre paragraphe terminé, appuyez sur la touche entrée de votre clavier. Vous serez alors invité(e) par défaut à saisir un nouveau paragraphe.

Pour remonter ou descendre un paragraphe, il suffit de cliquer sur le chevron haut ou bas dans la barre Gutenberg.

ATTENTION, n'oubliez pas de sauvegarder (bouton bleu "Enregistrer").

La barre de mise en forme

La barre de mise en forme est située en haut (par défaut) de la zone saisie.

Barre de mise en forme Gutenberg
Barre de mise en forme Gutenberg

Elle comporte:

  • Un bouton plus (+)
  • Un bouton outils (icône "crayon")
  • Deux boutons flèches (rétablir)
  • Un bouton info (de la page en cours)
  • Un bouton de navigation dans les blocs
  • Un bouton "modifier un type ou un style de bloc"
  • Deux boutons chevrons (monter ou descendre le bloc)
  • Une série de boutons contextuels (ex: options de puces)
  • Boutons de mise en forme (gras, italique, etc.)
  • Un menu "options de blocs"

Bouton plus

Le bouton plus vous donne accès à tous les composants de Gutenberg.

Ces nombreux composants sont classés par type (les plus utilisés, texte, média, etc.)

Pour obtenir un nouveau composant, quelque soit son type, il faut donc cliquer sur le bouton plus.


Bouton plus dans la zone de saisie

Bouton plus dans la barre Gutenberg

Mettre en forme du texte

Pour mettre en forme vos paragraphes, sélectionnez la zone souhaitée et cliquez sur "B" (bold, ou gras en français) ou "I" (italique) dans la barre de mise en forme.

Pour placer le texte à gauche, à droite ou au centre, l'option se trouve également dans la barre de mise en forme.

Vous pourrez également accéder à d'autres options en déroulant le menu dans la barre de mise en forme : texte barré, couleur de texte, etc.

Ajouter un lien

Pour transformer un texte en lien, sélectionnez la zone souhaitée et cliquez sur le symbole "Lien" (en forme de chaîne) . Vous serez alors invité(e) à saisir ou coller une URL (c'est-à-dire une adresse de page Web).


Quand le texte est sélectionné, il faut cliquer sur l'icône en forme de chaîne et ajouter le lien.

Une fois l'URL collée, il faut appuyer sur entrée ou cliquer sur le symbole fléché ENTER pour valider.

Il est possible de demander que le lien s'ouvre dans une nouvelle fenête ("Open in new tab"), en cliquant sur le bouton "on/off" correspondant.

Créer un intertitre (entête)

Pour créer un intertitre, il faut positionner le curseur comme s'il s'agissait d'un paragraphe. En cliquant sur le symbole paragraphe, il est possible de convertir le paragraphe en entête.

La convention veut qu'il n'y ait qu'une seule entête H1 (déjà présente, puisqu'il s'agit du titre du contenu) et que l'entête H2 soit supérieure à H3, H3 à H4, etc. jusqu'à H6.

Créer une liste (puces)

Pour créer un liste, il suffit de cliquer sur le bouton plus (+), soit directement dans le contenu, soit depuis la barre d'options. Vous verrez aloes apparaître l'icône liste.

Pour modifier le type de puces, vous devez utiliser la barre d'options.

Ajouter une citation

Les citations sont disponibles depuis le bouton plus (+).

L'intérêt d'avoir un composant (ou bloc) citation est qu'il avertit les moteurs de recherche que vous ne faites pas un plagiat (ce qui primordial si vous cherchez en bon référencement).

Ajouter du code (encart)

Il est possible que vous ayez besoin de partager du code. Or, celui-ci doit être identifié clairement comme tel, sinon il n'apparaîtra pas clairement.

Avec le bouton code (<>), votre code, une fois saisi ou collé, apparaîtra proprement dans un encart dédié.

Bien évidemment, ce code ne sera pas exécuté.

Manipuler les composants

Pour pouvoir manipuler plusieurs composants en même temps (supprimer plusieurs paragraphes, dupliquer plusieurs paragraphes, regrouper des composants), vous devrez passer en mode "Sélection" afin de pouvoir sélectionner les composants sur lesquels vous voulez intervenir.
Vous trouverez dans la vidéo ci-dessous un exemple pour sélectionner 3 paragraphes et les supprimer.

Les autres composants Gutenberg

Il existe de nombreux autres composants en plus des paragraphes, des entêtes, des citations et des listes.

Vous trouverez toutes sortes d'objets sur lesquels nous reviendrons dans d'autres articles :

  • Les images
  • Les vidéos
  • Les autres médias (pdf, h5p, etc.)
  • Les colonnes
  • Les groupes
  • Les contenus embarqués (Twitter, Instagram, Facebook, etc.)
  • Les blocs personnalisés
  • etc.