Блок преимуществ, который клиент дополняет сам
Три карточки в макете — это только начало: через месяц клиент захочет четвёртую. Сделайте карточки списком, и он добавит её сам, а вид карточки останется вашим.
Что получится
<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>Четвёртую карточку клиент добавил в админке — в вёрстке её не было.
Пошагово
Заголовок секции — обычное поле
Заголовок над карточками не повторяется, поэтому это fld-text вне списка.
<h2 fld-text="Benefits title">Why people stay</h2>
Список — на блок с карточками
fld-loop ставится на блок, внутри которого карточки идут подряд. Имя списка — его заголовок в админке.
<div class="benefits__grid" fld-loop="Benefits">
Поля внутри карточки
Первая карточка — образец строки: какие поля размечены в ней, такие будут у каждой строки в админке. Здесь это заголовок 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>
Остальные карточки — так же
Разметьте каждую карточку теми же атрибутами. Тогда «Загрузить данные» перенесёт в админку все три, а не одну.
<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>Атрибуты на каждой карточке.