WordPress : 9 blocs et extensions pour embellir tes articles

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

83 % des lecteurs qui commencent un de mes articles abandonnent en cours de chemin.

Je suis persuadé que tu constates le même phénomène sur ton site.

Comment rendre la lecture plus plaisante et fluide pour éviter le décrochage ?

embellir tes articles image pinterest

Gutenberg facilite énormément la tâche. En 2 clics, tu ajoutes un bloc qui donne du relief à tes écrits.

Aujourd’hui, les blocs de base sont axés sur la mise en page. Deux extensions vont enrichir ta panoplie de blocs attractifs qui vont donner du relief à tes écrits.

Tu découvriras également deux autres extensions pour les temps de lecture, les clics to tweet et comment réaliser facilement une bannière avec Canva.

picto articles débutants

Débutant

J’ai sélectionné deux extensions qui ajoutent de nouveaux blocs à Gutenberg. Si nous retrouvons certains éléments communs, les approches sont complémentaires.

Stackable – Gutenberg Blocs offre des éléments que tu retrouves habituellement dans les constructeurs de sites comme Elementor.

Gutenberg Blocks – Ultimate Addons for Gutenberg est plus centré sur la mise en page. Cette extension est développée pour le thème Astra mais de nombreuses ressources sont exploitables sur tous les sites.

J’ai effectué une sélection des blocs les plus courants que tu pourras utiliser dans tes articles. Je t’encourage à tester les autres. Tu découvriras de belles pépites en particulier pour tes pages d’accueil et de vente.

Les blocs ne fonctionnent pas systématiquement avec tous les thèmes. Il faudra tester et vérifier attentivement le résultat.

Stackable – Gutenberg blocks

Tu recherches Stackable – Gutenberg blocks dans le répertoire de WordPress, l’installes et l’actives.

extension de blocs Gutenberg Stackable

Les nouveaux blocs sont isolés dans un répertoire spécifique sur Gutenberg.

répertoire des blocs stackable

Présente un produit ou un service (Stackable)

Stackable propose une carte qui regroupe un titre, une description et un bouton dans un encadré. Tu peux également ajouter un visuel pour illustrer.

Cette carte peut être utilisée pour de nombreux usages mais je trouve qu’elle est particulièrement appropriée pour une présentation synthétique d’un produit ou d’un service.

Tu sélectionnes Card.

bloc carte

Tu sélectionnes un visuel au format horizontal par exemple 644 X 300 px en cliquant sur l’image puis complètes ton texte.

bloc carte avec le texte et l'image

Tu n’oublies pas le texte dans le bouton et le lien.

bouton de la carte

Tu retrouves dans le menu de gauche les options pour modifier la couleur du fond, des textes et du bouton.

couleur du titre

Le résultat :

Recevez gratuitement 22 délicieuses recettes Italiennes authentiques que vos enfants adoreront

Ce cadeau est réservé aux abonnés de la newsletter.

Vous sortirez des traditionnelles pizzas et pastas pour découvrir une cuisine Italienne simple et savoureuse.

Wordpress : Découvre l'extension pour ajouter facilement un bloc de présentation de produit ou service. #site #blog

Un compteur qui attire l’œil (Stackable)

Un compteur est une option simple pour mettre en avant un chiffre.

Tu trouves Count up dans les blocs.

compteur menu

Tu as 4 compteurs par défaut. Probablement pour montrer les formats.

compteurs

Tu définis le nombre sous la personnalisation des couleurs ainsi que la taille.

nombre de compteurs

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

Café

15,63 €

prix estimé en 2036

Marsiens

1234

colons en 2036

Si tu es attentif, tu remarqueras que les chiffres n’augmentent pas dans l’ordre attendu.

Wordpress : ajoute facilement un compteur dans tes articles. #wordpress #blog #site

Ultimate Addons for Gutenberg

Tu recherches Gutenberg Blocks – Ultimate Addons for Gutenberg dans le répertoire de WordPress, l’installes et l’actives.

extension ultimate addons for gutenberg

Tu disposes désormais d’un nouveau répertoire de blocs.

menu blocs

Insère un sommaire qui s’actualise tout seul (UAG)

Avant, chaque sommaire me demandait au minimum 5 minutes à intégrer.
J’obtiens désormais un sommaire plus attractif en un seul clic.
Le plus beau : il se met à jour automatiquement.

Tu sélectionnes Table des contenus (Table of content).

