Utilise Gutenberg pour de splendides mises en page sur WordPress
  • Post author:

W WordPress offre tous les outils pour une excellente expérience utilisateur directement dans Gutenberg son éditeur.

Que tu sois débutant ou plus confirmé, tu auras toutes les cartes en main pour créer des articles et des pages que tes lecteurs apprécieront.

  • Le guide complet de Gutenberg
  • Editor Plus débloque les limitations de Gutenberg : mise en page pour les mobiles, gestion précise des marges, animations, Lotties, icônes, compteur…
  • D’autres fonctionnalités pratiques à envisager : sommaire automatisé, slider, tweet prérempli…

Découvre des astuces et conseils pour utiliser pleinement la mise en page sous WordPress.

Cet article prend environ 31 minutes à lire. Si tu n’as pas le temps, tu l’épingles sur Pinterest pour le lire plus tard.

WordPress : Guide de mise en page avec Gutenberg [Tutoriel]
Utilise Gutenberg pour de splendides mises en page sur WordPress

Je n’aborde pas l’éditeur classique car, honnêtement, il ne présente aucun intérêt (sauf pour les plus nostalgiques).

Editor Plus, que nous verrons un peu plus tard dans l’article, et les constructeurs de page (comme Elementor) offrent une personnalisation plus poussée. Cependant, je te conseille d’en limiter l’usage à la page d’accueil et aux pages de vente.

Nous attaquons par les bases pour débuter sur WordPress et avec Gutenberg.

Les Fondamentaux : Gutenberg et le maniement des blocs

Les Fondamentaux : Gutenberg et le maniement des blocs

Un aperçu des principales fonctionnalités de Gutenberg en vidéo pour les débutants.

vidéo débuter avec gutenberg l'éditeur de WordPress

Les principes de mise en page sont identiques pour les pages et les articles.

Tu ajoutes un nouvel article (dans le menu de gauche de WordPress).

ajouter un nouvel article

C’est à ce moment que tu fais la connaissance de Gutenberg l’éditeur de pages de WordPress.

L’interface de Gutenberg

La page est divisée en plusieurs espaces.

interface gutenberg article

Tu reviens à l’interface de WordPress avec le logo qui se situe à côté du premier menu.

barre principale

J’utilise principalement le plan de l’article. Il te donne ton volume de mots et met également en évidence une hiérarchisation qui n’est pas logique.

plan de l'article

La navigation entre les blocs peut être utile quand tu souhaites sélectionner un élément précis dans une composition complexe.

bloc navigation

Les titres structurent ton contenu et facilitent sa consultation. Google s’en sert en priorité pour comprendre les thématiques de ton texte.

Le titre principal et le permalien

Tu complètes le titre principal de ton article qui sera automatiquement en hiérarchie 1 (H1).

Il est possible de mettre plusieurs titres H1 dans un article mais cela n’est pas souhaitable.

Gutenberg ajout de titre

 Tu enregistres le brouillon. Cette option apparaît dès que tu commences à travailler sur ton article.

enregistrer brouillon

WordPress génère automatiquement l’URL de ton article.

Ce permalien n’est pas optimisé et mérite d’être revu.

Tu le découvres dans l’onglet Document du menu droit dans la rubrique permalien.

permalien de l'article dans Gutenberg

Tu retrouves tous les mots de ton titre de ton article séparés par des tirets. Tu supprimes tous les mots inutiles pour conserver uniquement le mot-clé de ton article.

Je passe ainsi de “le-guide-de-mise-en-page-des-articles-sur-wordpress” à “mise-en-page-wordpress”.

Ton permalien sera toujours en minuscules sans accent avec les termes séparés par des tirets (touche du 6). Le plus court et compréhensible sera le mieux.

Aparté SEO : WordPress n’offre pas en natif la personnalisation du Titre et de la description qui apparaît dans les résultats des moteurs de recherche.

Je t’encourage fortement à installer une extension spécifique comme Rank Math (gratuit).

Après cette digression, tu t’attaques au texte.

Le maniement des blocs

Les blocs sont les éléments qui composent ta page. Tu vas ajouter un nouveau bloc par catégorie d’élément : texte, visuel, vidéo, colonnes, bouton…

Ils s’empilent verticalement.

blocs gutenberg

Le bloc par défaut est le paragraphe qui abrite du texte. Il est disponible dès que tu sautes une ligne avec Entrée.

Pour ajouter un bloc, tu cliques sur le + qui apparaît au survol entre deux blocs. Il peut être un peu capricieux pour s’afficher.

ajouter bloc gutenberg survol

Une autre option sera de sélectionner un bloc et d’utiliser la touche Entrée puis de cliquer sur Ajouter un bloc situé en fin de ligne.

choix du type de bloc

Tu découvres les blocs les plus souvent utilisés. Tu accèdes aux autres avec Tout parcourir.

mini menu bloc dans l'article

Il existe un raccourci pour gagner du temps.

Tu tapes / dans paragraphe et la liste apparaît.

raccourci bloc

Tu continues la saisie avec les premières lettres du bloc pour filtrer. Par exemple pour intégrer une vidéo YouTube :

filtre vidéo youtube

Tu accèdes directement à l’ensemble des blocs avec le + du menu haut.

liste des blocs pour la mise en page Gutenberg

Les blocs sont organisés par thématiques.

blocs disponibles

Tu cliques sur un bloc pour l’intégrer à l’emplacement sélectionné.

Tu peux également glisser-déposer successivement plusieurs blocs pour éviter les allers-retours.

glisser déposer blocs gutenberg

Pour déplacer ton bloc dans ta page, tu utilises les flèches.

déplacer ton bloc gutenberg

Pour déplacer plusieurs blocs, tu sélectionnes le premier et le dernier de la série avec la touche MAJ enfoncée. Méthode alternative : tu sélectionnes le premier bloc et tu utilises les flèches du clavier en maintenant MAJ enfoncé.

sélection de blocs multiples

Le copier-coller facilite également les déplacements de blocs.

Pour supprimer un bloc Gutenberg, tu utilises le menu déroulant à droite de la barre d’outils puis Retirer le bloc ou la touche effacer (celle avec la flèche vers la gauche).

retirer un bloc

Pour changer le style d’un bloc, tu te positionnes en haut à gauche de ta barre d’outils.

modifier le style de bloc

Tu groupes des blocs pour les gérer de manière globale. Tu appliques, par exemple, un fond de couleur. La gestion des couleurs sera présentée dans le paragraphe suivant.

fond couleur groupe de blocs

Tu sélectionnes tes blocs avec MAJ et tu transformes en groupe. Tu peux également créer directement un groupe et ajouter les éléments à l’intérieur.

grouper blocs

Tu dégroupes dans les options.

dégrouper blocs

Le bloc navigation facilite la sélection du groupe.

naviguer groupe

Une option très pratique : tu passes d’un clic au bloc parent d’une composition qui apparait au survol du symbole du bloc.

bloc parent composition

Quand tu sélectionnes un bloc, le menu de gauche bascule pour dévoiler les options des blocs.

Les réglages sont spécifiques pour chaque type de bloc.

menu des options des blocs gutenberg

Il existe des mises en page déjà réalisées.

Les compositions

Tu accèdes aux compositions en cliquant sur l’onglet spécifique. Elles sont majoritairement utilisées aujourd’hui par les derniers thèmes officiels de WordPress.

blocs compositions gutenberg

Le volume de modèles devrait s’étoffer dans le temps.

L’extension Reusable Block Extented transforme un bloc réutilisable en composition.

Les blocs réutilisables permettent de modifier simultanément des blocs présents dans plusieurs articles et pages différents.

Les blocs réutilisables

Chaque modification que tu opères dans un bloc réutilisable se répercute automatiquement dans l’ensemble des articles.

Tu sélectionnes le bloc et tu l’ajoutes aux blocs réutilisables dans les options.

ajout aux blocs réutilisables

Tu le nommes.

nommer bloc réutilisable

Tu le retrouves désormais dans l’onglet Réutilisables.

menu bloc réutilisables

Pour apporter un changement, tu sélectionnes le bloc dans un des articles. Tu cliques sur modifier, tu effectues la modification et tu sauvegardes.

modifier bloc réutilisable

Tu le retires des blocs réutilisables dans les options.

Je me sers aussi des blocs réutilisables pour intégrer facilement des trames que je personnalise ensuite pour gagner du temps mais cela est plus rapide en passant par les compositions.

Dans ce cas, tu convertis en bloc Gutenberg normal avant utilisation.

retirer réutilisable

Quand tu réalises des recherches de blocs par fonctionnalités, il est possible que l’on t’indique qu’aucun bloc n’est disponible mais que tu peux l’ajouter.

ajout extensions par la recherche

En acceptant, Gutenberg ajoute automatiquement les extensions correspondantes.

Je ne trouve pas que cela soit une bonne idée. Mieux vaut réaliser manuellement la recherche de la meilleure extension et éviter de les multiplier.

Donnons un peu de vie et de couleurs à tes créations.

La mise en forme du texte, des titres et des tableaux

La mise en forme du texte, des titres et des tableaux

Nous débutons avec les paragraphes qui gèrent le texte de ton article.

Tu trouves dans la barre au-dessus de ton paragraphe les fonctionnalités de mise en page standard avec les alignements

alignements

et les options de formatage du texte.

options de formatage du texte

