Блок «Команда», который клиент обновляет сам

Что получится

<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>

Пошагово

1. Список — на сетку карточек

   fld-loop на блоке, внутри которого идут карточки людей.

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

2. Фото

   fld-image прямо на <img>. В админке это поле картинки, srcset из вёрстки при сборке убирается.

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

3. Имя и должность

   Обе строки — fld-text, с разными именами.

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

4. Остальные карточки — так же

   Атрибуты и их имена у всех карточек одинаковые — тогда «Загрузить данные» перенесёт в админку всех людей.

   <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>

Что важно

• Описание фото (alt) берётся из медиатеки WordPress: у каждого снимка — своё. Заполните «Альтернативный текст» у фото в медиатеке; alt из вёрстки на сайт не переносится.
• Порядок людей клиент меняет перетаскиванием строк.

Частые ошибки

Журнал сборки — вкладка «Логи» вашего проекта на themeforge.pro; те же замечания показывает бесплатная проверка разметки.

<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>

Атрибуты в рецепте

Ещё рецепты