bloc sommaire

L’extension va chercher les titres de ton article.

sommaire avant traduction

Tu remplaces le texte du titre en anglais et détermines quels niveaux de titres tu souhaites voir apparaître dans le menu de gauche.

Si tu hiérarchises tes articles en paragraphes, H2 uniquement est une bonne option.

sélection niveaux titres sommaire

Tu passes ensuite à la personnalisation pour donner un peu de vie.

Par exemple, tu modifies la couleur du titre,

couleur titre

du fond

couleur fond sommaire

et de la bordure puis son épaisseur.

bordure

Le résultat :

sommaire personnalisé

Tu vas sauvegarder cette mise en page pour l’utiliser dans tes autres articles.

Tu cliques sur les … en haut du bloc puis sur Blocs réutilisables

bloc réutilisable

et le nommes par exemple sommaire.

nom bloc réutilisable

Ton sommaire est désormais accessibles dans les blocs réutilisables.

bloc réutilisable liste

Au moment de la publication, tu vérifies dans la prévisualisation que ton sommaire est actualisé. Si ce n’est pas le cas, tu le repasses en bloc normal.

Wordpress : ajoute en 1 clin d’œil un sommaire qui s'actualise automatiquement. #wordpress #site #blog

Présente les auteurs (UAG)

Pour conclure ton article, tu intègres une présentation des auteurs qui peux renvoyer sur une page plus détaillée.

Tu sélectionnes Team.

bloc auteur menu

Le premier aperçu est très sobre pour ne pas dire déprimant.

bloc auteur brut

Tu ajoutes un portrait (que tu peux arrondir).

ajout portrait

Tu complètes les adresses des réseaux sociaux.

adresses réseaux sociaux auteur

Tu mets un peu de couleurs.

couleurs bloc auteur

Le résultat :

portrait jean pourpasunrond

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.

Les réseaux sociaux ne sont malheureusement pas compatibles avec Twenty Seventeen.

Je te recommande de l’enregistrer dans les blocs réutilisables.

Wordpress : intègre une présentation d'auteur attractive sur ton site #blog #site #wordpress.

Met en avant tes derniers articles (UAG)

Le carrousel ne sera pas forcement compatible avec ton thème. Il affichera des blocs statiques dans ce cas.

Tu choisis Post Carousel.

caroussel articles menu

Tes derniers articles sont intégrés.

caroussel articles

Tu sélectionnes Articles. Tu peux filtrer sur une catégorie spécifique.

type contenu

Tu sélectionnes le nombre d’articles présentés au total et simultanément sur ton article.

présentation du carrousel

Tu peux ajuster la vitesse de défilement et les transitions dans Carousel.

durée défilement

Dans content, tu définis les éléments que tu souhaites faire apparaître :

  • Auteur
  • Date de parution
  • Commentaires
  • Extrait
réglages

Tu personnalises les couleurs des éléments.

couleurs

Le résultat sans le carrousel.

Wordpress : présente tes derniers articles automatiquement. #blog #site #wordpress

Mettre en avant du texte (UAG)

Tu utilises Blockquote

citations

avec les réglages suivants :

  • L’épaisseur du trait dans Modern Layout : 10
  • Une couleur personnalisée
épaisseur couleur de trait du coté

Tu désactives le partage Twitter.

désactive twitter

Le résultat :

Texte à mettre en avant.


Pour cette mise en valeur, il sera plus rapide de créer une classe CSS particulière dans ton thème enfant qui pourra être appliquée plus rapidement.

/* bordure colorée pour mise en avant */

.miseenavant {
border-style:solid!important;
border-width:0px 0px 0px 10px!important;
border-color:#008c72!important;
background-color:#ffffff!important;
padding:18px!important;
margin:18px!important;
}

Les éléments :

détail des css

Le rendu :

Texte à mettre en avant.

Tu places ton texte dans un paragraphe et renseignes miseenavant dans Avancé > Classe CSS additionnelle.

classe css additionnelle

Pour installer des CSS sur ton site, je te renvoie vers la personnalisation de Twenty Seventeen.

Wordpress : met en avant du texte. #wordpress #blog #site

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

Voici d’autres éléments pour rendre tes articles plus attrayants.

Ajoute un suivi de l’avancée de lecture et un temps estimé

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

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 quand l’article défile et l’opacité.

La couleur au repos est un peu plus bas.

