Une page Phoenix efficace ressemble à un parcours : elle accueille une personne, lui donne des repères et lui propose une prochaine étape. Les blocs existants permettent de construire ce parcours sans enfermer tous les contenus dans un modèle particulier.
Voici une méthode pour composer une page cohérente avec hero, about, features, faq et cta.
Partir du message de la page
Avant de choisir les sections, écrivez une phrase qui décrit le résultat attendu. Pour une page de communauté : « Comprendre ce que Phoenix permet d’apprendre et trouver une première façon de participer. »
Cette phrase aide à supprimer les blocs qui n’apportent aucune information nouvelle. Une page n’a pas besoin de réunir tous les composants disponibles. Elle doit répondre aux questions de son public dans un ordre compréhensible.
Rassemblez ensuite les faits : public visé, exemples concrets, conditions de participation et destination principale du bouton. Le brief de projet peut servir de point de départ.
Donner une responsabilité à chaque section
Le hero expose la promesse de la page. Son titre doit rester compréhensible sans lire les cinq sections suivantes. Une courte description explique à qui s’adresse la proposition et ce que le visiteur peut faire.
Le bloc about présente le contexte ou la méthode. Il donne de la substance à l’introduction : comment fonctionne le projet, pourquoi cette approche a été choisie et ce que l’on peut explorer.
features organise plusieurs bénéfices, étapes ou profils. Gardez des cartes comparables. Mélanger une catégorie de public, une fonction technique et un témoignage dans la même série rend leur relation moins claire.
La faq traite les hésitations réelles. Enfin, cta propose une action qui correspond au niveau d’information atteint : consulter un programme, essayer un exemple ou demander de l’aide.
Préserver une hiérarchie de titres
Une page de présentation possède un titre principal identifiable. Dans les exemples, le hero fournit le h1, puis les grandes sections utilisent h2. Une carte ou une sous-partie peut utiliser h3.
La taille visuelle vient du CSS. Elle ne doit pas dicter le niveau sémantique. Évitez d’utiliser un h1 pour chaque section simplement parce que vous souhaitez un grand texte.
Lorsque vous déplacez un bloc, relisez les transitions. Un titre comme « Et maintenant ? » fonctionne seulement si la section précédente prépare cette question.
Choisir les variantes avec une règle explicite
Un champ design peut sélectionner une variante du même composant. Le contenu conserve son contrat tandis que la disposition change.
{% set reversed = design|default('1') == '2' %}
<section class="md-about{{ reversed ? ' md-about-reversed' : '' }}">
{# Les mêmes champs sont présentés dans une autre disposition. #}
</section>
Décrivez la convention dans la documentation du design. Une variante ne devrait pas secrètement changer la destination d’un bouton ou la source d’un formulaire.
Réservez un modèle particulier aux parcours qui demandent réellement un traitement différent, comme un configurateur. Une page de présentation ordinaire bénéficie davantage de blocs simples et éditables.
Garder les CTA cohérents
Sur une même page, nommez la même action de la même manière. Si « Rejoindre la communauté » mène au formulaire d’adhésion, un deuxième bouton identique doit conduire au même parcours.
Une action secondaire peut proposer un guide ou le programme d’un atelier. Donnez-lui une importance visuelle moindre pour conserver un choix principal clair. Vérifiez les destinations dans le backend plutôt que de recopier leurs URL dans plusieurs fichiers.
Relire la page comme un visiteur
Contrôlez d’abord la version mobile : ordre de lecture, longueur des titres, images facultatives et espacement entre les boutons. Vérifiez ensuite le clavier et l’affichage sans animation.
Demandez à une autre personne de résumer la page en une phrase et de trouver l’action principale. Si elle hésite, ajustez les contenus et leur ordre avant d’ajouter des effets visuels.
Vous pouvez prolonger cet exercice avec une page d’accueil préparée avec l’IA, puis effectuer le test de livraison.
