1.2Widgets de base : titre, texte, image, bouton
L'essentiel en 30 secondes
- Les widgets de base (dès Free) : Titre, Éditeur de texte, Image, Bouton, Icône.
- Le widget Titre porte un niveau sémantique (H1 à H6) : un seul H1 par page, puis H2, H3… en hiérarchie.
- Le Bouton est l'appel à l'action (texte + lien) ; l'Image doit avoir un texte alternatif (alt).
Mini-cas filé — Nadia remplit l'accueil
La structure est là ; Nadia pose maintenant le contenu : le titre « Menuiserie Benali », un paragraphe de présentation, une belle photo d'atelier, et un bouton « Demander un devis ». Elle hésite sur le niveau du titre et oublie d'abord l'alt de l'image. Cette section fixe les bons réflexes.
Suite de 1.1 — après la structure, le contenu.
1. Titre, texte, image
Le widget Titre (Heading) affiche un titre avec son niveau H1 à H6 — important pour le SEO et l'accessibilité : un seul H1 (le titre principal de la page), puis des H2 pour les grandes sections, des H3 dessous. L'Éditeur de texte gère les paragraphes enrichis (gras, listes, liens). Le widget Image insère une image : on y renseigne toujours le texte alternatif (alt), qui décrit l'image pour les moteurs et les lecteurs d'écran.
Pour Nadia : « Menuiserie Benali » en H1, un paragraphe de présentation dans l'Éditeur de texte, une photo d'atelier avec alt « Atelier de menuiserie à Oran ».
2. Bouton et icône
Le Bouton est l'élément cliquable de l'appel à l'action : on règle son texte, son lien (page, ancre, téléphone, e-mail) et éventuellement une icône. L'Icône (widget ou à l'intérieur d'un bouton) renforce le message visuellement.
Nadia place un bouton « Demander un devis » lié à la page contact (ou à un numéro de téléphone « tel: » sur mobile), avec une petite icône de téléphone. Un bon bouton dit clairement ce qui va se passer.
🔎 Exemple concret — Remplir l'accueil (cas Nadia)
H1 : « Menuiserie Benali »
Éditeur de texte : présentation (2-3 phrases)
Image : photo atelier — alt « Atelier de menuiserie à Oran »
Bouton : « Demander un devis » → lien vers /contact (ou tel: sur mobile)
→ Un seul H1, alt renseigné, action claire.Résultat : un accueil lisible et bien structuré.
Leçon : hiérarchie des titres + alt = base SEO/accessibilité.
Vocabulaire de la section
- Widget Titre (Heading)
- Affiche un titre avec son niveau sémantique H1 à H6.
Exemple simple : « Menuiserie Benali » en H1, « Nos réalisations » en H2.
Ce que ce n'est pas : mettre plusieurs H1 ou choisir le niveau selon la taille voulue.
Réflexe : un seul H1 ; la hiérarchie structure, la taille se règle à part.
- Éditeur de texte
- Widget pour les paragraphes enrichis (gras, listes, liens).
Exemple simple : le paragraphe de présentation de l'atelier.
Ce que ce n'est pas : y mettre un titre important (utiliser le widget Titre pour ça).
Réflexe : du texte courant → Éditeur de texte.
- Image + alt
- Insère une image ; le texte alternatif (alt) la décrit pour moteurs et lecteurs d'écran.
Exemple simple : photo d'atelier, alt « Atelier de menuiserie à Oran ».
Ce que ce n'est pas : laisser l'alt vide ou mettre « image1.jpg ».
Réflexe : chaque image utile a un alt descriptif.
- Bouton
- Élément cliquable d'appel à l'action : texte + lien (+ icône optionnelle).
Exemple simple : « Demander un devis » → page contact ou « tel: » sur mobile.
Ce que ce n'est pas : un bouton « Cliquez ici » sans dire ce qui se passe.
Réflexe : le texte du bouton annonce l'action.
- Icône
- Petit pictogramme, seul (widget Icône) ou dans un bouton, pour renforcer le message.
Exemple simple : icône téléphone dans le bouton de devis.
Ce que ce n'est pas : empiler des icônes décoratives sans sens.
Réflexe : une icône doit clarifier, pas décorer au hasard.
En pratique — Poser le contenu d'une page
- Ajoutez un widget Titre en H1 (le titre principal de la page).
- Ajoutez un Éditeur de texte pour un paragraphe de présentation.
- Insérez une Image et renseignez son texte alternatif (alt).
- Ajoutez un Bouton avec un texte clair et un lien (page, tél, e-mail).
Script prêt à dire — expliquer le bouton d'action au client (20 s)
« Le bouton « Demander un devis » est bien visible : sur mobile, un clic lance directement l'appel ; sur ordinateur, il ouvre votre page contact. Le texte dit exactement ce qui va se passer, pour rassurer le visiteur et l'inciter à vous contacter. »
Un bon bouton annonce l'action ; sur mobile, préférer « tel: » pour appeler en un clic.
Modèle copier-coller — check contenu d'une page
TITRE H1 (un seul) : _______________
SOUS-TITRES (H2/H3, hiérarchie) : _______________
PARAGRAPHES (éditeur de texte) : _______________
IMAGES + ALT (chacune) : _______________
BOUTON : texte = ___________ → lien = ___________
ICÔNE (si utile) : _______________Page d'accueil
H1 = nom de l'entreprise ; bouton principal = contact/devis.
Page service
H1 = le service ; H2 par bénéfice ; bouton = réserver/contacter.
Mobile d'abord
Bouton en « tel: » pour appeler en un clic, texte court et lisible.
Image lourde
Compresser avant d'insérer (voir 5.1) et toujours renseigner l'alt.
✓ Bonnes pratiques
- Un seul H1 par page, puis une hiérarchie H2/H3.
- Renseigner l'alt de chaque image utile.
- Donner au bouton un texte qui annonce l'action.
✗ Pièges fréquents
- Choisir le niveau de titre selon la taille voulue.
- Laisser les alt vides.
- Des boutons vagues (« Cliquez ici »).
Points clés à retenir
- Widgets de base : Titre, Texte, Image, Bouton, Icône.
- Un seul H1, hiérarchie H2/H3 (SEO/accessibilité).
- Alt descriptif sur chaque image.
- Bouton = texte clair + lien utile.
Défi 48h — appliquez demain
Composez une page simple : un H1, un paragraphe, une image avec alt, un bouton au texte explicite lié à une page/tél. Vérifiez qu'il n'y a qu'un seul H1. 15 minutes.
- Je place un seul H1 et une hiérarchie de titres.
- Je renseigne l'alt de mes images.
- Mes boutons annoncent clairement l'action.
Questions fréquentes
Combien de H1 par page ?
Un seul : le titre principal. Les autres titres sont des H2 (grandes sections) puis H3, etc., en hiérarchie — c'est important pour le SEO et l'accessibilité.
Pourquoi renseigner le texte alternatif (alt) ?
Il décrit l'image pour les moteurs de recherche et les lecteurs d'écran (accessibilité). Une image utile sans alt est une occasion manquée et un défaut d'accessibilité.
Comment faire un bouton qui appelle au téléphone ?
Dans le lien du bouton, utilisez « tel:+213… » : sur mobile, un clic lance directement l'appel. Pratique pour un artisan joignable par téléphone.
Nadia met « Menuiserie Benali », puis « Nos réalisations » et « Contact ». Quelle hiérarchie de titres est correcte ?