Le temps de lecture est situé 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 peux ajouter le temps de lecture dans ton article avec le code [ wtr-time ] que tu places ou tu veux. Tu enlèves les espaces avant et après les crochets que j’ai été obligé d’ajouter pour éviter que le code ne se déclenche.

J’ai préféré utiliser la méthode de Pascal Cescato pour mon encadré : Ajoutez le temps de lecture à vos articles. Il s’agit de de l’ajout de quelques lignes de codes.

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

Ajoute un tweet pré-rempli pour faciliter le partage

Cette fonctionnalité existe dans les blocs mais ne fonctionne pas toujours. Je préfère cette option.

Pour ceux qui s’interrogent, cela ressemble à cela :

Tweetshare : le partage sur Twitter simplifié.
Dispose toi aussi de tweets pré-rédigés dans tes articles. #twitter

Les 4 principaux avantages :

  • Tu suggères le texte du tweet pour disposer de messages qui servent ta marque avec les # que tu privilégies.
  • Tu mâches le travail des lecteurs en proposant un tweet prérempli qui pousse à l’action.
  • Tes lecteurs n’auraient pas forcément pensé à partager ton article spontanément.
  • Tu vas pouvoir te connecter sur Twitter avec tes lecteurs.

Installe et paramètre Tweetshare

Tu te connectes à Twitter.

Tu recherches TweetShare – Click To Tweet dans les extensions WordPress, l’installes et l’actives.

installer tweetshare

Tweetshare (dans la barre gauche de menu) > Settings

menu tweetshare
  • Bouton Login with Twitter
connecter twitter
  • Bouton Autoriser l’application
autorisation utilisation compte twitter
  • Tu complètes les réglages suivants :
    • Ton compte Twitter sans le @ (complété automatiquement)
    • Tu coches Enable Short URL pour activer les URL raccourcies
    • Tu laisses décoché Display Tweetshare Branding : cela désactive le logo Tweetshare
  • Bouton Save changes
réglages

Le design de tes messages

2 formats sont disponibles dans cette extension. Tu personnalises les visuels au couleur de ton site pour qu’ils s’intègrent harmonieusement.

L’encadré (Tweetbox)

Les tweetboxs sont le format idéal pour une citation.

Onglet Tweetbox

menu tweetbox

Tu Personnalises les couleurs du modèle par défaut :

  • Texte
  • Bouton
  • Fond
personnalisation couleurs

Tu peux choisir un autre modèle dans le menu déroulant mais ils ne sont pas personnalisables.

autres thèmes

Je vais conserver la version aux couleurs du site. Je regrette juste de ne pas pouvoir modifier la couleur de la bordure.

  • Bouton Save changes

Le format bouton (Inline)

Le format Inline de Tweetshare donne envie de cliquer grâce à sa forme de bouton.


Onglet Inline

  • Tu personnalises la couleur du texte et du fond
  • Bouton Save changes
inline

Intègre un clic to tweet dans ton article

Avec Gutenberg

Les boutons Tweetshare ne sont pas encore directement intégrés dans Gutenberg.

Tu ajoutes un nouveau bloc Paragraphe

ajout un nouveau bloc Paragraphe

et tu copies le texte suivant :

Pour la version dans le texte :

tweetshareinline tweet=”TON TEXTE” username=”TONNOM”]

Pour la version encadré :

tweetshare tweet=”TON TEXTE” username=”TONNOM”]