Les options de formatage directement accessibles :

Gras | Italique | Lien

Les options avancées de formatage :

Barrer | Code en ligne | Couleur du texte | Exposant |23bloc html | Indice

Le code en ligne précise qu’il s’agit de code HTML et évite qu’il ne s’exécute.

Pour ajouter un lien, tu sélectionnes ton texte et tu copies l’url (ou tu tapes des termes pour disposer d’une suggestion d’articles). Tu valides avec la flèche.

Tu ouvres ton lien dans un nouvel onglet en dépliant le menu.

insérer un lien

Rank Math ajoute les options Ne pas suivre le lien (pour les moteurs de recherche) et Lien sponsorisé (directive de Google).

options des liens de rank math

Les images intégrées dans le texte sont surtout utiles dans les tableaux. Tu cliques sur l’image pour indiquer sa largeur en pixels.

largeur image inline

Tu as remarqué que l’éditeur ne propose pas d’émojis 😢. Ils sont pourtant parfaitement gérés par WordPress.

Tu les fais apparaître avec les raccourcis Touche Windows (à gauche de ALT) + ; ou Ctrl + Cmd + Espace sur Mac.

insérer emojis wordpress

Tu disposes de fonctionnalités supplémentaires dans le menu de droite.

Les options du texte dans le menu

Tu as le choix entre 7 tailles préformatées de texte.

Tu affines en indiquant la hauteur précise de la police (en pixels).

tailles texte

T Tu affiches une lettrine. Elle met en avant la première lettre de ton paragraphe dans un style magazine.

ajout d'une lettrine sur Gutenberg

Modifie la couleur de ton texte et du bloc

Tu personnalises la couleur de ton paragraphe dans Réglages de couleur.

Couleur d’arrière-plan

Couleur du texte

Tu disposes de couleurs prédéfinies pour le texte et le fond.

personnaliser la couleur de ton paragraphe

Tu as accès à la gamme complète de couleurs dans Couleur personnalisée à l’aide du sélecteur de couleurs ou en rentrant directement la référence Hex.

couleur personnalisée

Si tu souhaites mettre en couleur une seule partie du texte, tu passes par Couleur du texte directement dans la barre.

couleur du texte

Il n’est pas encore possible de définir la couleur d’une partie du fond du paragraphe. Voici comment faire et quelques astuces supplémentaires.

Les mises en formes disponibles en HTML

Tu trouves Modifier en HTML dans les options du bloc.

modifier html sur WordPress

Tu ajoutes une balise avant le texte concerné (sous la forme <XXX>) et une balise après (sous la forme </XXX>).

intégration du code html

Tu reviens au bloc classique avec Modifier visuellement.

modifier visuellement

Surligner : <mark>Texte surligné</mark>
Texte surligné

Texte et fond avec des couleurs personnalisés :

<span style="color: #ff5733;background-color: #9b51e0">Texte</span>
couleur personnalisées du texte et du fond sur WordPress

Effet surlignement personnalisé d’une partie du texte

L’espace insécable : &Gnbsp; (à copier sans le G en deuxième position)

Celui-ci s’ajoute entre les lettres à maintenir ensemble en remplacement de l’espace.

html espace insécable

Il évite ainsi les coupures disgracieuses en particulier avec la ponctuation et les chiffres.

texte sans espace insécable
texte avec espace insécable

Note qui s’affiche au survol : <abbr title="Texte au survol" lang="fr">Texte à expliquer</abbr>
Gaufre

Les titres assurent la bonne compréhension de ton article.

Les titres

Tes lecteurs naviguent aisément entre les différents chapitres et trouvent facilement l’information recherchée.

Google utilise les titres pour identifier les thématiques traitées dans ton article.

Tu sélectionnes le niveau de hiérarchie à appliquer.

niveau des titres dans WordPress

Même si le titre 1 (H1) est présent. Celui-ci est attribué automatiquement au titre principal de l’article. Mieux vaut ne jamais l’utiliser.

Cela donne en pratique :

  • Mon premier sujet (Titre 2)
    • Ma section 1.1 (Titre 3)
      • Ma sous-section 1.1.1 (Titre 4)
        • Texte (Paragraphe)

Il est rarissime d’utiliser les titres au-delà du Titre 4.

Chaque niveau de titre applique un style spécifique au texte déterminé par ton thème dans la feuille de style CSS.

Les niveaux de titres ne doivent pas être utilisés pour formater ton texte mais uniquement pour le structurer. Tu perturberais la compréhension des moteurs de recherche.

Il est possible de sortir les titres de la zone de texte avec les options Grande largeur et Pleine largeur.

titre pleine largeur

Les listes aèrent la mise en page et évitent l’effet “pavé de texte”.

Les listes

Deux types de listes sont disponibles :

options de liste
  • la liste classique avec un point
  1. la liste ordonnée dont la numérotation s’ajuste automatiquement

Tu organises la hiérarchisation avec les retraits.

hiérarchisation des listes
  1. Point principal
    1. Sous partie

Les citations animent le texte.

Les citations

Tu disposes de deux options pour les citations. Un emplacement spécifique pour l’auteur est disponible sous le texte.

La citation classique

citation classique

Ceci est une citation d’une grande portée philosophique.

Auteur inconnu

La citation en exergue met en valeur le texte en l’isolant du contenu.

citation en exergue

Ceci est une citation hautement remarquable.

Auteur timide

Il existe également le bloc couplet pour les paroles d’une chanson.

Les tableaux sont surtout utiles pour présenter des chiffres. Tu verras que les colonnes sont bien plus pratiques pour mettre en forme. Il est désormais possible d’y ajouter des visuels.

Les tableaux

tableau

Tu configures le nombre de lignes et de colonnes.

configure lignes et colonnes d'un tableau WordPress
VilleChienChat
Paris35623
Bordeaux87789

Tu ajoutes des bandes de couleurs pour marquer les lignes en modifiant le style.

changer le style du tableau avec des rayures

Tu gères l’alignement du tableau.

alignement d'un tableau
VilleChienChat
Toulon5898
Paris35623
Bordeaux87789

Tu remarqueras peut-être que ton texte touche le cadre. Ce qui n’est pas particulièrement élégant. En fonction de tes réglages CSS et de ton thème, les alignements à droite ou à gauche ne gèrent pas forcément bien l’ajout d’une marge.

Voici ce que j’avais.

problème marge tableau

J’ai ajouté les CSS suivantes

/* marges tableaux */
table td,
table.wp-block-table td {
padding-left:10px!important;
padding-right:10px!important;
}

pour rectifier le tir.

marge tableau rectifiée

Retrouve la procédure pour intégrer des CSS.

Tu ajoutes/retires des lignes et des colonnes avec Modifier le tableau.

modifier tableau : ajout et retrait de lignes et colonnes

Pour ajouter une image, tu te places dans la case correspondante et tu utilises Image en ligne.

image dans un tableau WordPress
ChienChat
Autonomeicône fauxicône vrai
Défenseicône vraiicône faux
Te mangeraicône fauxicône vrai

Tu disposes d’options supplémentaires dans le menu de droite. Je les ai utilisées dans le précédent tableau.

  • Tu égalises la largeur des colonnes avec une largeur fixe.
  • Section d’en-tête ajoute une ligne de titre affiché en majuscules.
  • Section de pied de page me laisse dubitatif sur son usage.
  • Tu disposes de 4 couleurs de fond. Tu peux cumuler avec les rayures mais c’est souvent esthétiquement discutable.
mise en forme avancée des tableaux

Ta page se sentirait souvent bien nue sans illustrations.

Insère des visuels (images, galeries & vidéos)

Insère des visuels (images, galeries & vidéos)

Nous débutons par l’insertion d’une image seule.

Intègre une image

Tu sélectionnes le bloc Image et tu accèdes aux options d’insertion.

bloc image
interface images

La méthode la plus simple consiste cependant à glisser directement ton image à l’emplacement souhaité.

Tu complètes la description de l’image pour les personnes malvoyantes dans le menu de droite.

Google n’arrive pas à comprendre les images et s’en sert pour présenter tes images dans Google Images.

texte alternatif image

Tu ajustes les dimensions de l’image. Cependant, je te conseille d’adapter la taille en amont pour optimiser le poids des visuels et accélérer le chargement de ta page.

régler la dimension des images

Tu ajoutes un lien à ton image exactement comme pour du texte.

Tu arrondis ton image dans les styles de bloc.

arrondir une image

Je trouve que l’arrondi fonctionne particulièrement bien avec les visuels carrés.

exemples images arrondies Gutenberg

Tu disposes d’options de bordures et d’encadrés supplémentaires dans le thème Twenty Twenty-One.

options bordure et cadre image
image bordure
image cadre

Il est possible de modifier l’image directement dans Gutenberg :

  • Recadrer
option recadrer
  • Zoomer
zoom image
  • Changer les proportions
changer proportion image
  • Pivoter
pivoter image

Je ne m’attarde pas trop sur ces options car je pense qu’il s’agit d’une fausse bonne idée. Le travail des images en amont permet d’optimiser la taille et de réduire au maximum le poids des images.

Dans les options des images, tu indiques le style d’intégration au sein du texte. Le rendu n’est pas toujours facile à maîtriser avec aligner à gauche et aligner à droite qui interfèrent avec le texte. Tu peux ajouter des espacements pour éviter les interactions.

