Ein Vorteile-Block, den dein Kunde selbst erweitert
Drei Karten im Design sind erst der Anfang: In einem Monat will dein Kunde eine vierte. Mach die Karten zu einer Liste, dann fügt er sie selbst hinzu, und die Karte behält dein Design.
Das Ergebnis
<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>Die vierte Karte hat der Kunde im Adminbereich hinzugefügt; im Markup gab es sie nicht.
Schritt für Schritt
Überschrift: ein einfaches Feld
Die Überschrift über den Karten wiederholt sich nicht, deshalb ist sie ein fld-text außerhalb der Liste.
<h2 fld-text="Benefits title">Why people stay</h2>
Die Liste kommt an den Block mit den Karten
fld-loop kommt an den Block, in dem die Karten aufeinander folgen. Der Name der Liste ist ihre Überschrift im Adminbereich.
<div class="benefits__grid" fld-loop="Benefits">
Felder in der Karte
Die erste Karte ist das Muster eines Eintrags: Die Felder, die du in ihr markierst, hat jeder Eintrag im Adminbereich. Hier sind das ein Titel fld-text und ein 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>
Die übrigen Karten genauso
Markiere jede Karte mit denselben Attributen. Dann überträgt „Daten laden“ alle drei in den Adminbereich, nicht nur eine.
<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>
Worauf es ankommt
- Löscht dein Kunde alle Einträge, verschwindet der Block mit den Karten von der Seite; die Überschrift bleibt.
- Bilder und Icons behandelt dieses Rezept nicht: Lass sie im Markup oder verschiebe sie in einen eigenen Block.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<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>Nur die erste Karte ist markiert: Die Vorlage funktioniert, aber „Daten laden“ bringt einen Eintrag statt drei in den Adminbereich. Das Build-Protokoll meldet nichts.
<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>Attribute an jeder Karte.