Les blocs pour mettre en page
13 blocs pour marier textes, photos, vidéos et animations
2 colonnes : texte | photo
Le texte à gauche, la photo à droite. C'est la mise en page préférée des magazines !
Sur téléphone, la photo passe sous le texte.
🎯 À quoi sert-il ? Accompagner un texte d'une photo, côte à côte.
🛠️ Comment faire ? On écrit le texte, puis le nom de la photo et sa légende.
💡 Astuce : Alternez avec le bloc suivant pour une page qui « respire ».
🏅 Petit défi : repérer, sur cette page, toutes les photos à droite.
2 colonnes : photo | texte
Cette fois, la photo est à gauche et le texte à droite.
En alternant les deux blocs, on obtient une page vivante, en zigzag.
🎯 À quoi sert-il ? La même chose, dans l'autre sens.
🛠️ Comment faire ? Comme le bloc précédent.
💡 Astuce : Une photo à gauche, puis une à droite : l'œil se promène.
2 colonnes : texte | vidéo
Le texte à gauche, une vidéo à droite.
On colle simplement l'adresse YouTube de la vidéo : l'Éditeur s'occupe du reste.
La vidéo de démonstration
🎯 À quoi sert-il ? Présenter une vidéo en l'accompagnant d'un texte.
🛠️ Comment faire ? On écrit le texte, puis on colle le lien YouTube (ou l'adresse d'un fichier vidéo .mp4).
💡 Astuce : Une vidéo sur YouTube ne prend aucune place dans l'espace Web.
2 colonnes : vidéo | texte
La même vidéo, de l'autre côté
La vidéo à gauche, le texte à droite.
Pratique pour un tutoriel : on regarde, puis on lit le résumé.
🎯 À quoi sert-il ? La même chose, dans l'autre sens.
🛠️ Comment faire ? Comme le bloc précédent.
💡 Astuce : Pensez à donner un titre à la vidéo : c'est plus clair pour le visiteur.
2 colonnes : photo | vidéo
Et la vidéo, à côté
🎯 À quoi sert-il ? Mettre côte à côte une photo et une vidéo, sans texte.
🛠️ Comment faire ? Le nom de la photo, sa légende, puis le lien de la vidéo.
💡 Astuce : Idéal pour un « avant / après » ou une sortie racontée en images.
2 colonnes : vidéo | photo
La vidéo d'abord
🎯 À quoi sert-il ? La même chose, dans l'autre sens.
🛠️ Comment faire ? Comme le bloc précédent.
💡 Astuce : Variez les deux blocs d'une page à l'autre.
1/3 Image | 2/3 Texte (+ bouton)
Une carte avec un bouton
L'image occupe un tiers de la largeur, le texte deux tiers. Un bouton, en bas, invite le visiteur à aller plus loin.
Voir les blocs photos🎯 À quoi sert-il ? Présenter une activité, un atelier, une offre, avec un bouton d'action.
🛠️ Comment faire ? Un titre ## pour la carte, le texte, la photo, puis le texte et l'adresse du bouton.
💡 Astuce : Le bouton peut mener vers une autre page du site, ou vers un site extérieur.
2/3 Texte | 1/3 Image (+ bouton)
La même carte, à l'envers
Cette fois, le texte est à gauche et l'image à droite, sur un tiers de la largeur.
Mes premiers pas🎯 À quoi sert-il ? La même carte, dans l'autre sens.
🛠️ Comment faire ? Comme le bloc précédent.
💡 Astuce : Laissez le texte du bouton vide pour ne pas afficher de bouton.
1/3 Code (iFrame) | 2/3 Texte
Une animation à côté du texte
À gauche, une petite animation : un soleil qui se lève sur les montagnes. Elle est faite de code, collé tel quel dans le bloc.
🎯 À quoi sert-il ? Associer une animation, ou tout autre code fourni par un site de confiance, à un texte.
🛠️ Comment faire ? On colle le code fourni par le site (bouton « Intégrer » ou « Partager »), puis on règle la hauteur.
💡 Astuce : Bloc pour les plus curieux : on ne colle que des codes de confiance, sans les modifier.
2/3 Texte | 1/3 Code (iFrame)
Une page qui se construit
À droite, l'animation montre une page qui se remplit bloc par bloc… exactement comme avec l'Éditeur !
🎯 À quoi sert-il ? La même chose, dans l'autre sens.
🛠️ Comment faire ? Comme le bloc précédent.
💡 Astuce : Si l'animation est coupée, augmentez un peu la hauteur.
Photo + Programme
Infos pratiques
Durée : 2 heures
Pour tous, dès 7 ans
Matériel : un ordinateur
Atelier « Mon premier site »
Un atelier pour découvrir l'Éditeur en s'amusant.
Au programme
- ouvrir l'Éditeur et créer sa première page ;
- ajouter une photo, une vidéo, un tableau ;
- télécharger sa page et l'admirer !
Pour qui ?
- les enfants, avec un adulte ;
- les adolescents, les adultes et les seniors.
🎯 À quoi sert-il ? Présenter un atelier, une formation, une sortie : une photo, un petit encart d'informations, et un programme détaillé.
🛠️ Comment faire ? Le nom de la photo, le titre et le texte de l'encart, puis le programme avec des titres ## et ###.
💡 Astuce : On choisit la couleur des bandeaux de titres.
Séparateur décoratif
🎯 À quoi sert-il ? Séparer deux parties d'une page avec un joli trait : une vague, une crête de montagne, un filet simple ou épais. Juste au-dessus, c'est une crête de montagne !
🛠️ Comment faire ? On choisit le style et l'espace autour.
💡 Astuce : Chaque bloc peut aussi avoir son propre séparateur, avec l'option « Ajouter un Séparateur décoratif après ce bloc » : c'est le petit filet qui suit chaque démonstration de cette page.
Espaceur Horizontal
🎯 À quoi sert-il ? Ajouter un espace vide entre deux blocs, pour aérer la page. Il y en a un, invisible, juste au-dessus de cette fiche !
🛠️ Comment faire ? On choisit la hauteur : petit, moyen ou grand.
💡 Astuce : Un peu d'air rend une page plus agréable à lire.