Exemples — Les blocs de mise en page
Les 13 blocs de la famille « Mise en page », en situation
Les blocs en 2 colonnes placent côte à côte un texte, une photo ou une vidéo. Sur un téléphone, les colonnes se placent l'une sous l'autre, toutes seules. Le fil rouge de cette page : la vie de famille, dans les années 60 et 70.
N° 12 — 2 colonnes : texte | photo
Le texte à gauche, la photo à droite.
Dans la cuisine, la toile cirée à carreaux, le buffet en formica et la cocotte sur le feu : tout un monde revient en mémoire.
Un clic sur la photo l'agrandit.
N° 13 — 2 colonnes : photo | texte
La photo à gauche, le texte à droite.
Le repas du dimanche réunissait toute la famille autour de la table : on y parlait fort, on y riait beaucoup.
Alterner ce bloc avec le précédent donne du rythme à la page.
N° 14 — 2 colonnes : texte | vidéo
Le texte à gauche, la vidéo à droite.
En 1964, Jean Ferrat chante La montagne, et le départ des jeunes vers la ville. Il suffit de coller l'adresse de la vidéo YouTube dans le bloc.
Jean Ferrat — La montagne
N° 15 — 2 colonnes : vidéo | texte
Georges Brassens — Les Copains d'Abord
La vidéo à gauche, le texte à droite.
Les Copains d'Abord, de Georges Brassens : une chanson d'amitié, qui se chantait autour des feux de camp.
N° 16 — 2 colonnes : photo | vidéo
Françoise Hardy — Tous les garçons et les filles
N° 17 — 2 colonnes : vidéo | photo
Jacques Dutronc — Il est cinq heures, Paris s'éveille
N° 18 — 1/3 Image | 2/3 Texte, avec bouton
Une petite image, un grand texte
Ce bloc présente une activité, un article ou un service : une petite image à gauche, un texte large à droite, et un bouton pour aller plus loin.
Voir le tutorielN° 19 — 2/3 Texte | 1/3 Image, avec bouton
Le même, dans l'autre sens
Le texte large à gauche, la petite image à droite. Le bouton peut mener vers une page du site, ou vers un autre site.
Télécharger l'Éditeur
N° 20 — 1/3 Code | 2/3 Texte
Un contenu intégré, à côté d'un texte
À gauche, un petit code HTML : ici, une horloge. On y colle souvent un code fourni par un autre site : une carte, un agenda partagé, un sondage, la météo.
N° 21 — 2/3 Texte | 1/3 Code
Une carte, fournie par OpenStreetMap
Le texte à gauche, le contenu intégré à droite. Cette carte vient du site OpenStreetMap : on y copie le code de partage, puis on le colle dans le bloc. Ici : Embrun, dans les Hautes-Alpes, la ville où Edelweiss le montagnard a grandi.
N° 22 — Photo + Programme
Infos pratiques
Départ : 7 h, place de l'église
Retour : vers 18 h
Prévoir : chaussures de marche, pique-nique, gourde
La grande sortie en montagne
Une photo, un texte et un encart : idéal pour une sortie, une fête ou une formation.
Le programme
- Montée au col, à travers les alpages
- Pique-nique au bord du lac
- Descente par le sentier des marmottes
N° 23 — Séparateur décoratif
Le séparateur ci-dessus est en « Crête de montagne ». Il existe aussi en « Vague » et en « Filet simple ». Et sous ce texte, un Espaceur Horizontal (bloc n° 24) laisse un grand espace vide, pour aérer la page.
N° 24 — Espaceur Horizontal
Page mise à jour le 05/11/2026