Pricing the client changes without you
Prices and what plans include change regularly. Here every plan card is a row of a list, and what it includes is one field with an ordinary editor, where the client edits the items as in a text document.
What you get
<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>250 g of fresh beans · Free delivery
1 kg of fresh beans · A tasting set
SubscribeThe client edits what a plan includes in the editor: bold, a new item, a link.
Step by step
The list goes on the grid of plans
fld-loop on the block where the cards stand side by side. Every card is a row in the admin.
<div class="plans__grid" fld-loop="Plans">
Name and price
Both are fld-text. Write the price with its currency, so the client sees in the field exactly what the site shows.
<h3 fld-text="Plan name">Weekly</h3> <p class="plan__price" fld-text="Plan price">$18</p>
What is included is an editor field
fld-editor on a wrapper around the
<ul>. The client adds and removes items in the familiar editor.<div class="plan__list w-richtext" fld-editor="Plan features"> <ul><li>250 g of fresh beans</li><li>Free delivery</li></ul> </div>
The button: address and caption
fld-link on the link and fld-text on the caption, with different names. Every plan has its own link.
<a class="button" href="/contacts" fld-link="Plan button"> <span fld-text="Plan button text">Subscribe</span></a>
What matters
- Why the items are not a separate list inside the row: one editor field is easier for the client than a list within a list.
- Style the items in your markup for
.plan__list li: the editor prints plain<ul>and<li>.
Common mistakes
The build log is the “Logs” tab of your project on themeforge.pro; the free markup check shows the same notes.
<ul class="plan__list" fld-editor="Plan features">
<li>250 g of fresh beans</li>
<li>Free delivery</li>
</ul>The editor field right on the <ul>: the editor prints its own list, and the site gets a list inside a list. The log stays silent.
<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 <div> around the list, with the field on it.