Ajouter des médias aux pages
Dans le panneau Blocs de l'éditeur de page, ajoutez des blocs Image, Héros, Galerie ou Vidéo, puis sélectionnez les fichiers de bibliothèque sous Attr : chaque bloc contrôle la mise en page et la lecture sur la page publiée ; voir Blocs de présentation multimédia pour le catalogue complet des types de blocs multimédia.
Votre bibliothèque Média est la source de la vérité ; l'Éditeur de pages est l'endroit où vous définissez la manière dont le travail est perçu. Faites glisser des blocs sur le canevas, sélectionnez des éléments dans Média et ajustez la mise en page dans le panneau Attributs de droite : pas de nouveau téléchargement de fichiers pour chaque emplacement.
Les fichiers conservent leurs dimensions d'origine dans Media. Le recadrage et le cadrage sur votre site sont contrôlés par bloc (Attributs → proportions), pas dans la bibliothèque.
Vous ne savez pas quel bloc correspond à l'histoire ? Commencez par le répertoire Blocs de présentation multimédia pris en charge, puis ouvrez la page de catégorie pour les traits et les options de mise en page.
Prérequis
Éléments dans Médias (photos, vidéos, collections de portfolio)
Tableau de bord → Pages → Modifier → onglet Éditeur de page
Blocs de présentation en un coup d'œil
| Catégorie Editeur | Bloquer | Idéal pour |
|---|---|---|
| Médias | Images | Image unique avec rapport hauteur/largeur, texte alternatif, lien facultatif |
| Médias | Vidéo | Lecteur HTML5 en ligne à partir d'une bibliothèque ou d'une URL |
| Médias | Boîte à lumière vidéo | La vignette ouvre la lecture ciblée |
| Médias | Fond vidéo | Toile de fond en boucle pleine largeur avec contenu superposé |
| Portefeuille | Portefeuille d'images | Une collection : grille, maçonnerie ou carrousel |
| Portefeuille | Galerie d'images | Images fixes triées sur le volet de Media (non liées à une seule collection) |
| Portefeuille | Portefeuille vidéo | Bobine vidéo organisée à partir de la bibliothèque |
| Portefeuille | Liste du portefeuille | Plusieurs collections : grille, liste ou onglets |
| Portefeuille | Carte des impacts | Portfolio géolocalisé sur une carte (Guide de la carte d'impact) |
| Héros | Image du héros | Héros fixe pleine largeur avec préréglages de mise en page |
| Héros | Portefeuille de héros | Héros animé par une collection de portfolio |
| Héros | Vidéo de héros | Héros vidéo de style streaming |
| Héros | Héros du Glassmorphisme | Panneau de verre flou sur support d'arrière-plan |
| Héros | Curseur de héros | Diapositives de héros rotatives dans toute la fenêtre |
| Avancé | Grille à bento | Techniques mixtes + statistiques + cellules de citation |
| Avancé | Curseur Avant/Après | Retoucher ou modifier les comparaisons |
| Avancé | Intégration d'annonces | Iframe d'emplacement d'annonce publié |
| Curseurs | Curseur | Carrousel d'images dans la colonne (préréglage de la galerie) |
| Vidéo | Galerie vidéo | Grille vidéo multicolonne |
| Vidéo | Témoignage vidéo | Citation + vidéo côte à côte |
Analyses approfondies : Blocs multimédias standard, Blocs de livraison de portefeuille, Blocs de toile Hero, Blocs d'affichage et de commentaires.
Étapes de mise en œuvre
- Téléchargez ou organisez les ressources sous Média (et collections Portfolio lors de l'utilisation de blocs de portefeuille). Pour les vidéos, prévoyez du temps pour le transcodage : voir Télécharger et gérer des vidéos.
- Ouvrez Pages → Modifier → Blocs dans la barre latérale droite → ajoutez un bloc correspondant à votre objectif de mise en page (tableau ci-dessus).
- Sélectionnez le bloc sur le canevas ; utilisez Attributs pour choisir Média, la source du portefeuille, les proportions ou les colonnes.
- Pour les blocs de portfolio, choisissez la collection Portfolio (ou plusieurs collections sur Portfolio Listing).
- Pour Galerie d'images ou Galerie de vidéos, ajoutez explicitement des éléments de Media dans le panneau de blocage.
- Prévisualisez Desktop et Mobile, puis Enregistrez la page et publiez lorsque vous êtes prêt.
Présentation du portfolio sur les pages
Les blocs de portfolio sont extraits des collections Portfolio, et non d'une sélection multiple ad hoc à partir de la bibliothèque générale (sauf Galerie d'images/Galerie de vidéos).
| Bloquer | Source | Options remarquables |
|---|---|---|
| Portfolio d'images | Un portefeuille | Aménagement : grille, maçonnerie, carrousel ; colonnes ; écart; rapport hauteur/largeur ; pagination |
| Galerie d'images | Images Médias sélectionnées | Disposition en grille ; alt par image ; rapport hauteur/largeur |
| Portfolio vidéo | Vidéos Médias | Liste organisée ; lecture de la grille |
| Liste du portefeuille | Portefeuilles multiples | Grille, liste ou onglets ; style de carte ; titre/description/compte bascule |
| Carte d'impact | Portefeuille avec données géographiques | Dispositions de cartes ; chronologie; campagne facultative faire un don CTA |
Ajustez la lightbox de la collection et les EXIF sur le site public sous Paramètres du portefeuille : voir Paramètres de la lightbox du portefeuille.
Dépannage et pièges courants
- Bloc vide après sauvegarde : Les blocs de portefeuille nécessitent qu'un Portfolio soit sélectionné ; les blocs de galerie nécessitent au moins une image ou une vidéo ajoutée dans les attributs.
- Mauvais recadrage sur le site en direct : Vérifiez le rapport hauteur/largeur et l'ajustement de l'objet sur le bloc ; les héros utilisent des préréglages de mise en page distincts (Blocs de toile Hero).
- Chargement lent des héros : Utilisez des images de vidéos et d'affiches optimisées pour le Web ; très grands originaux lents à la première peinture.
- Slider vs Hero Slider : Utilisez Hero Slider pour les héros de page pleine largeur ; utilisez Slider à l'intérieur des colonnes pour les carrousels de contenu.
Vérification de votre configuration
- Au moins un bloc utilise Media ou une source Portfolio que vous avez l'intention d'expédier.
- Les images fixes principales ont un texte alternatif ; les blocs vidéo ont une affiche ou une URL définie.
- L'aperçu sur ordinateur et mobile correspond à l'histoire que vous souhaitez que les visiteurs voient.