Ein Team-Bereich, den dein Kunde selbst aktuell hält

Das Ergebnis

<section class="team">
  <h2 fld-text="Team title">Who makes your coffee</h2>
  <div class="team__grid" fld-loop="Team">
    <article class="person">
      <img class="person__photo" src="images/anna.jpg" alt="Anna at the espresso machine" fld-image="Photo">
      <h3 fld-text="Name">Anna</h3>
      <p class="person__role" fld-text="Role">Head barista</p>
    </article>
    <article class="person">
      <img class="person__photo" src="images/tom.jpg" alt="Tom with a tray of buns" fld-image="Photo">
      <h3 fld-text="Name">Tom</h3>
      <p class="person__role" fld-text="Role">Baker</p>
    </article>
  </div>
</section>

Schritt für Schritt

1. Die Liste kommt an das Kartenraster

   fld-loop an den Block, in dem die Karten der Personen stehen.

   <div class="team__grid" fld-loop="Team">

2. Das Foto

   fld-image direkt am <img>. Im Adminbereich ist es ein Bildfeld; das srcset aus dem Markup entfernt der Build.

   <img class="person__photo" src="images/anna.jpg" alt="Anna at the espresso machine" fld-image="Photo">

3. Name und Position

   Beide Zeilen sind fld-text, mit unterschiedlichen Namen.

   <h3 fld-text="Name">Anna</h3>
   <p class="person__role" fld-text="Role">Head barista</p>

4. Die übrigen Karten genauso

   Alle Karten tragen dieselben Attribute mit denselben Namen. Dann überträgt „Daten laden“ alle Personen in den Adminbereich.

   <article class="person">
     <img class="person__photo" src="images/tom.jpg" alt="Tom with a tray of buns" fld-image="Photo">
     <h3 fld-text="Name">Tom</h3>
     <p class="person__role" fld-text="Role">Baker</p>
   </article>

Worauf es ankommt

• Die Beschreibung des Fotos (alt) kommt aus der WordPress-Mediathek, für jedes Bild eine eigene. Füll beim Foto in der Mediathek „Alternativer Text“ aus; das alt aus dem Markup kommt nicht auf die Website.
• Die Reihenfolge der Personen ändert dein Kunde, indem er die Einträge per Drag-and-drop verschiebt.

Typische Fehler

Das Build-Protokoll ist der Tab „Logs“ deines Projekts auf themeforge.pro; die kostenlose Markup-Prüfung zeigt dieselben Hinweise.

<div class="team__grid" fld-loop="Team">
  <article class="person">
    <h3 fld-text="Name">Anna</h3>
  </article>
  <article class="person">
    <h3 fld-text="Full name">Tom</h3>
  </article>
</div>

<div class="team__grid" fld-loop="Team">
  <article class="person">
    <h3 fld-text="Name">Anna</h3>
  </article>
  <article class="person">
    <h3 fld-text="Name">Tom</h3>
  </article>
</div>

Attribute in diesem Rezept

Weitere Rezepte