Construire les diapositives de votre Story
Ce tutoriel vous explique comment construire une Story dans un site hébergé sur PagesLocales, à partir des blocs Empilement et Séparateur de l’éditeur de page WordPress.
Vous apprendrez à structurer vos diapositives, à organiser vos contenus et à régler correctement les paramètres essentiels pour obtenir un rendu plein écran maîtrisé.
L’exemple présenté peut être reproduit sur votre propre site — à condition qu’il soit hébergé sur PagesLocales — puisque le mode Story est une fonctionnalité spécifique à cet environnement.
Chaque diapositive d’une Story est construite à partir d’un bloc Empilement.
Chaque changement de diapositive est marqué par un bloc Séparateur.
Un article en mode Story est donc structuré ainsi :
Empilement
Séparateur
Empilement
Séparateur
Et ainsi de suite.
Le bloc Séparateur permet au système de détecter le passage à la diapositive suivante.
⚠️ Le bloc Séparateur doit être placé à la racine de la structure des blocs.
Le contenu de la diapositive est créé à l’intérieur du bloc Empilement.
Vous pouvez utiliser les blocs classiques de l’éditeur :
paragraphe, titre, image, citation, etc.
(les vidéos ne sont pas prises en charge dans le format Story).
On obtient alors une structure hiérarchisée de blocs :
Empilement
├── Paragraphe
├── Image
├── Titre
└── Autres blocs éventuels
Si vous ajoutez simplement du texte sans marges hautes et basses,
le contenu peut se superposer à la barre de navigation en haut de la Story.
Il est donc indispensable de gérer les espacements.
Ajoutez des marges au bloc Empilement :
en haut, en bas, à droite et à gauche.
Les marges permettent d’éviter les interférences avec la navigation,
d’aérer le contenu
et d’améliorer la lisibilité.
Les marges participent directement au rendu professionnel.
Lorsque vous réglez les marges sur le bloc Empilement,
elles s’appliquent automatiquement à tous les blocs qu’il contient.
Autrement dit, les espacements se règlent toujours au niveau du bloc parent.
Le fond noir est le fond par défaut du mode Story.
Il permet de différencier immédiatement une Story d’un article classique.
Pour garantir la lisibilité, utilisez une couleur de texte claire
afin de maintenir un contraste suffisant.
Pour que la couleur de fond s’applique sur toute la hauteur de la diapositive
et pour pouvoir répartir correctement les éléments sur l’ensemble de l’écran,
le bloc Empilement placé à la racine de la diapositive doit toujours être réglé avec une hauteur minimale de 100 %.
Ce bloc racine correspond à la diapositive elle-même.
Sans ce réglage, la couleur ou l’image de fond ne couvrira que la hauteur réelle du contenu, et non toute la surface de l’écran.
Le paramètre “hauteur minimale : 100 %” devient donc le réglage de base
pour tout bloc Empilement utilisé comme diapositive.
Une fois cette hauteur définie, vous pouvez ensuite distribuer les éléments en haut, au centre ou en bas de l’écran selon l’effet recherché.
En changeant l’alignement vertical du bloc Empilement sur “centré”,
le contenu se place au milieu de l’écran.
Cette disposition crée une mise en page plus équilibrée.
En sélectionnant l’alignement vertical “bas” du bloc Empilement,
le texte se positionne en bas de la diapositive.
Ce format est particulièrement adapté à un effet plus narratif.
Comme pour les marges,
l’alignement d’un bloc (par exemple un paragraphe)
se règle au niveau du bloc parent.
Au lieu d’une couleur unie,
vous pouvez définir une image en arrière-plan.
Veillez à :
- activer la hauteur minimale à 100%,
- conserver des marges suffisantes,
- vérifier la lisibilité du texte.
Si le texte devient difficile à lire sur l’image, ajoutez un fond au bloc texte avec un niveau de transparence.
Cela permet d’améliorer le contraste tout en conservant l’image visible.
Vous pouvez arrondir les angles du bloc texte.
Cette option donne un style plus moderne
et renforce la séparation visuelle entre le texte et l’image.
Vous pouvez modifier :
• la taille du texte
• la police
• le style
Vous pouvez ajouter des sous-titres et modifier leur alignement. Pour cela, réglez la justification du bloc Empilement sur “Étendre les éléments”.
Vous pouvez ensuite aligner vos titres et paragraphes à gauche, au centre ou à droite selon l’effet recherché.
Sous-titre 1
Aligner le texte à gauche
Sous-titre 1
Centrer le texte
Sous-titre 1
Aligner le texte à droite
Noir sur Noir: nécessaire pour afficher une diapo (si vide, ne s’affiche pas)