Тарифи, які клієнт змінює без вас

Що вийде

<section class="plans">
  <h2 fld-text="Plans title">Coffee subscription</h2>
  <div class="plans__grid" fld-loop="Plans">
    <article class="plan">
      <h3 fld-text="Plan name">Weekly</h3>
      <p class="plan__price" fld-text="Plan price">$18</p>
      <div class="plan__list w-richtext" fld-editor="Plan features">
        <ul><li>250 g of fresh beans</li><li>Free delivery</li></ul>
      </div>
      <a class="button" href="/contacts" fld-link="Plan button">
        <span fld-text="Plan button text">Subscribe</span></a>
    </article>
    <article class="plan">
      <h3 fld-text="Plan name">Monthly</h3>
      <p class="plan__price" fld-text="Plan price">$60</p>
      <div class="plan__list w-richtext" fld-editor="Plan features">
        <ul><li>1 kg of fresh beans</li><li>A tasting set</li></ul>
      </div>
      <a class="button" href="/contacts" fld-link="Plan button">
        <span fld-text="Plan button text">Subscribe</span></a>
    </article>
  </div>
</section>

Покроково

1. Список — на сітку тарифів

   fld-loop на блоці, де картки стоять поруч. Кожна картка — рядок в адмінці.

   <div class="plans__grid" fld-loop="Plans">

2. Назва й ціна

   І назва, і ціна — fld-text. Ціну пишіть разом із валютою: так клієнт побачить у полі саме те, що на сайті.

   <h3 fld-text="Plan name">Weekly</h3>
   <p class="plan__price" fld-text="Plan price">$18</p>

3. Склад — поле редактора

   fld-editor на обгортці навколо <ul>. Клієнт додає й прибирає пункти у звичному редакторі.

   <div class="plan__list w-richtext" fld-editor="Plan features">
     <ul><li>250 g of fresh beans</li><li>Free delivery</li></ul>
   </div>

4. Кнопка — адреса й підпис

   fld-link на посиланні та fld-text на підписі, з різними назвами. Кожен тариф має власне посилання.

   <a class="button" href="/contacts" fld-link="Plan button">
     <span fld-text="Plan button text">Subscribe</span></a>

Що важливо

• Чому склад — не окремий список усередині рядка: одне поле редактора клієнтові простіше, ніж список у списку.
• Оформлення пунктів задайте у верстці для .plan__list li — редактор виводить звичайні <ul> і <li>.

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

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

<ul class="plan__list" fld-editor="Plan features">
  <li>250 g of fresh beans</li>
  <li>Free delivery</li>
</ul>

<div class="plan__list w-richtext" fld-editor="Plan features">
  <ul><li>250 g of fresh beans</li><li>Free delivery</li></ul>
</div>

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

Ще рецепти