Le guide de mise en page des articles sur WordPress

T Tu n’as plus d’excuse pour avoir un site qui fait fuir tes visiteurs.

WordPress offre une infinité de possibilités pour améliorer l’expérience de tes visiteurs.

• Gutenberg, l’éditeur de WordPress, offre des options de mise en page évoluées.
• 4 extensions ajoutent des fonctionnalités supplémentaires pour la mise en forme des articles et pour personnaliser l’environnement de lecture.
• Je te donne quelques lignes d’HTML et de CSS pour répondre à des besoins spécifiques.

Que tu sois débutant ou plus confirmé, à la fin de ce guide, tu auras toutes les cartes en main pour créer des publications agréables à lire.

Tu vas voir que Gutenberg va bien au-delà de la mise en forme du texte.

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

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

Les constructeurs de page (comme Elementor) offrent une personnalisation bien plus poussée. Cependant, ils ne sont pas, à mon sens, adaptés au travail quotidien sur les contenus. J’en limite l’usage à la page d’accueil et aux pages de vente.

J’ai réalisé deux vidéos. La première donne un aperçu des principales fonctionnalités de gutenberg pour les débutants

et la seconde est centrée sur 9 astuces de mise en page extraites de l’article.

Nous attaquons par les bases pour les débutants sur WordPress et avec Gutenberg. Si tu es déjà familier avec l’éditeur, tu passes au chapitre suivant.

Les Fondamentaux : Gutenberg et le maniement des blocs

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).

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.

Tu reviens à l’interface de WordPress avec le logo.

Tu as ensuite un premier menu.

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.

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

J’esquive pour l’instant la zone de texte que je te détaille dans les prochaines sections.

Enregistrer le brouillon apparaît à la saisie des premiers textes.

Gutenberg propose de prévisualiser sur mobile et tablette. Il s’agit d’un gadget de peu d’utilité car cela se contente de réduire la surface de l’éditeur sans te donner une 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é.

Sur Chrome, tu fais un clic droit et inspecter.

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.

Sur FireFox : Clic droit > Examiner l’élément

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

Tu sélectionnes l’appareil.

Quand ton article est finalisé, tu cliques sur publier

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

Tu disposes d’options avancées.

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

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

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

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

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

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

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

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.

Tu indiques également la catégorie de ton 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.

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

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

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.

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

WordPress génère automatiquement un lien mais celui-ci n’est pas optimisé.

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

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 enfin 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.

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.

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.

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

Il existe un raccourci pour gagner du temps.

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

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

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

Tu découvres la liste des blocs disponibles.

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

Pour déplacer plusieurs blocs, tu sélectionnes le premier et le dernier de la série avec la touche MAJ enfoncée.

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 (flèche vers la gauche).

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

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.

Tu sélectionnes tes blocs avec MAJ et tu transformes en groupe.

Tu dégroupes dans les options.

Le bloc navigation facilite la sélection du groupe.

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

Les compositions

Tu accèdes aux compositions en cliquant sur l’onglet spécifique.

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

Malheureusement, il n’est pas encore possible d’ajouter ces propres créations à la bibliothèque (à moins de rentrer dans le code ou d’utiliser une extension comme le montre Lycia de La-Webeuse).

Les blocs réutilisables apportent des fonctionnalités intéressantes. Ils sont modifiables immédiatement même s’ils sont 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.

Tu le nommes.

Tu le retrouves désormais dans l’onglet 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.

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.

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

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

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.

Plongeons dans la mise en page à proprement parler.

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

et les 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 | | _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.

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

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.

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.

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

Les options du texte dans le menu

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

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

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

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.

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.

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

Il n’est pas encore possible de définir la couleur d’une partie du fond du paragraphe.

L’extension Stackable ajoute la possibilité de surligner.

Petit bémol : la couleur personnalisée n’est pas toujours accessible.

Tu peux assurer cette opération en HTML ainsi que d’autres qui manquent parfois cruellement.

Les mises en formes disponibles en HTML

Tu trouves Modifier en HTML dans les options du bloc.

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

Tu reviens au bloc classique avec 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>

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.

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

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.

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.

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

Les listes

Deux types de listes sont disponibles :

• 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.

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

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.

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

Les tableaux sont surtout utiles pour présenter des chiffres. Il est désormais possible d’y ajouter des visuels.

Les tableaux

Tu configures le nombre de lignes et de colonnes.

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

Tu gères l’alignement du tableau.

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.

Tu remarques que le tableau précédent le texte touche le cadre.

Le même tableau copié à l’identique sur un site avec le thème Twenty Nineteen.

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

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

	Chien	Chat
Autonome
Défense
Te mangera

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 un 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.

Les visuels pimentent une page web.

Insère des images

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.

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. En complément, il est intéressant de glisser ton mot-clé dans la description d’une 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.

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

Tu arrondis ton images dans les styles de bloc.

Je trouve que cela fonctionne particulièrement bien avec les visuels carrés.

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

• Recadrer

• Zoomer

• Changer les proportion

• Pivoter

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.

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

Présente plusieurs images dans une galerie

Tu charges tes visuels.

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

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

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

et tu complètes le descriptif.

Tu vas passer par une extension pour ajouter du texte sur tes images.

Superpose du texte sur tes images

