Blocs Astro

Contenus riches, galeries et carrousels

Une page d’exemple qui assemble les blocs interactifs prêts pour Astro : carrousels Embla optionnels, galerie lightbox, galerie mise en avant, témoignages et accordéon animé.

Carrousel Galerie
01 Embla optionnel

Le moteur premium se charge uniquement sur les blocs qui le demandent.

02 Galeries modernes

Layouts carousel, feature, masonry, justified, stack ou marquee.

03 Animations de contenu

Reveal au scroll, mouvements ambiants subtils et respect du reduced motion.

Embla : parcours éditoriaux premium

Embla : ressources compactes à swiper

Galerie carousel native avec lightbox

Personnes réunies autour d’un atelier créatif
Accueil des participants
Carnet ouvert pendant une session de travail
Notes et idées
Table de préparation avec matériel visuel
Préparation visuelle
Équipe en discussion devant un écran
Moment d’équipe
Micro et ambiance de conférence
Conférence
Salle d’événement avec public
Public en salle

Galerie carousel Embla

Personnes réunies autour d’un atelier créatif
Plan large
Carnet ouvert pendant une session de travail
Carnet
Table de préparation avec matériel visuel
Préparation
Équipe en discussion devant un écran
Équipe
Micro et ambiance de conférence
Conférence
Salle d’événement avec public
Public

Galerie mise en avant

Personnes réunies autour d’un atelier créatif
Carnet ouvert pendant une session de travail
Table de préparation avec matériel visuel
Équipe en discussion devant un écran
Micro et ambiance de conférence

Galerie mixte image + vidéo

Personnes réunies autour d’un atelier créatif
Image statique
Carnet ouvert pendant une session de travailLire la vidéo
Vidéo YouTube avec façade poster
Table de préparation avec matériel visuelLire la vidéo
Fichier vidéo natif
Équipe en discussion devant un écran
Retour image

Galerie justifiée (rangées au ratio réel)

Personnes réunies autour d’un atelier créatif
Accueil
Carnet ouvert pendant une session de travail
Notes
Table de préparation avec matériel visuel
Préparation
Équipe en discussion devant un écran
Équipe
Micro et ambiance de conférence
Conférence
Salle d’événement avec public
Public

Image annotée avec hotspots

Personnes réunies autour d’un atelier créatif
Accueil

Point de départ de la séance et première consigne.

En savoir plus
Matériel

Zone préparée avec supports, carnets et outils visuels.

Restitution

Temps de partage en fin d’atelier.

Atelier créatif annoté

Photo-essay

Carnet ouvert pendant une session de travail
Préparer

Un premier temps calme installe le cadre, les objectifs et le vocabulaire commun.

Table de préparation avec matériel visuel
Observer

Les détails visuels servent de points d’appui pour formuler des hypothèses et comparer les ressentis.

Équipe en discussion devant un écran
Partager

La conclusion rassemble les apprentissages et ouvre les prochaines actions.

Galerie masonry (ordre préservé si support CSS Grid)

Personnes réunies autour d’un atelier créatif
Accueil
Carnet ouvert pendant une session de travail
Notes
Table de préparation avec matériel visuel
Préparation
Équipe en discussion devant un écran
Équipe
Micro et ambiance de conférence
Conférence
Salle d’événement avec public
Public

Galerie marquee (ruban en boucle continue)

Personnes réunies autour d’un atelier créatif
Carnet ouvert pendant une session de travail
Table de préparation avec matériel visuel
Équipe en discussion devant un écran
Micro et ambiance de conférence
Salle d’événement avec public

Embla : témoignages premium

Portrait de Marie Favre
Le site paraît immédiatement plus vivant : les contenus se découvrent par étapes, sans perdre la lisibilité.

Marie Favre

Responsable communication

Questions fréquentes dynamiques

Il sert à présenter plusieurs contenus dans un espace compact : articles, événements, offres, ressources ou témoignages.

Oui. Le rendu initial reste Astro, puis l’interaction lightbox ou carousel s’active côté client uniquement quand le bloc devient visible.

Les animations sont progressives, désactivables par préférence système et les contrôles restent exposés via des boutons et libellés accessibles.

Boutons précédent/suivant (::scroll-button) et points de navigation (::scroll-marker) générés par le navigateur, sans aucun script. Rendu identique en WordPress (PHP) et en Astro statique — c'est le markup exact du rail PHP. Clavier, focus et état actif gérés nativement. Compatible Chrome 135+ / Safari 19+ ; ailleurs, repli sur le défilement scroll-snap.

  • Personnes réunies autour d’un atelier créatif

    Accueil

  • Carnet ouvert pendant une session de travail

    Notes

  • Table de préparation avec matériel visuel

    Préparation

  • Équipe en discussion devant un écran

    Équipe

  • Micro et ambiance de conférence

    Conférence

  • Salle d’événement avec public

    Public