alignement image

La galerie facilite la présentation d’un mur d’images.

Présente plusieurs images dans une galerie

icône galerie

Tu charges tes visuels.

charger les images de la galerie

Tu choisis le nombre d’images présentées en largeur.

nombre colonnes

Les visuels de la galerie se répartissent en largeur et s’ajustent automatiquement.

effet recadrage des images galerie WordPress

Je préfère charger les images dans la bibliothèque de médias en amont pour leur attribuer un texte alternatif.

Tu cliques tour à tour sur chaque image de ta galerie

images

et tu complètes le descriptif.

texte alt

Superpose du texte sur tes images

Tu disposes de l’option d’intégrer du texte au-dessus des images en transformant le bloc texte en bannière. Tu trouveras les explications concernant les bannières par la suite.

option ajout texte au-dessus image
superposition texte

Le procédé diffère pour les vidéos.

Intègre une vidéo

Il est possible d’intégrer une vidéo exactement comme une image.

insérer une vidéo dans Gutenberg

Les vidéos sont extrêmement volumineuses. Elles saturent ton serveur et ralentissent ta page. Mieux vaut les charger sur des services spécialisés comme YouTube, Viméo, TikTok…

Tu les ajoutes à ta page à l’aide des contenus embarqués.

La démarche est similaire pour tous. Je prends l’exemple de YouTube.

Tu complètes l’URL de ta source et tu valides avec Embarquer.

intégrer une vidéo YouTube dans WordPress

Je suis passé à une solution plus radicale dans mes articles. J’intègre uniquement une image de la couverture de la vidéo sur mon site avec un lien vers YouTube.

La bannière offre de nombreuses opportunités créatives.

La bannière

Tu intègres, par exemple, des publicités vers tes produits ou services.

icône bannière

Tu choisis une image, une vidéo ou un fond coloré

interface bannière

et tu insères du texte en superposition.

inscrire texte

Tu modifies la partie visible de ton visuel à l’aide du point de focalisation.

sélectionner un point de focalisation

Tu précises la hauteur de la bannière.

hauteur de la banniere

Tu peux également la mettre en pleine hauteur qui s’adaptera automatiquement à l’écran de ton visiteur.

Bannière pleine hauteur

Un fond de couleur est appliqué sur le visuel pour accentuer la lisibilité. Tu personnalises ce calque de superposition avec la couleur de ton choix

couleur de superposition de la bannière

et son intensité avec l’opacité.

opacité de l’arrière plan

Il est possible d’appliquer un dégradé de couleurs.

dégradé de couleurs d'une bannière WordPress

Tu ajoutes un effet de défilement de l’image sous le texte (parallaxe) en activant Arrière plan fixe.

effet parallaxe dans les articles sur Gutenberg

Le rendu diffère en fonction de ton thème. Tu devras souvent réaliser plusieurs prévisualisations pour ajuster (y compris sur mobiles).

Tu intègres une marge interne pour aérer ton visuel.

marge interne

La bannière est parfaite pour être présentée en pleine hauteur. Celle-ci prendra la taille exacte de l’écran de ton visiteur.

permuter toute hauteur

Cela fonctionne parfaitement avec la pleine largeur pour couvrir tout l’écran.

pleine largeur

Tu places les éléments dans l’espace.

disposition éléments bannière

Tu ajoutes les blocs que tu souhaites dans ta bannière comme dans une colonne. Tu tapes / pour faire apparaître le menu des blocs.

ajout bouton dans une bannière

Ce que tu vois dans Gutenberg diffère de l’apparence sur ton site.

Prévisualise ton travail et publie

Gutenberg propose de prévisualiser sur mobile et tablette. Il s’agit d’un gadget sans intérêt car cela ne te donne aucune idée du rendu sur ton site une fois publié.

Il est beaucoup plus utile de Prévisualiser dans un nouvel onglet pour voir ce que ton article va donner une fois publié.

prévisualiser publication wordpress

Pour voir ce que ton travail donne sur mobiles :

Sur Chrome

Tu fais un clic droit et inspecter.

inspecter chrome

Tu choisis l’appareil sur lequel tu veux visualiser ton site. Tu disposes ainsi du rendu réel de ton article sur mobiles et tablettes.

inspecter mobile chrome

Sur FireFox

Clic droit > Examiner l’élément

examiner élément firefox

Tu cliques sur l’icône présente en bas à droite.

ouvrir aperçu mobile firefox

Tu sélectionnes l’appareil.

aperçu mobile Firefox

Quand ton article est finalisé, tu cliques sur publier

publier gutenberg

et tu confirmes. Je te recommande de vérifier la date de publication.

confirmer publication wordpress

Il est possible de simplifier les éléments présents en fonction de ton utilisation.

L’interface de Gutenberg et sa personnalisation

Tu disposes d’options avancées.

menu avancé

L’option Barre d’outil supérieure remonte le menu des blocs dans la barre principale.

barre supérieure

Mise en lumière voile les éléments non sélectionnés.

mise en lumiere

Tu passes dans une vue qui affiche le code HTML de ton article avec Éditeur de code.

éditeur code html de la page

Je trouve cependant plus pratique de visionner le code au niveau du bloc.

affiche HTML page

Tu désactives l’affichage de blocs que tu n’utilises pas dans le gestionnaire de bloc.

gestionnaire de blocs
désactiver des blocs

Les options de tes articles

Tu retrouves les options de l’article dans le menu de droite dans l’onglet Document.

onglet option document

C’est ici que tu trouveras l’image d’illustration de l’article

image mise en avant

et l’extrait de l’article qui servira de description pour les moteurs de recherche si tu n’utilises pas une extension SEO comme RankMath ou Yoast.

extrait article

Tu indiques également la catégorie de ton article.

catégorie de l'article

Si tu souhaites masquer les éléments de ce menu dont tu ne te sers pas. Tu peux les désélectionner dans le menu Avancé section Options.

options menu
options configuration menu droit

Nous allons voir comment combiner tous les éléments de ta page.

Met en page : disposition, colonnes, boutons…

Met en page : disposition, colonnes, boutons...

Les séparateurs et espacements aèrent et rythment l’espace.

Les séparateurs et des espacements

Les séparateurs soulignent les grandes parties de ton texte en complément des titres.

séparateur

Tu définis le style.

style séparateurs

Court (par défaut)


Large


Pointillés


Tu appliques la couleur de ton choix mais ne peux pas définir l’épaisseur sauf en passant par les CSS de ton thème.

L’espacement incorpore des espaces vides pour aérer. Un espacement de 75 pixels est inséré sous ce bloc.

Tu règles la hauteur de l’espacement en pixels dans les options

réglages hauteur espacement

ou directement sur le bloc.

hauteur espacement avec la poignée

Accole du texte à une image

Médias et texte est prévu pour cet usage.

icône media et texte

Les deux zones se gèrent exactement comme des blocs paragraphes et images standards.

bloc média et texte

Je ne vais pas m’y attarder car les essais réalisés avec ce bloc ne m’ont jamais convenus. La taille des éléments est, nous allons dire, fantasque en particulier sur mobiles.

Les colonnes seront largement préférables pour la mise en page d’un article sur WordPress si tu ne veux pas perdre ton temps.

Les colonnes pour une mise en page souple

Les colonnes subdivisent ton bloc verticalement. Tu empiles les éléments à l’intérieur.

intégrer des colonnes sous WordPress

Tu sélectionnes ton nombre de colonnes.

ajout bloc colonnes

Tu règles précisément la largeur en % des colonnes.

réglage en % largeur

Tu ajoutes des colonnes supplémentaires en largeur dans le menu de droite. Cette option apparaît quand tu sélectionnes le bloc complet.

ajout colonnes en largeur

Tu gères l’alignement vertical au sein du bloc ou des colonnes individuellement.

alignement vertical du bloc colonnes

Tu cliques sur le + pour ajouter un élément.

insérer un bloc dans une colonne

Tu retrouves le + pour ajouter des blocs dans la colonne.

empiler blocs

Tu personnalises les couleurs.

menu couleurs colonnes

Les colonnes s’affichent l’une après l’autre sur mobile. Des espacements évitent que certains éléments ne se touchent.

colonnes mobiles

Si tu veux réaliser un ensemble audacieux, un croquis avec les mesures aide pour placer les blocs.

exemple mélange colonnes

Cette option est valable pour tous les blocs imbriqués mais s’avère particulièrement pratique pour les colonnes.

Tu peux remonter au bloc parent en survolant le symbole de ton bloc colonnes.

sélection du bloc parent

Les effets de chevauchement dynamisent les mises en page mais ne sont disponibles que dans Twenty Twenty-One.

option chevauchement colonnes
image superposée

Les marges ne sont pas réglables directement dans Gutenberg sans extension spécifique. Cependant, tu peux grouper les éléments de ta colonne et/ou ajouter un fond de couleur pour ajouter des marges internes dans tes colonnes.

Lire la suite

Lire la suite ne concerne pas l’apparence de ton article. Tu définis la limite de la partie visible avant le bouton continuer la lecture sur ta page articles.

continuer la lecture
lire la suite
balise lire suite

Le bloc fichier facilite la mise à disposition des documents sur ton site.

Les documents à télécharger

bloc fichier

Tu charges le document à partager.

charger un fichier

Le nom qui apparait est celui du fichier.

bouton télécharger un fichier

