Cet article de démonstration rassemble tous les blocs de contenu disponibles dans l’éditeur, avec chacune de leurs mises en page. Il reste en brouillon : il sert de référence et n’apparaît pas sur le site.
Image
Une image seule, avec sa légende.
Grille de photos — mise en page automatique
Les photos sont réparties en rangées de même hauteur, sans recadrage, selon leur nombre et leur format. Sur téléphone, elles passent en vignettes carrées sur deux colonnes.
1 photo portrait
2 photos paysage
2 photos portrait
3 photos paysage
4 photos de formats mélangés
5 photos paysage
7 photos avec panoramas, petit espacement
Grille de photos — grille régulière
Toutes les photos sont recadrées au même format 4:3.
2 colonnes
3 colonnes
4 colonnes, grand espacement
Grille de photos — mosaïque
La première photo est mise en avant, les suivantes sont en vignettes carrées.
5 photos
9 photos
Grille de photos — colonnes
Les photos gardent leur format d’origine et s’empilent en cascade.
Automatique
2 colonnes
4 colonnes
Carrousel de photos
Seule la photo affichée est téléchargée : les suivantes ne le sont que si le visiteur les fait défiler.
Paysage 3:2, photos recadrées
Une légende par photo, affichée sous le carrousel.
Panoramique 16:9
Classique 4:3, photos entières (formats mélangés)
Carré 1:1
Vidéo YouTube
Renvoi vers des articles
Un article, avec un titre
Deux articles
Trois articles
Quatre articles
Appel à candidater
Textes par défaut
Textes personnalisés, sans lien vers la formation
Encadrés
Encadré « Information » : pour une précision ou un rappel.
Encadré « Attention » : pour une date limite ou une condition.
Encadré « Important » : pour une annulation ou un point bloquant.
Encadré « Réussite » : pour un résultat ou une bonne nouvelle.
Extrait de code
const promotion = ["Ada", "Grace", "Alan"]
for (const etudiant of promotion) {
console.log(`Bienvenue ${etudiant} !`)
}