Блок переваг, який клієнт доповнює сам

Що вийде

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

Покроково

1. Заголовок секції — звичайне поле

   Заголовок над картками не повторюється, тому це fld-text поза списком.

   <h2 fld-text="Benefits title">Why people stay</h2>

2. Список — на блок із картками

   fld-loop ставиться на блок, у якому картки йдуть підряд. Назва списку — його заголовок в адмінці.

   <div class="benefits__grid" fld-loop="Benefits">

3. Поля всередині картки

   Перша картка — зразок рядка: які поля розмічені в ній, такі матиме кожен рядок в адмінці. Тут це заголовок fld-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>

4. Решта карток — так само

   Розмітьте кожну картку тими самими атрибутами. Тоді «Завантажити дані» перенесе в адмінку всі три, а не одну.

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

Що важливо

• Якщо клієнт видалить усі рядки, блок із картками зникне зі сторінки, а заголовок лишиться.
• Картинок та іконок цей рецепт не стосується: залиште їх у верстці або винесіть в окремий блок.

Типові помилки

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

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

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

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

Ще рецепти