Benefit cards the client adds to without you
Three cards in the design are only the start: in a month the client will want a fourth. Make the cards a list, and they will add it themselves, while the card keeps your design.
What you get
<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>The client added the fourth card in the admin; it was not in the markup.
Step by step
The section heading is a plain field
The heading above the cards does not repeat, so it is fld-text outside the list.
<h2 fld-text="Benefits title">Why people stay</h2>
The list goes on the block of cards
fld-loop goes on the block where the cards follow each other. The list’s name is its heading in the admin.
<div class="benefits__grid" fld-loop="Benefits">
Fields inside a card
The first card is the pattern of a row: the fields marked in it are the fields of every row in the admin. Here that is a title fld-text and a text 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>
The other cards the same way
Mark up every card with the same attributes. Then “Load data” brings all three into the admin, not one.
<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>
What matters
- If the client deletes every row, the block of cards disappears from the page and the heading stays.
- This recipe leaves pictures and icons alone: keep them in the markup or move them to a separate block.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<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>Only the first card is marked up: the template works, but “Load data” brings one row into the admin instead of three. The build log says nothing.
<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>Attributes on every card.