Tu précises si tu souhaites que ton fichier s’ouvre dans un autre onglet dans le menu de droite.

Je te recommande d’héberger les fichiers dans des espaces de partage comme Google Drive pour ne pas alourdir ton serveur.

Tu indiques alors le lien de partage fourni par le site dans un bouton.

Les boutons

boutons sur WordPress

Tu inscris ton texte directement dans le bouton.

texte du bouton

Tu indiques ton lien.

ajout lien bouton

Tu définis le style de ton bouton.

style bouton

Tu personnalises les couleurs y compris en dégradés.

couleurs boutons

Tu règles l’arrondi des coins.

arrondi bordure

Tu indiques la taille du bouton avec les réglages de la largeur.

taille bouton gutenberg

La fonctionnalité Centrer est présente au niveau du bloc. Les compositions aident bien pour les boutons multiples.

Navigue au sein de l’article

Tu retrouves dans les options avancées la possibilité de créer un point de repère sous forme d’une ancre HTML. Tu l’utilises pour créer un lien qui dirigera immédiatement sur cette section.

L’identifiant de ton ancre doit être unique et respecter les règles des URL (minuscules séparés par des tirets du 6).

ancre html

Tu indiques le lien interne en ajoutant un # avant l’identifiant.

lien interne

Tu peux réaliser des liens vers cette section depuis d’autres articles ou sites en ajoutant l’url complète sur le modèle : https://www.monsite.fr/article/#identifiant

C’est parfait pour les liens ponctuels mais pour un sommaire dans chaque article mieux vaut passer par un sommaire automatisé pour éviter de perdre ton temps. De plus, il se met à jour sans quand tu es besoin de t’en soucier.

Les codes courts intègrent des fonctionnalités avancées dans tes articles.

Les codes courts (shortcodes)

Les codes courts sont générés par des extensions. Je les utilise pour intégrer un formulaire, un sommaire et afficher le temps de lecture de l’article.

Tu copies-colles le code indiqué dans l’extension dans le bloc spécifique.

interface code court

Les symboles de nombreux réseaux sociaux sont disponibles directement dans Gutenberg.

Les icônes des réseaux sociaux et services

Tu retrouves une liste avec quelques réseaux sociaux déjà présents.

icones reseaux sociaux 1

Tu cliques sur celui que tu veux intégrer et tu complètes le lien.

choix réseaux sociaux

Tu sélectionnes l’icône WordPress et tu retires le bloc.

retirer l'icône wordpress du partage sur les réseaux sociaux

Tu retrouves de nombreux autres réseaux sociaux et services dans Ajouter un bloc.

ajouter un réseau social

Tu intègres le lien pour qu’il soit pris en compte.

adresse amazon

Tu disposes de 4 tailles prédéfinies.

taille icônes réseaux sociaux

Les CSS sont pour moi le moyen le plus rapide de modifier des paragraphes de texte.

Des mises en valeur en CSS

Des mises en valeur en CSS

Si tu appliques une recette, utiliser les CSS n’a rien de sorcier.

Avant de te lancer, tu sauvegardes ton site. Le risque est nul avec les CSS mais la prudence n’est jamais mauvaise conseillère.

Je te propose un retrait avec une bordure colorée pour faire ressortir du texte.

Mise en avant avec une bordure en couleur

Tu ajoutes un retrait et un peu de couleur pour souligner un passage important.

retrait et bordure colorée en CSS

Tu intègres ce code dans les CSS de ton thème.

/* bordure coloree pour mise en avant */
.miseenavant {
 border-style:solid!important;
 border-width:0px 0px 0px 5px!important;
 border-color:#FF751E!important;
 background-color:#ffffff!important;
padding-left:18px!important;
margin-left:40px!important;
}

Les éléments à personnaliser :

  • L’épaisseur de la bordure : border-width:0px 0px 0px 5px!important;
  • La couleur de la bordure : border-color:#FF751E!important;
  • La couleur du fond : background-color:#ffffff!important;
  • L’espace entre le texte et la bordure : padding-left:18px!important;
  • Le décalage entre la bordure et le bord : margin-left:40px!important;

Apparence > Personnaliser > CSS additionnel

menu CSS additionnel

Tu colles le code

CSS additionnel

et tu publies.

publier CSS additionnel

Tu sélectionnes le bloc de texte à mettre en valeur et ajoute le nom de la fonction miseenavant dans le menu de droite Avancé > Classe(s) CSS additionnelle(s).

ajout d'une classe CSS à un bloc WordPress

Tu visualiseras le résultat dans la prévisualisation de ton article.

Si tu souhaites capter l’attention de ton lecteur, un symbole renforcera la mise en valeur.

Une notification avec un symbole

notification colorée avec icône dans gutenberg

Tu ne peux pas mettre d’éléments en gras, en italique ou ajouter un lien au milieu d’une ligne dans ce bloc. Ce problème dépasse mes compétences.

Tu intègres ces CSS.

/* bloc mis en avant avec symbole */

.bloc-attention {
margin-bottom:2em;
background-color:#D1C0FF;
border-radius:6px;
padding-top:1em;
padding-bottom:1em;
display:flex;
flex-direction:row;
align-items:center;
-webkit-box-shadow: 13px 12px 16px -12px rgba(0,0,0,0.36);
-moz-box-shadow: 13px 12px 16px -12px rgba(0,0,0,0.36);
box-shadow: 13px 12px 16px -12px rgba(0,0,0,0.36);
padding-right:20px;
}

.bloc-attention:before {
content: url("tonurl");
-webkit-font-smoothing: antialiased;
font: normal 40px/1;
padding-left:20px;
padding-right:20px;
align-items:center;
display:flex;
flex:0 0 0%;
}

Les éléments à personnaliser :

  • La couleur du fond : background-color:#D1C0FF;
  • L’icône : content: url(“tonurl”);

J’ai utilisé les icônes présentes dans WordPress car elles sont libres de droit. Cela fonctionne évidemment avec toutes les icônes.

Pour éviter de ralentir ton site, tu charges uniquement les icônes dont tu as besoin. Cela évitera également l’appel à un site externe.

Tu ne peux pas charger du SVG sur WordPress en natif. Tu installes SVG Support.

svg support

Si tu as d’autres personnes que toi qui publient sur ton site, tu restreins les accès uniquement aux administrateurs dans les réglages.

restriction administrateurs

Tu te connectes sur Iconify et tu choisis l’icône à intégrer.

choix icone

Dans l’onglet SVG, tu modifies les dimensions (40 X 40 px par exemple), la couleur et tu opères des transformations. Tu télécharges.

télécharger icône

Tu ajoutes ces fichiers dans tes médias en ajoutant une description alt.

Tu cliques sur ton icône

ajouter icône svg

et récupères le lien à intégrer dans le code CSS.

copier lien svg

Les CSS personnalisées s’appliquent également à des blocs groupés.

grouper

Tu ajoutes bloc-attention dans les CSS additionnelles du groupe.

css additionnel pour un groupe de blocs dans Gutenberg

Nous avons toujours besoin d’un encadré simple.

Un encadré avec une bordure colorée

encadré coloré en CSS dans Gutenberg

Tu ajoutes ces CSS.

.bloc-encadre {
border: 2px solid #FF8F1F;
margin-bottom:2em;
background-color:#D1C0FF;
border-radius:6px;
-webkit-box-shadow: 13px 12px 16px -12px rgba(0,0,0,0.36);
-moz-box-shadow: 13px 12px 16px -12px rgba(0,0,0,0.36);
box-shadow: 13px 12px 16px -12px rgba(0,0,0,0.36);
padding:20px;
}

Les éléments à personnaliser :

  • L’épaisseur et la couleur de la bordure : border: 2px solid #FF8F1F;
  • La couleur du fond : background-color:#D1C0FF;

Tu ajoutes bloc-encadre au niveau du bloc.

bloc encadré
WordPress : Met en avant ton texte avec les CSS. #wordpress #blog #site Cliquez pour tweeter

Nous avons vu que Gutenberg dispose de beaucoup d’options mais tu vas voir qu’il est possible d’aller bien plus loin.

Lève les limitations de Gutenberg avec Editor Plus

Lève les limitations de Gutenberg avec Editor Plus

La qualité de cette extension est impressionnante pour un plugin récent. La bonne nouvelle est qu’il est entièrement gratuit car il est lié à un service de design de compositions de page (qui honnêtement ne casse pas trois pattes à un canard).

Comme pour les constructeurs de page, mieux vaut limiter l’utilisation de cette extension sur un petit nombre de pages pour éviter de devoir reprendre des dizaines de pages ou d’intégrer les éléments dans des blocs réutilisables.

Les principales fonctionnalités d’Editor Plus en vidéo.

vidéo des principales fonctionnalités d'Editor Plus

Tu actives Gutenberg Blocks Library & Toolkit – Editor Plus by Extendify.

extension editor plus

La première choses que tu remarques est l’apparition de nouvelles options dans tes réglages des blocs.

nouvelles options editor plus

Une des options les plus appréciables est que tu disposes de réglages spécifiques pour les tablettes et les mobiles.

réglages mobile

Police

  • Le poids de la fonte
  • Sa taille
  • La hauteur de ligne
  • L’interlettrage
  • Le style
typographie

La taille s’indique en PX, %, EM… Le fait que le pourcentage soit par défaut me perturbe un peu.

