WordPress | trucs et astuces pour embellir vos articles ✨

Un petit tour d’horizon 🌤️ de petits tips, méthodes et outils que, je l’espère, vous trouverez utiles pour rendre vos articles plus esthétiques que le traditionnel enchainement paragraphes – images..

1️⃣| les emoji pour renforcer votre texte

🖥️ La manipulation est simplissime sous Windows. Durant votre saisie dans une bloc paragraphe ou autre, à l’endroit ou vous voulez voir apparaitre le smiley :

• combinez les touches Windows et Point

• sélectionnez l’emoji souhaité (ou recherchez le dans la barre)

Le tour est joué ! 👌

Avec un Mac, je ne sais pas et je ne veux pas savoir. 😉

A l’examen, vous aurez un PC sous Windows, de toute manière. 😛

2️⃣| utilisez toutes les possibilités de vos blocs

👉 Les blocs n’exposent pas tous leurs atouts sur la barre d’outils, cliquez sur la Flèche ▽ pour les découvrir tous.

On verra plus loin comment faire une infographie avec le contrôle Numbers de Spectra mais il y’en a plein d’autres qui sont sous-utilisés.

👉 Vous pouvez aussi installer d’autres blocs par le biais d’extensions. Ici, le contrôle 🖼️ Image d’Ultimate Blocks qui permet d’encadrer, de rogner, de recolorier …

3️⃣| Illustrez facilement vos contenus

❌ L’usage des outils vu dans les deux premières sections de cette partie est proscrite (sauf consignes contraires dans le sujet).

3-1 | Instant Images, une bibliothèque libre de droits

• tapez un mot clé dans le moteur de recherche
• Choisissez votre source parmi Unsplash, Openverse, Pixabay, Pexels et Giphy.
• Cliquez sur l’image que vous préférez, elle sera directement téléversée dans la médiathèque

ℹ️ A noter que Giphy est plus une banque animées mais pourquoi pas !

3-2 | Utilisez l’IA pour générer des images

Google Gemini (par exemple) donne la possibilité de créer gratuitement des images pour illustrer vos articles. le nombre d’essais par jour est toutefois limité.

Deux utilités si vous le faites :

• Gemini apprend vos gouts et oriente son travail sur ce qui vous satisfait (machine learning)
• Ca vous donne des tentatives journalières supplémentaires si vous êtes poli(e).

3-3 | Utilisez des contrôles dynamiques pour vos media

Voici un aperçu de trois contrôles qui permettent d’aménager un contenu riche en illustrations afin de ne pas saturer l’espace de votre article (et créer un déséquilibre)

J’ai utilisé les illustrations de cet article du blog d’entrainement en exemple.

4️⃣| L’infographie plutôt que des mots

J’en ai déjà parlé ici mais j’insiste. Des visuels de style “tableau de bord” avec des KPI appropriés vaudront tous les discours.

Prenons l’exemple du paragraphe ci-dessous :

Le référencement auprès de Google est une évidence. 94% des internautes effectuent leurs recherches avec ce seul moteur ! 42% ne dépasse jamais la première page de résultats (SERP) et ils sont 15 % à atteindre la page 3 ! Quand on sait que la mesure Google Lighthouse des boutiques en ligne donne un score moyen SEO de 65 / 100, il y’a encore pas mal de boulot pour les webmasters afin de les rendre visibles !

On peut dire exactement la même chose ainsi :

une SERP, c’est le truc qu’utilisaient les druides pour couper du gui ? 🔪

Pas tout à fait ! SERP pour Search Engine Result (ou Response) Page = la page de résultats d’une recherche

Lighthouse, c’est une boite de nuit dans le coin ? 🫠

Non plus ! Le lighthouse est un outil de mesure de la performance SEO inclus dans Chrome. Clic droit sur la page à mesurer – inspecter – menu chevrons >> du panneau qui apparait – Lighthouse – lancer l’analyse.

4️⃣| Un soupçon de HTML

👉🏻 Je sais ce que vous allez me dire : “On est pas développeur, nous !” et vous aurez raison, mais j’ai pas mal simplifié les choses pour vous.

4-1 | Utiliser des blocs HTML personnalisés

➡️ On avait déjà vu dans un autre article comment faire des textes défilants un intégrant un texte sous la forme ci-dessous à l’intérieur d’un 🔹bloc HTML Personnalisé.

<marquee> ✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨ </marquee>

Ca donnait ça 👇🏻 :

✨ trop top 👍🏻 le blog st9ph ! On apprend plein de choses ! ✨

👆🏻 C’est cette méthode que j’utilise pour mes petits blocs comme celui ci-dessus. Je voulais un peu le style des blocs citations mais avec un fond coloré.

➡️ Il m’a fallu 2 choses :

• un composant que je balise en <div class=“nom du composant“> contenu (notre texte) </div>
• une “feuille de style” où je définis mes attributs de “décoration”

👉🏻 Il y’a un peu de travail pour trouver le bon dosage :

➡️ Vous pouvez aussi mettre en forme votre contenu (dans la balise div) :

🔵 Mettre en gras (balise strong)

<strong> le texte en gras </strong>

🔵 Mettre en italique (balise em)

<em> le texte en italique </em>

🔵 Souligner (balise u)

<u> le texte souligné </u>

🔵 Mettre en couleur (balise span en attribut color)

<span style=”color:blue;”> Texte en bleu </span>

👆🏻 Téléchargez le fichier ci-dessus que vous aurez juste à copier coller (après l’avoir ouvert) dans un bloc HTML personnalisé si vous souhaitez reproduire le composant juste au dessus.

4-2 | Les enregistrer sous forme de compositions

👉🏻 Vu le travail que cela a demandé, on ne va pas recommencer à chaque fois. Il suffit de créer une composition avec le bloc html que vous avez créé pour qu’il soit disponible ensuite, comme n’importe quel autre bloc, comme un modèle, en fait.

• cliquer sur le menu hamburger 🍔 (les 3 points tout au bout) de la barre flottante de votre bloc

• Choisir Créer une composition

➡️ Pour résumer :

• si vous utilisez les compositions sous forme de matrice (modèle à modifier)
  • insérez la composition et détachez la
  • Modifiez ensuite cette composition librement (elle est redevenue un bloc normal)
• Si vous utilisez les compositions sous forme de bloc invariable
  • insérez la composition sans la détacher
  • Si vous devez faire évoluer la composition, cliquez sur “modifier l’orignal” (elle sera modifée partout où elle apparait

📚 Voyez aussi un tour d’horizon complet des contrôles Spectra dans cet article, Gardez en tête l’HABI et proposez les outils et méthodes suggérées dans cet autre article, et vous deviendrez rapidement un auteur WordPress qui aura une foule d’abonnés ! 😉

☰