Des tarifs que le client modifie sans vous

Ce que vous obtenez

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

Étape par étape

1. La liste sur la grille des formules

   fld-loop sur le bloc où les cartes sont côte à côte. Chaque carte est une ligne dans l’administration.

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

2. Nom et prix

   Tous deux sont des fld-text. Écrivez le prix avec sa devise : le client voit alors dans le champ exactement ce qu’affiche le site.

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

3. Le contenu : un champ éditeur

   fld-editor sur un conteneur autour du <ul>. Le client ajoute et retire des éléments dans l’éditeur habituel.

   <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. Le bouton : adresse et texte

   fld-link sur le lien et fld-text sur le texte, avec des noms différents. Chaque formule a son propre lien.

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

À retenir

• Pourquoi le contenu n’est pas une liste à part dans la ligne : un seul champ éditeur est plus simple pour le client qu’une liste dans une liste.
• Stylez les éléments dans votre balisage pour .plan__list li : l’éditeur produit des <ul> et <li> ordinaires.

Erreurs fréquentes

Le journal de génération est l’onglet « Journaux » de votre projet sur themeforge.pro ; la vérification gratuite du balisage affiche les mêmes remarques.

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

Attributs de cette recette

Autres recettes