taille en pourcent

Tu règles finement les dégradés

dégradé fond

que tu peux appliquer en transparence.

effet superposition dégradé

Tu appliques une image en fond avec :

  • La couverture (automatique, couverture globale ou contenu)
  • La répétition
  • L’effet parallaxe
  • Si l’image recouvre les autres éléments

Cet effet se cumule avec les fonds de couleur.

réglages image fond
exemple texte image

L’effet de police transparent est à tester pour ses titres.

transparence textes
effet titre inspirant

Options d’ombre

  • Externe / Interne
  • Couleur
  • Décalage en largeur
  • Décalage en hauteur
  • Flou
  • Étendue
ombre bloc
effet ombre bloc

Bordure

Elle s’applique sur tous les côtés ou tu indiques chaque côté séparément dans Advanced.

bordure
bordure image

Arrondi de bordure

Son fonctionnement est classique.

incurvation bordure
effet incurvation bordure

Tu peux utiliser des arrondis asymétriques dans Advanced.

arrondis assymetriques bordure

Marges

Elles offrent des réglages fins utiles dans les compostions plus complexes en particulier avec les colonnes.

marges

Les marges négatives permettent les chevauchements d’éléments. Tu coches Droite et Gauche pour appliquer les marges automatiques et centrer.

effet recouvrement
recouvrement elements superposition

Marges internes

marges internes

Taille de l’élément

  • Largeur
  • Largeur maximale
  • Hauteur
  • Hauteur maximale
taille element

L’index Z

Tu précises une hauteur de l’élément dans les superpositions (le chiffre le plus élevé est au-dessus).

z index gutenberg

Le bloc du centre de valeur plus basse est ainsi masqué dans cet exemple.

recouvrement elements superposition

Séparateur de sections

Les séparateurs font la différence dans un design pour éviter la succession monolithique de blocs. Cependant, je ne vais pas m’étendre dessus car j’ai remarqué quelques bugs et qu’il est assez compliqué à exploiter en l’état.

12 formes sont disponibles.

selection modele separateur

Le résultat

résultat séparateur section

J’ai modifié la couleur pour que tu le situes mieux dans Gutenberg.

séparateur section

Les animations

  • Choix de l’animation
  • Visualisation
  • Direction de l’effet
  • Durée
  • Délais
  • Application
options animations

CSS spécifiques pour un bloc

css section

Les nouvelles options de blocs

Les formes blob pour les images

nouvelles formes images

L’espace entre les colonnes

espace intercolonnes

Les icônes dans les textes

icone texte

8 nouveaux blocs

Ils sont rassemblés dans Editor Plus Blocks :

  • Notation
  • Compteur
  • Barre de progression
  • Texte dépliable
  • Onglets
  • Icônes
  • Décompte
  • Animations Lottie
blocs supplémentaires

Les réglages sont complets avec une personnalisation poussée

options de notation

comme le choix dans un calendrier pour le décompte.

options décompte

Voici ce que cela donne rapidement.

rendu des nouveaux blocs editor plus

Ajoute des designs et de nouveaux blocs

Tu disposes de compositions de pages ou d’éléments payantes (dont 3 essais gratuits) qui n’apportent pas grand-chose dans Library.

bibliothèque de compositions
exemples compositions

À l’opposé, les blocs gratuits que tu ajoutes en supplément sont sympathiques. Tu sors de Gutenberg : Réglages > Editor Plus > Onglet Blocks

reglages editor plus

Tu cliques sur Visit Blocks Library.

bibliothèque de blocs editor plus

Tu choisis celui que tu souhaites intégrer dans Gutenberg.

choix de modèle de bloc

Tu sélectionnes Copy Code

copier code du bloc

puis Add Block

ajout nouveau bloc

et tu colles le code.

colle code bloc

Tes nouveaux blocs sont disponibles dans Apparence directement dans Gutenberg.

choisir nouveaux blocs
Une extension extraordinaire pour lever les limitations de Gutenberg : accordéon, marges, superpositions, animations… Cliquez pour tweeter

D’autres extensions pour intégrer de nouvelles fonctionnalités

D'autres extensions pour intégrer de nouvelles fonctionnalités à Gutenberg

Une vidéo pour t’inspirer des idées de nouvelles fonctionnalités à exploiter.

vidéo 9 astuces pour ta mise en page

Un sommaire automatisé

Tu installes l’extension Easy Table of Contents.

extension WordPress Easy Table of Contents pour une table des matières automatisée

Tu la retrouves dans Réglages > Table des matières.

menu Table des matières

Tu indiques où tu souhaites qu’elle soit active. Blocs sert pour l’intégrer manuellement au sein de ton contenu.

présence table par supports

L’extension propose d’ajouter un sommaire sans aucune intervention de ta part.

Tu indiques les supports concernés et l’emplacement souhaité.

insertion automatique d'une table des matieres

Je préfère l’intégrer manuellement.

  • Tu précises le nombre minimum de titres présents dans une page pour déclencher l’apparition de la table des matières.
  • Tu ajoutes un intitulé à ton sommaire.
  • Tu indiques si ton sommaire est dépliable.
  • Compteur ajoute une numérotation avant tes titres.
réglages table matières

Je te conseille de laisser la largeur en automatique.

Tu personnalises la taille de la police du titre et des liens de la table des matières.

apparence table des matières

5 thèmes de couleurs prédéfinies sont proposés.

personnaliser la table des matières WordPress

Autant prendre 2 minutes pour personnaliser les couleurs.

personnalisation couleurs table des matières

Tu définis les niveaux de titres qui vont être affichés. Les H2 fonctionnent bien en général.

choix des niveaux de titres

Tu sauvegardes ces modifications.

Pour intégrer un sommaire manuellement, tu ajoutes un bloc Code court avec

[toc]
insérer manuellement une table des matières

Découvre comment ajouter ce sommaire en sticky dans ta colonne latérale.

Le bouton aux fonctionnalités avancées de Kadence Blocks

Tu disposes désormais d’un bouton supplémentaire.

kadence advanced button

La zone pour indiquer ton lien est immédiatement accessible.

ajout lien bouton kadence

Tu complètes ton texte.

intègre texte du bouton kadence

Dans le menu de droite, tu indiques le nombre de boutons de la ligne.

nombre boutons

Tu définis l’alignement de tes boutons.

alignement des boutons

Tu personnalises la taille du texte, du bouton et sa largeur.

réglages texte bouton kadence

Tu personnalises les couleurs :

  • couleur du texte
  • fond (uni ou dégradé)
  • couleur de la bordure
  • présence d’une ombre
couleurs boutons kadence

Tu définis l’épaisseur et l’arrondi de la bordure.

bordure du bouton kadence

Il est possible d’ajouter une icône. Cependant, cela ne fonctionne pas avec tous les thèmes. À tester.

icône bouton kadence

Tu précises l’espacement entre les boutons.

espacement boutons kadence

Tu recommences les réglages pour définir l’apparence du bouton au survol dans l’onglet Hover.

survol bouton kadence

Voici un exemple de rendu.

exemple bouton kadence

Les onglets et les menus en accordéon évitent que tout ton texte apparaisse immédiatement. Les visiteurs choisissent ce qu’ils souhaitent consulter.

L’affichage par onglets et par accordéon

L’extension Kadence Blocks – Gutenberg Page Builder Toolkit ajoute ces fonctionnalités dans les blocs Gutenberg.

Tabs gère l’affichage par onglets.

bloc kadence affichage du texte par onglets

Voici un exemple que j’ai réalisé rapidement.

exemple affichage onglets

Tu choisis le style d’affichage.

style graphique des onglets

Tu complètes tes textes directement dans les emplacements.

compléter textes onglets

Tu supprimes un onglet avec la croix qui apparaît au survol.

supprimer onglet

Tu ajoutes un nouvel onglet à l’aide d’Add Tab.

ajout onglet

Tu définis l’orientation des onglets dans le menu de droite.

orientation onglets

Il est possible de disposer d’un affichage différent sur les mobiles.

emplacement sur mobiles

Tu indiques l’onglet qui sera ouvert par défaut.

onglet par défaut

Tu personnalises l’ensemble des éléments si tu le souhaites.

personnalisation des onglets

Le menu accordéon fonctionne sur un principe similaire.

accordéon kadence
exemple accordéon

Tu disposes de 4 styles au choix.

style accordéon

Tu rédiges tes textes et titres.

complète textes de l’accordéon

Tu ajoutes ou retires un niveau à l’aide des boutons.

ajouter bloc liste accordéon

Les réglages dans le menu de droite indique si le menu ouvert se replie quand tu en ouvres un nouveau.

Tu précises si tu souhaites que les textes soient masqués au départ.

réglages ouverture panneaux accordéon

Du texte superposé

L’extension Stackable – Page Builder Gutenberg Blocks permet des compositions plus élaborées avec Image Box.

image box stackable

Tu disposes par défaut de trois images en largeur.

interface images avancées

Tu détermines le nombre d’images entre 1 et 4 dans Style > General.

définir le nombre d'images

Tu charges les images en cliquant en dehors de la zone de texte.

charger l'image

Tu complètes les textes et le lien directement dans l’emplacement.

description image et lien

Dans Style, tu personnalises la taille des images,

style image

les couleurs des superpositions à l’affichage et au survol,

couleur de superposition