Tu intègres un crochet au début du texte : [ (sinon cela déclenchait l’affichage chez moi).

Il va probablement se transformer automatiquement en bloc Code court. S’il reste en paragraphe cela fonctionne parfaitement également.

Tu complètes le texte de ton Tweet et ton nom sur Twitter (sans le @).

bloc code court

Tu prévisualises pour vérifier le résultat.

Avec l’éditeur classique

Tu disposes d’un nouveau bouton dans tes outils de rédaction.

bouton article
  • Tu te positionnes à l’endroit où tu souhaites intégrer ton Click to Tweet
  • Tu cliques sur la flèche pour sélectionner le visuel encadré ou en ligne
interface d'écriture
  • Tu complètes le texte de ton tweet
  • Tu coches Add the username bellow pour avoir via @tonnom dans le tweet final
  • Bouton OK

Difficile de faire plus simple, non ?

Le message qui sera tweeté intègrera automatiquement l’URL de la page.

Il faudra prévisualiser systématiquement ton article pour valider la mise en page et ajuster si besoin. Le format Inline nécessite souvent un espace au dessus et en dessous.

Tweetshare est un outil facile et rapide à utiliser qui va te permettre de créer du buzz sur Twitter et te connecter avec tes lecteurs.

Le plus facile est d’en ajouter un en conclusion de tes articles ou en fin de paragraphe.

Je recommande ce tutoriel pour installer facilement des clics to tweets sur un site WordPress. #wordpress #site #blog

Fais ta pub avec des bannières

Une bannière anime et rythme ton site (à condition de ne pas en abuser).

Aujourd’hui, il n’est plus nécessaire d’être graphiste pour réaliser une bannière convenable.

Tu peux en réaliser une en quelques minutes sur Canva en utilisant un de leurs modèles gratuits.

Tu t’enregistres sur le site.

Tu cliques sur le +.

canva options visuel

Tu choisis bannière de blog dans la section Blogs et e-books.

section banniere de blog

Tu trouves un modèle gratuit qui te plaît dans le menu de gauche.

le choixdu modèle de bannière

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

charger visuel

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

Tu télécharges ta bannière, la redimensionnes puis la compresses avant de l’intégrer sur ton site.

bannière newsletter

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.

Pour ne pas lasser les visiteurs, tu peux varier les créations, les messages et les formats.

bannière newsletter
Réalise des bannières attractives pour ton site avec Canva.

Conclusion

Je t’ai présenté mes découvertes pour améliorer le rendu de tes articles. Je vais désormais les intégrer dans mes prochains articles et lors des réécritures.

L’attrait et le confort de lecture permettront j’espère de convaincre plus de lecteurs de poursuivre jusqu’au bout.

Je ne souhaites pas aller dans l’excès inverse d’articles travaillés à l’extrême avec un constructeur de thème.

Les possibilités sont sans commune mesure. Cependant, si tu publies régulièrement, la transition vers un autre outil prendra des journées.

Je te propose également 18 améliorations que tu peux apporter à ton site pour accroître sa crédibilité.

N’hésite pas à partager en commentaire si tu utilises d’autres éléments pour agrémenter tes articles.

Les articles qui peuvent t’intéresser :

Retrouve tous les articles pour Créer seul ton site

bannière de la newsletter de pour pas un rond version bleu-vert
portrait jean pourpasunrond

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.

Résumé
Wordpress : 9 blocs et extensions pour embellir tes articles [Tuto]
Article
Wordpress : 9 blocs et extensions pour embellir tes articles [Tuto]
Description
Découvre comment améliorer la lisibilité de tes articles sur Wordpress avec des blocs et extensions qui mettrons en valeur tes textes.
Auteur
Publié par
pour pas un rond
Logo

Cet article a 5 commentaires

  1. Bonjour

    Je ne m’étais jamais intéressé à ces plug-ins in de mise en page. je ne savais même pas que cela existait 🙂

    Alors, je suis allé voir celui que tu proposais, Stackable – Gutenberg Blocks, et c’est impressionnant tout ce qu’il fait !!!

    Par contre quand tu dis utiliser celui qui insère un sommaire qui s’actualise tout seul, tu l’utilise pour les pages Crée ta marque, Construis ton site, etc … ? Je croyais que ce n’était pas des pages mais des articles ou tu rajoutais manuellement les derniers articles.

    1. Bonsoir François,

      Le sommaire automatique reprend les titres de ton article pour créer un sommaire de navigation sur ton site.
      Tu peux également créer des fiches qui reprennent tes derniers articles.

      Je te confirme que j’ajoute à la main les articles sur mes pages de rubriques.

      Je n’en ai pas parlé dans l’article car ce n’est pas approprié pour un article mais fonctionne parfaitement pour une page blog. Post Timeline est présent dans Ultimate Addon Blocs. Le rendu est attractif. Il vaut le coup d’oeil.

      A bientôt,
      Jean

    1. Bonjour Alexis,

      Je te remercie de ton retour.

      Je souhaiterais savoir si tu constates dans le futur un impact de ces fonctionnalités sur la durée de lecture et le taux de rebond.

      C’est encore trop récent sur mon site pour tirer des conclusions mais je n’ai pas encore remarqué une influence notable.

      A bientôt,
      Jean

Laisser un commentaire

Fermer le menu
elementum Praesent dapibus suscipit adipiscing pulvinar libero dictum