Les 47 blocs en détail
Chaque bloc, à quoi il sert, et un conseil pour bien l'utiliser
Les 47 blocs sont les pierres de vos pages. Ils sont rangés ici en six familles, comme dans le « Mémo Blocs » de l'Éditeur. Pour chacun : ce qu'il fait, et un conseil. Pour les voir en vrai, rendez-vous dans l'Élément de Menu Exemples.
Bon à savoir : chaque bloc peut aussi recevoir un sous-titre intégré et un séparateur décoratif intégré (vague, filet ou crête de montagne), sans ajouter de bloc.
✍️ Les textes : 11 blocs
| Bloc | Ce qu'il fait | Le conseil |
|---|---|---|
| 1. Sommaire Sticky | Un sommaire fixe sur le côté de la page, fait tout seul à partir des sous-titres ; il peut aussi lister les vidéos | À placer en tête des pages longues |
| 2. Paragraphe | Le bloc de base : texte, gras, italique, couleurs, titres, listes, liens | Le plus utilisé : commencez toujours par lui |
| 3. Sous-titre | Un grand titre de partie ; il alimente le sommaire de la page | Un sous-titre toutes les 3 ou 4 parties aère la lecture |
| 4. Citation | Un texte mis en valeur dans un encadré, en italique | Idéal pour une phrase forte, un proverbe, un témoignage |
| 5. Actualité datée | Une annonce précédée de sa date | Pour une fête, une sortie, une nouveauté du site |
| 6. Liste de slogans | Des phrases courtes, une par ligne, mises en avant | Trois ou quatre phrases suffisent |
| 7. Grille de réflexions | Des cartes « titre + texte » rangées en grille ; chaque carte peut avoir sa couleur | Pour présenter des idées, des valeurs, des services |
| 8. Onglets | Plusieurs textes dans le même espace, un clic par onglet | Pour une foire aux questions ou des variantes |
| 9. Texte qui défile | Un bandeau de texte qui défile, comme une enseigne | Une seule phrase, courte, en haut de page |
| 10. 2 colonnes : texte fluide | Un seul texte réparti tout seul sur deux colonnes, comme un journal | Pour un long texte, sans photo |
| 11. Tableau | Des lignes et des colonnes, avec un en-tête ; sur téléphone, chaque ligne devient une fiche | Les colonnes se séparent par une barre verticale |
🧱 La mise en page : 13 blocs
| Bloc | Ce qu'il fait | Le conseil |
|---|---|---|
| 12. 2 colonnes : texte, photo | Le texte à gauche, la photo à droite | Alternez avec le bloc suivant pour donner du rythme |
| 13. 2 colonnes : photo, texte | La photo à gauche, le texte à droite | Une photo en largeur passe mieux qu'une photo en hauteur |
| 14. 2 colonnes : texte, vidéo | Le texte à gauche, la vidéo à droite | Il suffit de coller l'adresse de la vidéo YouTube |
| 15. 2 colonnes : vidéo, texte | La vidéo à gauche, le texte à droite | Le texte présente ce que l'on va voir |
| 16. 2 colonnes : photo, vidéo | Une photo et une vidéo côte à côte | Pour comparer hier et aujourd'hui |
| 17. 2 colonnes : vidéo, photo | Une vidéo et une photo côte à côte | Sur téléphone, elles se placent l'une sous l'autre |
| 18. 1/3 Image, 2/3 Texte (+ bouton) | Une petite image, un texte large et un bouton | Pour présenter une activité, avec un bouton vers sa page |
| 19. 2/3 Texte, 1/3 Image (+ bouton) | Un texte large, une petite image et un bouton | Le même, dans l'autre sens |
| 20. 1/3 Code (iFrame), 2/3 Texte | Un contenu intégré (une carte, un agenda…) à côté d'un texte | Le code est donné par le site d'origine |
| 21. 2/3 Texte, 1/3 Code (iFrame) | Un texte à côté d'un contenu intégré | Le même, dans l'autre sens |
| 22. Photo + Programme | Une photo, un texte et un encart (tarifs, horaires…) | Pour une sortie, une fête, une formation |
| 23. Séparateur décoratif | Un trait entre deux parties : filet, vague ou crête de montagne | Un séparateur entre deux grandes parties, pas plus |
| 24. Espaceur Horizontal | Un espace vide, petit, moyen ou grand | Pour aérer une page trop serrée |
📷 Les photos : 5 blocs
| Bloc | Ce qu'il fait | Le conseil |
|---|---|---|
| 25. Photo | Une photo avec sa légende ; un clic l'agrandit | « 📂 Choisir l'image » range la photo dans le bon dossier |
| 26. Galerie de photos | Plusieurs photos en grille, à agrandir une par une | Une photo par ligne : nom du fichier, barre verticale, légende |
| 27. Mosaïque Photos & Texte | Des cases mêlant photos et textes colorés | Alternez une photo et un texte |
| 28. Diaporama | Des photos, des textes ou des vidéos qui défilent, avec une musique de fond possible | Le défilement automatique s'arrête quand la souris passe dessus |
| 29. Section épinglée | Une image fixe pendant que des légendes défilent par-dessus | Un effet saisissant : une fois par page, pas plus |
🎬 La vidéo et le son : 6 blocs
| Bloc | Ce qu'il fait | Le conseil |
|---|---|---|
| 30. Vidéo | Une vidéo YouTube, ou un fichier vidéo (.mp4 ou .mov) | Collez simplement l'adresse de la vidéo |
| 31. Vidéo double | Deux vidéos côte à côte, l'une sous l'autre sur téléphone | Pour deux versions d'une même chanson |
| 32. Mur de Vidéo | Une vidéothèque sur deux colonnes ; les doublons sont signalés | Une vidéo par ligne : adresse, barre verticale, titre |
| 33. Jukebox (pur audio) | Une grille de morceaux .mp3 à écouter | Les fichiers se rangent dans medias, audio |
| 34. Jukebox YouTube | Des morceaux audio et des vidéos mélangés dans la même grille | Pratique pour une soirée à thème |
| 35. Podcast | Un lecteur audio pour un enregistrement, avec son titre | Pour un témoignage, une interview |
🔗 Les liens et les outils : 8 blocs
| Bloc | Ce qu'il fait | Le conseil |
|---|---|---|
| 36. Groupe de boutons ronds | Une rangée de boutons vers d'autres pages ou d'autres parties | Le bouton de la partie en cours peut être allumé |
| 37. Lien commenté | Des boutons vers des sites extérieurs, ouverts dans un nouvel onglet | Pour vos sites amis et vos sources |
| 38. Listing YouTube / Facebook / Sites Web | Une longue liste de liens triée, avec une recherche et le repérage des doublons | Pour une vidéothèque de plusieurs centaines de liens |
| 39. Document PDF | Un PDF affiché dans la page, avec un lien pour l'ouvrir | Les PDF se rangent dans medias, pdf |
| 40. Code HTML (iFrame) | Un contenu fourni par un autre site, collé tel quel | Une carte, un agenda, un calendrier partagé |
| 41. Lien protégé par code | Un téléchargement, une photo ou une vidéo réservés, ouverts avec un code à 6 chiffres | Le code est chiffré : il n'apparaît nulle part dans la page |
| 42. Formulaire | Des messages, des avis ou des témoignages reçus par courriel, sans adresse visible | Votre adresse reste cachée aux robots |
| 43. Recherche sur le site | Une case pour chercher un mot dans toutes les pages | L'outil « 🔎 Indexer le site » prépare son fichier, à la racine du site |
⚙️ Les blocs automatiques : 4 blocs
| Bloc | Ce qu'il fait | Le conseil |
|---|---|---|
| 44. Plan du site | L'arbre complet des Éléments de Menu, des Thématiques et des pages, tiré du Plan du Site | Une page « Plan du site » aide vos visiteurs |
| 45. Page d'Information | La liste des seules pages « En ligne » | Pour annoncer ce qui est prêt |
| 46. Date de mise à jour du site | « Site mis à jour le… », à la date du téléchargement | À placer sur la page d'accueil |
| 47. Date de mise à jour de la page | « Page mise à jour le… », à la date du téléchargement | En bas de chaque page |
Le bon outil au bon endroit : c'est tout le secret d'une belle page, comme d'une belle course en montagne.
Envie de les voir fonctionner ? Les blocs de texte — La mise en page — Les photos — La vidéo et le son — Les liens, les outils et les blocs automatiques
Page mise à jour le 05/11/2026