l’effet de zoom au survol,

effet de survol de l'image

les éléments de description présents sur l’image,

choix des éléments

les textes du bloc et la couleur de fond.

titre du bloc

Tu disposes de designs déjà paramétrés dans Layout. Pour visualiser les trois gratuits, tu cliques sur Free.

bloc image préformaté

Gutenberg n’intègre pas l’effet de défilement des images.

Ajoute un carrousel (slider)

Cette fonctionnalité sera ajoutée à l’aide de l’extension Kadence Blocks – Gutenberg Page Builder Toolkit.

Tu recherches Advanced Gallery dans tes blocs.

kadence advanced gallery

Tu charges tes visuels.

interface galerie kadence

Tu choisis dans le menu de droite le style de ton slider.

options du carrousel kadence pour ajouter un slider sur WordPress
carrousel images complètes
exemple carousel 1 image

Tu sélectionnes le format de tes images.
Si tu as de nombreux formats, Inherit conserve le ratio d’origine de ton visuel.

ratio image

Tu lances le défilement automatique en activant Carousel Auto Play.

Le temps d’attente entre l’apparition de chaque image est indiqué en millisecondes dans Autoplay Speed.

La transition gère la vitesse d’affichage de la nouvelle image.

réglages vitesse de défilement du slider

Une notification qui se démarque

L’extension Stackable – Page Builder Gutenberg Blocks facilite la mise en forme d’une mise en avant. Tu retrouveras d’autres formats dans la section sur les CSS.

bloc notification de stackable

Tu complètes les textes du titre, de la description du bouton et tu indiques le lien.

compléter le block mise en avant stackable

Dans le menu de droite, tu disposes de 4 formatages prédéfinis :

  • Succès en vert
  • Erreur en rouge
  • Avertissement en orange
  • Information en bleu
préformatage de 4 notifications

Tu personnalises la couleur du fond dans Background.

couleur du fond des notifications stackable

Tu sélectionnes les éléments que tu désires voir apparaître.

choix des éléments des notifications

Un compteur met efficacement en avant des chiffres en ajoutant une animation.

Un compteur qui attire l’œil

Ce bloc est disponible quand tu installes l’extension Stackable – Page Builder Gutenberg Blocks.

Tu trouves Count up dans les blocs.

compteur menu

Tu disposes par défaut de 2 compteurs.

compteurs défaut

Tu définis le nombre de colonnes dans l’onglet Style.

nombre de colonnes de compteurs

Les chiffres sont acceptés au format européen.

Café

150,63 €

prix au kg en 2136

Bébés nés dans l’espace

1 334 560

chiffres de l’ANVE pour 2135

Si tu es attentif, tu remarqueras que les chiffres n’augmentent pas dans l’ordre attendu car ils sont gérés au format américain.

WordPress : ajoute facilement un compteur dans tes articles. #wordpress #blog #site Cliquez pour tweeter

Insère un sommaire sticky dans ta barre latérale

Cette table des matières accompagne tes lecteurs tout au long de l’article. Elle facilite la navigation.

Les éléments de ta barre latérale défilent normalement jusqu’au sommaire qui se fixe. Tu l’intègres donc en dessous des autres.

Si cela n’est pas réalisé, tu installes Easy Table of Contents.

plugin WordPress easy table of content

Tu retrouves les instructions détaillées pour le paramétrage dans la section Met en page.

Tu ajoutes un autre plugin : Q2W3 Fixed Widget for WordPress.

extension q2w3

Tu te rends dans Apparence > Widgets

menu widgets

et ajoutes Table des matières dans ta colonne latérale.

ajout sommaire colonne latérale

Tu indiques ta couleur de surbrillance qui identifiera la partie en cours de consultation.

Tu coches Fixed Widget et tu enregistres.

table matière sticky

Si tu souhaites affiner l’apparence du sommaire à l’aide des CSS, voici le code que j’ai intégré qui pourra te servir de base pour ta personnalisation de l’apparence des textes.

/* reglages texte toc */
.ez-toc-link{
font-size: 15px;
margin-top: 0em!important;
margin-bottom: 0em!important;
line-height: 15px!important;
font-weight: 400!important;
}

Tu peux fixer plusieurs widgets. J’ai ajouté un petit encart pour la newsletter en supplément dans ma barre latérale.

Les tweets automatiques animent ta page et incitent au partage.

Ajoute un tweet prérempli

Tu installes Better Click To Tweet.

better click to tweet extension WordPress

Tu indiques ton compte sur Twitter sans le @.

enregistrer handle twitter

Tu passes tous les écrans pour finaliser.

fin installation better click to tweet

Tu coches Utiliser l’URL raccourcie.

url raccourcie

Tu retrouves le bloc spécifique.

icône better click to tweet

Tu écris uniquement le texte du tweet prérédigé.

écrit tweet pré-rédigé
Comment intégrer un tweet pré-rédigé sur WordPress en 3 minutes. Cliquez pour tweeter

Ajoute un suivi de la progression de lecture et un temps estimé

Je trouve que cela incite à finaliser la lecture.

Le temps de lecture estimé en début d’article évite que le lecteur abandonne en cours de route faute de temps.

Tu recherches l’extension Worth The Read, l’installes et l’actives.

worth the read

Tu la retrouves dans ton menu latéral gauche de WordPress.

menu Worth The Read pour ajouter une barre de progression de lecture à WordPress

Tu commences par Reading Progress puis Functionality.

Onglet Fonctionnalités

Tu cliques sur Posts pour activer cette fonctionnalité uniquement sur les articles et exclure les pages et la page d’accueil.

affichage articles

Tu l’actives sur les mobiles et tablettes.

active mobiles

Si tu le souhaites, tu personnalises les couleurs et l’apparence dans Style.

Style

Tu détermines l’épaisseur, la couleur au défilement et l’opacité.

personnaliser les couleurs de la barre de lecture

La couleur au repos est un peu plus bas.

couleur non actuf

Tu ajoutes un temps de lecture automatiquement calculé dans Time Commitment.

ajouter un temps de lecture dans WordPress

Je te recommande de l’activer uniquement dans les articles.

temps lecture affichage articles

Tu personnalises le texte. # remplace le chiffre qui sera affiché.

format du temps de lecture

Dans les polices, les paramètres de ton thème sont utilisés par défaut.

polices du temps de lecture

Tu ajoutes le temps de lecture dans ton article avec le code

[wtr-time]

que tu places où tu le souhaites au milieu de ton texte.

WordPress : ajoute facilement une barre de lecture et un temps de lecture sur tes articles avec cette extension. #wordpress #blog #site Cliquez pour tweeter

La bannière en image

Tu réalises une bannière en quelques minutes à l’aide de Canva en utilisant un de leurs modèles gratuits.

Tu t’enregistres sur le site.

Sur la page d’accueil, tu scrolles un moment avant de tomber sur Bannières de blog. Tu cliques sur Afficher tout.

bannières blog canva

Tu sélectionnes un modèle gratuit qui te plaît.

choix modèle de bannière

Tu charges ton visuel (téléchargement dans le menu de gauche) puis tu le glisses dans la zone de création.

charger visuel bannière classique

Tu rédiges ton texte et tu personnalises la police et sa couleur.

Tu télécharges ta bannière.

télécharger bannière

Si tu souhaites des explications plus détaillées, tu trouveras le pas à pas dans cet article : Accélère les inscriptions à ta newsletter avec un bonus.

Conclusion

Gutenberg s’améliore au fil du temps et intègre de nouvelles fonctionnalités pour la mise en page sur WordPress.

Découvre un guide complet pour mettre en page sous WordPress avec Gutenberg. #wordpress Cliquez pour tweeter

Editor Plus sera à envisager pour ta page d’accueil et tes pages de ventes. Les constructeurs de pages (comme Elementor) offrent encore quelques fonctionnalités plus avancées comme le masquage de section sur mobiles mais ce sont surtout leurs compositions payantes réalisés par des graphistes qui font la différence. Découvre le tutoriel détaillé consacré à Elementor.

N’oublie pas d’installer une extension de référencement naturel comme Rank Math pour ajouter un titre et une description d’article qui apparaitront dans les moteurs de recherche.

Pour aller plus loin, découvre les améliorations que tu peux apporter à ton site WordPress.

signature de Jean du site pour pas un rond

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière pour l'inscription à la newsletter
portrait jean lochet fondateur pourpasunrond.fr 1

Jean

Fondateur, auteur et homme à tout faire

J’ai créé pour pas un rond pour que tu puisses réaliser seul ton site et le faire grandir avec des tutoriels pas à pas.

Comment gérer l’affichage mobile avec Gutenberg sur WordPress ?

L’éditeur de WordPress ne gère pas des réglages spécifiques pour les mobiles en natif mais il est possible de rajouter cette option avec l’extension Editor Plus.

Comment fonctionne Gutenberg sur WordPress ?

Gutenberg, l’éditeur de WordPress fonctionne par blocs successifs pour composer la mise en page. Il offre de nombreuses possibilités pour créer des articles et des pages riches et dynamiques avec des colonnes, des titres, des textes et des images ainsi que de nombreux autres blocs.

Comment ajouter des fonctionnalités à Gutenberg l’éditeur de WordPress ?

Il existe de nombreuses extensions pour ajouter des options, des fonctionnalités supplémentaires et de nouveaux blocs sur Gutenberg. Je te présente celles que je préfère.