L’extension Stackable – Page Builder Gutenberg Blocks facilite grandement cette tâche avec Image Box.

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

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

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

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

Dans Style, tu personnalises la taille des images,

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

l’effet de zoom au survol,

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

les textes du bloc et la couleur de fond.

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

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.

Tu charges tes visuels.

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

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

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.

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.

Les vidéos sont extrêmement volumineuses. Elles vont saturer ton serveur et ralentir ta page.

Tu les charges 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.

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

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

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

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

et tu insères du texte en superposition.

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

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

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

et son intensité avec l’opacité.

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

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

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

Seul un lien sur le texte est prévu.

D’autres éléments comme des boutons pallient cet inconvénient. Tu tapes / pour faire apparaître le menu des blocs.

Les bannières sur Gutenberg présentent des limites. Un visuel classique laisse libre cours à ta créativité.

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.

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

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

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

Tu télécharges ta 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.

Nous allons voir comment assembler tous ces éléments dans la mise en page.

Met en page

La mise en page consiste à intégrer harmonieusement tous les éléments visuels de ta page.

Les séparateurs et des espacements

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

Tu définis le style.

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.

Accole du texte à une image

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

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

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.

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.

Tu sélectionnes ton nombre de colonnes.

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

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

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

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

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

Tu personnalises les couleurs.

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

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

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.

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.

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

Les documents à télécharger

Tu charges le document à partager.

Le nom qui apparait est celui du 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 le code de partage fourni par le site dans un bouton.

Les boutons

Tu inscris ton texte directement dans le bouton.

Tu indiques ton lien.

Tu définis le style de ton bouton.

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

Tu règles l’arrondissement des coins.

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

Tu peux pousser la personnalisation avec l’extension Kadence Blocks.

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

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

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

Tu complètes ton texte.

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

Tu définis l’alignement de tes boutons.

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

Tu personnalises les couleurs :

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

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

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

Tu précises l’espacement entre les boutons.

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

Voici un exemple de rendu.

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.

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

Tu choisis le style d’affichage.

Tu complètes tes textes directement dans les emplacements.

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

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

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

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

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

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

Le menu accordéon fonctionne sur un principe similaire.

Tu disposes de 4 styles au choix.

Tu rédiges tes textes et titres.

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

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.

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.

Une table des matières qui se met à jour toute seule sera l’occasion d’utiliser un code court.

Un sommaire automatisé

Tu installes l’extension Easy Table of Contents.

Tu la retrouves dans Réglages > 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.

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

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

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.

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.

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

Autant prendre 2 minutes pour personnaliser les couleurs.

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

Tu sauvegardes ces modifications.

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

[toc]

Tu retrouves la méthode pour ajouter ce sommaire dans ta colonne latérale dans la section Améliorations en dehors de l’article.

J’aime la présentation simple et efficace de ce bloc de mise en avant.

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.

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

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

Tu personnalises la couleur du fond dans Background.

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

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.

Tu disposes par défaut de 2 compteurs.

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

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

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.

Les tweets automatiques animent ta page et incitent au partage.

Ajoute un tweet prérempli

Tu installes Better Click To Tweet.

Tu indiques ton compte sur Twitter sans le @.

Tu passes tous les écrans pour finaliser.

Tu coches Utiliser l’URL raccourcie.

Tu retrouves le bloc spécifique.

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

Les symboles des réseaux sociaux agrémentent une biographie. Le logo d’Amazon renvoie vers le produit que tu cites.

Les icônes des réseaux sociaux et services

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

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

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

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

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

Il n’y a pas que Gutenberg dans la vie.

Les améliorations en dehors de la zone d’article

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.

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.

Tu te rends dans Apparence > Widgets

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

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

Tu coches Fixed Widget et tu enregistres.

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.

Quand tu regardes en haut de cet article, tu voies une barre de défilement.

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.

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

Tu commences par Reading Progress puis Functionality.

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

Tu l’actives sur les mobiles et tablettes.

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

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

La couleur au repos est un peu plus bas.

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

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

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

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

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.

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

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

Ton texte est un peu monolithique.

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

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

Tu colles le code

et tu publies.

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).

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

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.

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.

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

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.

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

Tu cliques sur ton icône

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

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

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

Nous avons toujours besoin d’un encadré simple.

Un encadré avec une bordure colorée

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.

Pour aller plus loin, je te propose deux générateurs de CSS proposés par Web Code Tools :

• Générateur de code CSS d’ombre
• Code CSS pour les bordures

Conclusion

Gutenberg s’améliore au fil du temps et intègre de nouvelles fonctionnalités.

La mise en page sur WordPress offre de nombreuses opportunités pour enrichir tes articles.

J’ai abordé les fonctionnalités de l’éditeur et des extensions Stackable et Kadence qui me semblent intéressantes pour l’édition de contenus.

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.

Les constructeurs de pages (comme Elementor) restent privilégiés pour la page d’accueil ou les pages de ventes.

Découvre le tutoriel détaillé consacré à Elementor.

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

Les articles qui peuvent t’intéresser :

• 103 formules de titres d’articles
• Créer les images de ton site
• Réalise des visuels personnalisés en 3 minutes avec un générateur de mockups
• Réalise facilement la page d’accueil de ton site

Retrouve tous les articles pour Créer seul ton site

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.