Ein Hero-Bereich mit Hintergrund und Button
Das Erste, was Besucher sehen, und das, was dein Kunde immer wieder aktualisiert: eine neue Aktion, ein anderes Foto, ein anderer Text auf dem Button. Ist er markiert, wird all das im Adminbereich bearbeitet, und das Layout bleibt deins.
Das Ergebnis
<body wp-fields-group="Home">
<section class="hero" fld-bg-image="Hero background">
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
<h1 fld-text="Hero title">Coffee for slow mornings</h1>
<p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span>
</a>
</section>
</body>Open every day
Coffee for slow morningsSingle-origin espresso, fresh pastries and a table by the window.
See the menuSechs Felder in einer Gruppe: Dein Kunde findet sie auf der Seite „Home“.
Schritt für Schritt
Benenne die Feldgruppe
Das Attribut wp-fields-group am
<body>gibt den Feldern der Seite eine gemeinsame Überschrift im Adminbereich. Ohne das Attribut erscheinen die Felder nicht.<body wp-fields-group="Home">
Mach den Hintergrund zum Feld
fld-bg-image kommt an den Block, der den Hintergrund trägt. Im Adminbereich ist es ein Bildfeld, auf der Website der Hintergrund des Abschnitts.
<section class="hero" fld-bg-image="Hero background">
Markiere die Texte
Kurze Zeilen sind fld-text, ein Absatz ist fld-area: Darin kann dein Kunde Zeilen umbrechen. Jedes Feld bekommt einen eigenen, verständlichen Namen.
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p> <h1 fld-text="Hero title">Coffee for slow mornings</h1> <p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
Ein Button sind zwei Felder
fld-link am Link macht die Adresse zum Feld. Die Beschriftung markierst du getrennt davon, innerhalb des Links und unter einem anderen Namen.
<a class="button" href="/menu" fld-link="Hero button"> <span fld-text="Hero button text">See the menu</span> </a>
Worauf es ankommt
- Benenne Felder so, dass dein Kunde sie ohne dich versteht: „Hero title“, nicht „Text 1“.
- Mit „Daten laden“ landen die Texte aus deinem Markup in den Feldern: Dein Kunde muss sie nicht neu eintippen.
Typische Fehler
Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button">See the menu</span></a>Link und Beschriftung unter einem Namen: Ein Feld bekommt zwei Aufgaben, und der Button funktioniert nicht mehr. Der Build meldet eine Kollision.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span></a>Die Beschriftung bekommt einen eigenen Namen, etwa „Hero button text“.