Comment centrer les boutons sur Gutenberg ?

L’option de centrage des boutons se situe au niveau du bloc et non quand tu es dans les options du bouton.

Cet article a 42 commentaires

  1. R-ances

    Bonjour Jean,
    Je découvre votre article “Gutenberg” à l’instant et vous félicite pour ce tuto pédagogique. Rédigé comme tel, il aidera bien des blogueurs à s’émanciper dans leurs créations.
    Je vous souhaite bonne continuation et encore merci pour ce travail fourni et mis à disposition.
    Belle soirée à vous,
    R-ances

    1. Jean

      Bonsoir R-ances,

      Je te remercie de tes encouragements. Je viens de refaire l’article et j’ai cherché à simplifier au maximum les explications pour que chacun puisse y trouver son compte. Je suis heureux que tu aies trouvé ton bonheur.

      Magnifique soirée,
      Jean

  2. Seb

    Super, merci pour toutes ces explications, ça m’aide beaucoup!

    1. Jean

      Bonjour Sébastien,

      Je suis heureux que tu es trouvé les informations que tu cherchais.
      Je te remercie de tes encouragements qui me motive à poursuivre.

      Magnifique journée,
      Jean

  3. cyril

    Bonjour Jean,

    Je débute en wordpress suite à une longue auto-formation complète sur wordpress, html5 et CSS3. C’est avec attention que Jai lu ton article qui j’avoue je n’y comprends rien.

    Par exemple, tu proposes des codes CSS à placer dans les fichiers CSS du thème. Ok j’en ai plein mais je suppose qu’il s’agit du CSS nommé “all”. Ce que je souhaite faire c’est l’implémentation d’une boite astuce ou notification sur mes articles, en bloc préformaté en quelque sorte que les éditeurs utiliseront. qui ressemblerait à une zone de texte avec un icone dédié à gauche. Ton article me semble difficile à comprendre car , malgré plusieurs heures à essayer de pratiquer ton tuto, je n’y suis absolument pas arrive. Par exemple le fichier icone télechargé sur le site que tu proposes n’est pas reconnu pour le téléversement. Je n’arrive pas à placer deux colonnes côte à côte sans espace pour réaliser une zone image et une zone texte avec le même fond couleur.

    Bref, malgré ma nouvelle connaissance de la hiérarchie des Template, des nouvelles fonctionnalités de html5 et CSS3, il m’est impossible de comprendre ton tuto a partir de la section met en page.

    Ton côté geek a prit le dessus et tu n’a pas pris conscience qu’un débutant a besoin d’un maximum de détail. C’est un exercice difficile mais nécessaire, j’en conviens.

    Il me reste un gout amère suite à la lecture de tes conseils, alors que pourtant j’y ai consacré beaucoup de temps.

    Peut être pourrais tu me guider pour réaliser une boite de notification préformatée utilisable en tant que bloc avec guttenberg par exemple

    je te remercie du temps que tu passes à nous aider

    1. Jean

      Bonjour Cyril,

      Je comprends ta frustration. J’ai passé plus d’une journée pour la création de mes boîtes d’information avec de nombreuses itérations.
      J’essaie de donner le maximum de détails mais effectivement c’est complexe de communiquer certaines notions pour qu’elles soient utilisables par tous.

      Pour les notifications, je te propose une idée plus simple à mettre en œuvre. Tu installes l’extension Stackable qui propose des designs préformatés dont des blocs notifications qui fonctionnent bien. Tu vérifies que l’icône est bien pris en charge car ce n’est pas toujours le cas.

      Magnifique journée,
      Jean

  4. pauline

    Bonjour,

    j’ai le même problème que Lisa à savoir que j’ai un espace entre mes blocs qui est très disgracieux. Je n’arrive pas à voir comment le supprimer. Avez vous un conseil ou un bout de code à mettre pour enlever cet espacement disgraceux entre mes blocs ?

    merci par avance

    1. Jean

      Bonjour Pauline,

      Tu peux jouer avec les marges internes et externes de tes blocs (margin et padding). Le plus simple est de passer par inspecter l’élément du navigateur pour réaliser des tests.

      Il est possible d’appliquer les CSS au niveau du site ou bloc par bloc.

      Magnifique journée,
      Jean

  5. EPICUREO

    Merci beaucoup pour toutes ces informations. Je débute sur WordPress et je dois dire que malgré ma formation, il y avait encore quelques lacunes. Avec ton article, j’ai appris et compris beaucoup de choses. Tout est expliqué clairement dans un langage clair et “français” (pas de geek) Tu es vraiment dans le don… ç’est rare .. donc ça mérite d’être souligné ! Top 🙏👍

    1. Jean

      Bonsoir,

      C’est un grand plaisir si cet article t’a été utile. Je cherche effectivement à utiliser le plus possible des termes accessibles. Il faut se rendre à l’évidence je commence à geeker un peu avec le temps passé sur le site mais j’essaie de me soigner.

      Magnifique soirée,
      Jean

  6. Horselag

    Bonjour et merci pour ce magnifique article très complet !

    J’ai une question, je viens d’installer Worth The Read et je n’arrive pas à avoir un texte aéré lorsque je veux mettre “# min de lecture” sous mon titre. Les lettres sont collées les unes aux autres.:/ Je m’arrache les cheveux depuis 1/2 h.

    Auriez-vous un conseil?

    Merci
    Lydie

    1. Jean

      Bonjour Lydie,

      Je n’ai pas rencontré ce problème quand j’utilise le code court.

      Tu peux peut être contourner en indiquant uniquement # dans le texte à afficher. Tu disposes de ton texte comme tu le souhaites avec quelque chose comme [wtr-time] de lecture.

      Magnifique journée,
      Jean

  7. Gabin Desatie

    C’est terrible cette manie qu’ont certains de trouver formidable ce qui est nouveau et de décrier l’ancien !
    Personnellement, j’ai été séduit par WordPress voilà 10 ans en raison de sa simplicité d’utilisation.
    Là, on entre dans un délire d’informaticien.
    Je ne comprends rien au nouveau système et n’ai pas envie de me lancer dans de longues études ou des changements de CSS ou autre… Quel ennui !
    Libre à vous d’adorer ce nouvel éditeur, bien entendu, mais je pense que je ne suis pas le seul à être plus qu’agacé d’être obligé de se plier à la technique, alors que cela devrait être l’inverse.
    Même l’éditeur Classic ne fonctionne plus. Ainsi, par exemple, je ne peux plus déplacer une image dans mon article.
    Je crains de bientôt abandonner mon blog.

    Bien cordialement

    1. Jean

      Bonjour Gabin,

      Je te remercie de ton commentaire.

      Je comprends ton point de vue. Gutenberg modifie profondément la gestion des articles. J’ai également été dérouté à son apparition.

      Cependant, comme tu t’en doutes, je suis favorable à cette évolution car elle offre des possibilités de mise en page qui agrémentent la lecture des visiteurs.

      Je trouve dommage d’abandonner ton blog.

      J’ai échangé avec des utilisateurs de longue date de WordPress réticents à passer sur Gutenberg. La grande majorité a reconnu que c’est l’histoire de quelques jours avant de retrouver ses aises.

      Je te souhaite une merveilleuse journée,
      Jean

  8. Bendhiaf

    Bonjour

    Merci pour ce que vous faites. Cependant j’ai un problème ( très facile je pense mais étant novice …) voilà, sur mon site internet j’ai une page article. Quand je clique dessus j’ai donc cette page avec une liste de mes titres (blog list )d’articles. Mon problème est le suivant j’aimerai avoir une image mise en avant au niveau de chaque titre d”article (ex: une image de chocolat, le titre : le chocolat et ses bienfaits) et ensuite quand je clique sur le titre j’accède à la page de mon article en entier

    Mon souci est le suivant, je n’arrive pas à mettre une image mise en.avant ( et ceux malgré la boite “image mise en avant “) rien n’apparait , que faire ?

    Merci de votre aide

    1. Jean

      Bonjour Jehanne,

      Le design de la page article qui intègre automatique tous tes articles est géré par le thème et son apparence variera en fonction de celui que tu as choisi.

      Il est très rare que les thèmes n’illustrent pas cette page d’un visuel. Ils reprennent en général le visuel général de l’article (Image mise en avant) que tu intègres dans chaque article dans la colonne de gauche de l’éditeur.

      Belle journée,
      Jean

  9. Jean

    Bonjour Louis,

    Gutenberg ne gère que le contenu dans les articles.

    La couleur de fond va se régler au niveau de ton thème. Tu peux modifier la couleur directement dans les paramètres de personnalisation de certains thèmes.
    Si tu ne disposes pas de cette option, tu intègres les CSS dans ton thème enfant ou dans Apparence > Personnaliser > JS/CSS personnaliser.

    J’avais par exemple
    /* couleur du fond */
    .site-content {color: #FDFDFD!important;}
    sur Twenty Seventeen avant de passer à OceanWP qui le gère dans les paramètres.

    Belle Journée,
    Jean

    1. Louis

      Bonjour Jean,
      Merci beaucoup pour ta réponse qui fonctionne!! Et je voudrais faire une couleur de fond différente par catégorie… mais je ne sais comment faire… si je fais .pages-films { background-color: #0C0C0C;
      }, cela ne fonctionne plus…
      ps: j’ai eu un peu de mal à retrouver cet article, il n’y a pas de lien dans la page du mail ou c’est ma boite mail qui l’enlève?
      merci de ton attention… Bonne Journée
      Louis

  10. Louis

    Bonjour Jean,

    Merci pour ce développement de Gutenberg qui m’a appris à positionner une class, cela faisait des semaines que je cherchais!… Du coup cela me permet une grande liberté de construction grâce à ses outils…J’ai voulu changer la couleur du fond de page sur une catégorie d’articles…Je ne suis pas arrivé et sur Gutemberg, on peut rajouter une class que sur les blocs… Comment faire pour changer la couleur du background sur la page entière…? Merci et bonne continuation…

  11. Hélène

    Bonjour Jean,

    Je te remercie pour cet article hyper complet.
    Pour dire vrai, je n’ai pas tout lu de manière systématique, mais je me suis baladée avec plaisir dans les différentes sections. J’utilise principalement les fonctions de base d’abord parce que j’utilise Gutenberg que depuis quelques mois (j’étais restée sur l’éditeur classique) ensuite pour “aller plus vite” car j’écris de manière régulière pour un public plutôt demandeur et friand. Mais j’ai envie maintenant d’aller plus loin. Je me rends compte par exemple que je n’ai jamais mis de tables des matières dans mes articles, ce qui était l’objet de ma recherche qui m’a amenée sur ton site. Ce sera mon prochain défi mais avant cela je vais me laisser porter et découvrir tes autres articles 🙂

    1. Jean

      Hélène,

      La mise en place d’un sommaire ne prend que quelques minutes avec Easy Table of Content.
      Le plus long est de revenir sur chaque article pour l’intégrer.

      L’amélioration d’un blog se réalise par petites touches qui font de grands résultats au final.

      Je te souhaite une merveilleuse soirée.

      A bientôt,
      Jean

  12. Lisa

    Merci Jean pour cet article très complet !
    J’ai un problème c’est un espace blanc sous mon bloc colonnes et le bloc suivant. C’est assez disgracieux et ça m’énerve… Je suppose que c’est le thème ?
    Il faut que j’essaie de créer mon propre thème au moins je n’aurais plus ce problème, mais j’avoue ne pas m’en sentir capable…
    A bientôt,
    Lisa

    1. Jean

      Bonjour Lisa,

      Tu disposes d’options plus simples avant de sortir l’artillerie lourde.

      Le plus simple : tu peux demander à ton entourage s’ils remarquent un problème dans la barre latérale de ton site. S’ils n’ont aucune idée de quoi tu parles, le mieux est d’avancer. Ton temps sera plus productif.

      Tu peux modifier les CSS de ton thème pour régler ce problème.

      Tu peux changer de thème et en trouver un qui corresponde à tes attentes.

      Belle journée,
      Jean

  13. Jean

    Bonjour Philippe,

    Je te remercie de ce gentil commentaire.

    La créativité est libérée avec Gutenberg et les fonctionnalités additionnelle.

    Belle journée,
    Jean

  14. Philippe

    Bonjour Jean,
    Merci pour ton article; simple, pratique et qui va à l’essentiel; bref que du bon.
    Philippe

  15. Dju

    Bonjour,
    Confinée, j’ai décidé de tenter l’aventure et de me lancer dans la création d’un site.
    Le projet est ambitieux car je “bidouille” en informatique et bien que je maîtrise à présent assez bien l’univers de la bureautique (Word, Excel, Adobe…), le monde d’internet est bien plus vaste et nébuleux pour moi.
    Après plusieurs jours de recherches, je tombe enfin sur ton site : une véritable “boîte à outils de première nécessité”. Terminées les longues heures de bidouillages seule sur mon tableau de bord ces derniers jours !
    Alors, un grand merci à toi.
    Je pense que je repasserai par ici souvent.
    Dju

    1. Jean

      Bonjour Dju,

      Je te remercie de ton commentaire. Cela fait plaisir.

      C’est une excellente chose de profiter de la situation pour créer et apprendre.

      Belle journée,
      Jean

  16. Stéphanie

    Bonjour,
    Merci pour cet article. Je rage quand même bien souvent, même si je m’habitue. Impossible d’aller à la ligne comme on veut, cela fait tout de suite de gros écarts, dès qu’on fait une modif on perd un temps…
    Mais bon.
    Question du moment : insérer un pdf : comment faire ? Je dois obligatoirement le transformer en jpg ?
    Merci beaucoup d’avance, et bonne journée !
    Stéphanie

    1. Jean

      Bonjour Stéphanie,

      Pour intégrer un PDF dans tes articles, tu peux le glisser depuis ton ordinateur.
      Il apparaitra automatiquement comme un lien pour l’ouvrir accompagné d’un bouton pour le télécharger.

      Si tu souhaites que tes PDFs s’affichent directement comme une image, tu passes par une extension comme https://wordpress.org/plugins/pdf-embedder/

      Pour les mises à la ligne, tu disposes de l’option MAJ + ENTREE qui ne crée pas de nouveau paragraphe. Les espacements des paragraphes sont définis dans les CSS de ton thème et peuvent être personnalisés.

      A bientôt,
      Jean

  17. Francois

    Bonjour Jean

    Belle idée que ce sommaire en sidebar et surtout toutes les infos pour le réaliser.

    Comme le disait Joke dans un commentaire, j’ai eu quelques difficultés à passer sous le nouvel éditeur.

    Pas à cause de son fonctionnement qui est assez simple en fait, non car j’avais une habitude, celle de rédiger mon article dans un fichier HTML, corriger mes fautes, d’insérer mes balises et tout et tout, pour faire juste un copier/coller dans l’ancien éditeur. Hélas ce n’est plus possible !

    1. Jean

      Bonjour François,

      C’est toujours un investissement de réorganiser sa méthode de travail.

      Tu ne peux plus coller de l’HTML mais tu peux continuer à écrire ton texte et le corriger puis le coller dans Gutenberg pour la mise en page.

      Je te souhaite une belle journée.

      A bientôt,
      Jean

  18. Jean

    Hello Michel,

    Je te remercie de ton commentaire.
    Je comprends que tu aies mis l’article dans ton marque page. Il est plutôt costaud.

    A bientôt,
    Jean

  19. Michel

    Quel boulot !
    Bravo Jean, voici un article clair et au combien complet, qui est une vrai référence en la matière.
    Et hop !
    dans mon marque-page 😉
    Merci beaucoup.

  20. Moya

    Bonjour,
    Et merci pour ce blog qui m’a sauvé ! Je commençais à désespérer de comprendre cette nouvelle mise en page !!
    Mais dans vos explications je n’ai pas trouvé lé possibilité de coller pratiquement le texte sous l’article je trouve l’espacement minimal encore trop grand ! Avez vous pour cela un “truc” ? svp

    1. Jean

      Bonjour Claude,

      Je te remercie de ton commentaire mais je ne suis pas certain de visualiser ta question.

      Si tu parles de l’espacement entre le début du texte et le titre ou l’image d’illustration, il s’agit d’une fonctionnalité gérée par le thème.

      A bientôt,
      Jean

  21. pierre LAVAUD

    Merci Jean pour ton travail. Je ne sais toujours pas comment caler des images à gauche, mes alignement quelle que soit ma demande se positionnent avec le centre de l’écran comme repère. Si tu as un conseil je suis preneur. En tous cas merci. :).

    1. Jean

      Bonjour Pierre,

      Par défaut les images suivent l’alignement dicté par ton thème.
      Note : Si tu as ajouté des CSS avec la notion !important, ce code sera prioritaire par rapport à Gutenberg.

      Quand tu sélectionnes une image, les options d’alignement s’affichent en haut. Tu retrouveras l’alignement à gauche à cet emplacement.

      A bientôt,
      Jean

  22. David Leibovitch

    Je n’ai toujours pas compris comment je peux changer la police de caractères de mon article.

    1. Jean

      Bonjour David,

      Les polices sont gérées au niveau de ton thème. Gutenberg propose une personnalisation des couleurs mais n’intervient pas sur la typographie.

      Tu pourras changer les polices dans ton thème si celui-ci propose cette option ou des les CSS d’un thème enfant sinon.

      Tu peux également utiliser un constructeur de site comme Elementor mais je ne le recommande pas pour la rédaction des articles.

      A bientôt,
      Jean

  23. Joke

    Merci pour ces explications, auxquelles vous avez consacré beaucoup de temps.
    J’ai soixante-quinze ans et je suis devenu hermétique à toutes les nouveautés. Je maîtrise bien l’ancien éditeur et Gutenberg est dans les nuages pour moi.
    J’ai lu que l’ancien éditeur serait disponible jusqu’en 2022, SEULEMENT. D’ici là, si je ne suis pas mort, je vais cher un moment d’abandonner WordPress en récupérant mes blogs.
    Désolant.
    Bonne journée !

    1. Jean

      Bonjour,

      Je comprends tout à fait la difficulté de s’adapter au nouvel éditeur de texte.

      2022 laisse toutefois une marge raisonnable pour découvrir Gutenberg. S’il offre de nombreuses nouvelles possibilités que tu ne souhaites pas utiliser 3 blocs suffisent : paragraphe, titre et image.

      Changer de plateforme sera également se confronter à la nouveauté.

      A bientôt,
      Jean

Laisser un commentaire