Перший екран із фоном і кнопкою
Перше, що бачить відвідувач, і те, що клієнт постійно оновлює: нова акція, інше фото, інший текст на кнопці. Після розмітки все це редагується в адмінці, а верстка лишається вашою.
Що вийде
<body wp-fields-group="Home">
<section class="hero" fld-bg-image="Hero background">
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p>
<h1 fld-text="Hero title">Coffee for slow mornings</h1>
<p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span>
</a>
</section>
</body>Open every day
Coffee for slow morningsSingle-origin espresso, fresh pastries and a table by the window.
See the menuШість полів в одній групі: клієнт знаходить їх на сторінці «Home».
Покроково
Назвіть групу полів
Атрибут wp-fields-group на
<body>дає полям сторінки спільний заголовок в адмінці. Без нього поля не з’являться.<body wp-fields-group="Home">
Зробіть фон полем
fld-bg-image ставиться на той самий блок, що має фон. В адмінці це поле картинки, на сайті — фон секції.
<section class="hero" fld-bg-image="Hero background">
Розмітьте тексти
Короткі рядки — fld-text, абзац — fld-area: у ньому клієнт може переносити рядки. Кожне поле має власну зрозумілу назву.
<p class="hero__eyebrow" fld-text="Hero eyebrow">Open every day</p> <h1 fld-text="Hero title">Coffee for slow mornings</h1> <p class="hero__lead" fld-area="Hero lead">Single-origin espresso, fresh pastries and a table by the window.</p>
Кнопка — два поля
fld-link на посиланні робить полем адресу, а підпис розмічається окремо, усередині посилання, під іншою назвою.
<a class="button" href="/menu" fld-link="Hero button"> <span fld-text="Hero button text">See the menu</span> </a>
Що важливо
- Називайте поля так, щоб клієнт зрозумів їх без вас: «Hero title», а не «Text 1».
- Після «Завантажити дані» тексти з верстки потраплять у поля — клієнтові не доведеться набирати їх заново.
Типові помилки
Журнал збирання — вкладка «Логи» вашого проєкту на themeforge.pro; ті самі зауваження показує безплатна перевірка розмітки.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button">See the menu</span></a>Посилання й підпис під однією назвою: виходить одне поле на дві ролі, і кнопка ламається. Збирання повідомляє про збіг назв.
<a class="button" href="/menu" fld-link="Hero button">
<span fld-text="Hero button text">See the menu</span></a>Підпис має власну назву, наприклад «Hero button text».