Блок «Команда», який клієнт оновлює сам

Що вийде

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

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

Ще рецепти