Тарифы, которые клиент меняет без вас

Что получится

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

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

Ещё рецепты