Un bloc d’avantages que le client complète lui-même
Trois cartes dans la maquette, ce n’est qu’un début : dans un mois, le client en voudra une quatrième. Faites des cartes une liste, et il l’ajoutera lui-même ; le design de la carte reste le vôtre.
Ce que vous obtenez
<section class="benefits">
<h2 fld-text="Benefits title">Why people stay</h2>
<div class="benefits__grid" fld-loop="Benefits">
<div class="benefit">
<h3 fld-text="Benefit title">Roasted on Mondays</h3>
<p fld-area="Benefit text">Beans are never older than a week.</p>
</div>
<div class="benefit">
<h3 fld-text="Benefit title">Quiet tables</h3>
<p fld-area="Benefit text">No music before ten, sockets at every seat.</p>
</div>
<div class="benefit">
<h3 fld-text="Benefit title">Pastries from next door</h3>
<p fld-area="Benefit text">Baked at six, gone by noon.</p>
</div>
</div>
</section>Le client a ajouté la quatrième carte dans l’administration ; elle n’était pas dans le balisage.
Étape par étape
Le titre de la section : un champ simple
Le titre au-dessus des cartes ne se répète pas : c’est donc un fld-text hors de la liste.
<h2 fld-text="Benefits title">Why people stay</h2>
La liste sur le bloc des cartes
fld-loop se place sur le bloc dans lequel les cartes se suivent. Le nom de la liste est son titre dans l’administration.
<div class="benefits__grid" fld-loop="Benefits">
Les champs d’une carte
La première carte sert de modèle de ligne : les champs balisés dans cette carte seront ceux de chaque ligne de l’administration. Ici, un titre fld-text et un texte fld-area.
<div class="benefit"> <h3 fld-text="Benefit title">Roasted on Mondays</h3> <p fld-area="Benefit text">Beans are never older than a week.</p> </div>
Les autres cartes, de la même façon
Balisez chaque carte avec les mêmes attributs. « Charger les données » importe alors les trois dans l’administration, et pas une seule.
<div class="benefit"> <h3 fld-text="Benefit title">Quiet tables</h3> <p fld-area="Benefit text">No music before ten, sockets at every seat.</p> </div>
À retenir
- Si le client supprime toutes les lignes, le bloc des cartes disparaît de la page, mais le titre reste.
- Cette recette ne touche ni aux images ni aux icônes : laissez-les dans le balisage ou placez-les dans un bloc à part.
Erreurs fréquentes
Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.
<div class="benefits__grid" fld-loop="Benefits">
<div class="benefit">
<h3 fld-text="Benefit title">Roasted on Mondays</h3>
</div>
<div class="benefit">
<h3>Quiet tables</h3>
</div>
</div>Seule la première carte est balisée : le modèle fonctionne, mais « Charger les données » n’importe qu’une ligne au lieu de trois. Le journal ne signale rien.
<div class="benefits__grid" fld-loop="Benefits">
<div class="benefit">
<h3 fld-text="Benefit title">Roasted on Mondays</h3>
</div>
<div class="benefit">
<h3 fld-text="Benefit title">Quiet tables</h3>
</div>
</div>Des attributs sur chaque carte.