Website kits
Online course pricing page
Course pricing page with three tiers and feature lists, what every tier includes, a supply list, 14-day refund terms, a six-question FAQ and an enroll band.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page every Enroll button points to. Three tiers sit just below a short headline so all prices are visible on a laptop without scrolling: self-paced, with personal feedback, and a coaching bundle, each with one line on who it suits, a one-off price, four included items and its own button. The middle tier is marked as the usual choice for people who do not want to compare every line. Under the cards, one column lists what every tier gets on day one and the other the supplies to buy with their total cost, the hidden expense beginners worry about. The refund box states the 14-day terms in two sentences, the FAQ covers upgrades, feedback, scheduling, installments, age and group licenses, and a final enroll prompt closes the page. Replace the prices and checkout links first, and make the refund wording match your real policy and your course platform’s terms of sale.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 15
- Container (grid, 3 columns) × 1
- Container (grid) × 2
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 17
- Heading × 8
- Icon List × 5
- Button × 4
- Icon Box × 1
- Accordion × 1
- Image × 1
Things worth knowing
- Each tier’s feature rows become an Icon List widget, as do the day-one and supplies lists — five Icon Lists in all — and the six questions become one Accordion widget.
- Prices are Text Editor widgets, not Counter widgets and not the Elementor Pro Price Table, so a price change is a plain text edit.
- The refund box holds one glyph, one heading and one paragraph, so it converts to a single Icon Box widget with an undo icon.
- The tier cards are pulled up over the hero by a negative top margin on their grid Container (−104px, −84px on mobile); check it if you change the hero height. Below 780px the cards stack in the order Self-paced, With feedback, Coaching bundle.
- The four enroll buttons point to placeholder /checkout/ addresses; replace them with your course platform’s checkout links after import.
The HTML
This is the complete source. Copy it, or send it straight to the converter and adjust the options before exporting.
Show the HTML source
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Pricing — Loose Watercolor Foundations</title>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Nunito',Helvetica,Arial,sans-serif;color:#262a3b;background:#fffdf8}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Fraunces',Georgia,serif;color:#262a3b;font-weight:700}
h1{font-size:50px;line-height:1.1;letter-spacing:-.02em;margin:0 0 18px}
h2{font-size:34px;line-height:1.2;margin:0 0 14px}
h3{font-size:23px;line-height:1.3;margin:0 0 6px}
p{font-size:17px;line-height:1.7;color:#636879;margin:0 0 18px}
.eyebrow{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#22709e;margin:0 0 14px}
.button{display:block;text-align:center;padding:15px 24px;border-radius:12px;background:#c93e64;color:#fffdf8;text-decoration:none;font-weight:800;font-size:16px}
.ghost{display:block;text-align:center;padding:13px 22px;border-radius:12px;border:2px solid #262a3b;color:#262a3b;text-decoration:none;font-weight:800;font-size:16px}
.inline{display:inline-block}
.hero{background:#fde8dc;padding:72px 0 150px;text-align:center}
.hero h1{max-width:900px;margin-left:auto;margin-right:auto}
.hero p{max-width:640px;margin:0 auto;font-size:18px}
.plans-band{padding:0 0 72px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:-104px;align-items:start}
.plan{padding:32px 30px;border-radius:18px;background:#fffdf8;border:2px solid #fde8dc;display:flex;flex-direction:column}
.plan.main{border:2px solid #c93e64}
.badge{align-self:flex-start;font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fffdf8;background:#22709e;border-radius:999px;padding:5px 12px;margin:0 0 14px}
.who{font-size:16px;margin:0 0 18px}
.price{font-family:'Fraunces',Georgia,serif;font-size:46px;font-weight:700;line-height:1;color:#262a3b;margin:0 0 6px}
.per{font-size:15px;margin:0 0 22px}
.list{display:flex;flex-direction:column;gap:11px;margin:0 0 28px}
.list > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.55;color:#262a3b}
.tick{color:#22709e;font-size:16px;font-weight:800;line-height:1.55}
.dot{color:#c93e64;font-size:11px;line-height:2.2}
.peach{background:#fde8dc}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
.two h2{font-size:28px}
.guarantee{max-width:760px;margin:0 auto;padding:40px 44px;border-radius:18px;border:2px solid #22709e;text-align:center}
.g-icon{display:inline-block;color:#22709e;font-size:30px;line-height:1;margin:0 0 14px}
.guarantee h2{font-size:30px}
.guarantee p{margin:0}
.head{max-width:680px;margin:0 0 36px}
.faq{display:flex;flex-direction:column;gap:12px;max-width:820px}
details{border-radius:14px;padding:18px 22px;background:#fffdf8}
summary{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:700;color:#262a3b;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
.close{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.photo{width:100%;height:420px;object-fit:cover;border-radius:18px;display:block;background:#fde8dc}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.hero{padding:44px 0 120px}
h1{font-size:36px}
h2{font-size:27px}
.plans,.two,.close{grid-template-columns:minmax(0,1fr);gap:24px}
.plans{margin-top:-84px}
.plan{padding:28px 22px}
.guarantee{padding:30px 22px}
.photo{height:300px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<p class="eyebrow">Pricing</p>
<h1>One course, three ways to take it</h1>
<p>Pay once and keep access for good. No subscription and no upsells inside the course. Prices are in US dollars and include all lessons.</p>
</div>
</section>
<section class="plans-band">
<div class="wrap plans">
<div class="plan">
<h3>Self-paced</h3>
<p class="who">For independent learners who like to work through lessons alone.</p>
<p class="price">$149</p>
<p class="per">one payment</p>
<div class="list">
<div><span class="tick">✓</span><span>All 8 modules and 41 video lessons</span></div>
<div><span class="tick">✓</span><span>16 printable worksheets</span></div>
<div><span class="tick">✓</span><span>Student community and Thursday answers</span></div>
<div><span class="tick">✓</span><span>Lifetime access, including new lessons</span></div>
</div>
<a class="ghost" href="/checkout/self-paced/">Enroll self-paced</a>
</div>
<div class="plan main">
<p class="badge">Most chosen</p>
<h3>With feedback</h3>
<p class="who">For students who want to know what to fix, not just what to try next.</p>
<p class="price">$279</p>
<p class="per">one payment</p>
<div class="list">
<div><span class="tick">✓</span><span>Everything in Self-paced</span></div>
<div><span class="tick">✓</span><span>Personal video feedback on 4 assignment paintings</span></div>
<div><span class="tick">✓</span><span>Replies within 3 working days</span></div>
<div><span class="tick">✓</span><span>Feedback can be used within 12 months</span></div>
</div>
<a class="button" href="/checkout/feedback/">Enroll with feedback</a>
</div>
<div class="plan" id="coaching">
<h3>Coaching bundle</h3>
<p class="who">For students who want a plan built around their own goals.</p>
<p class="price">$489</p>
<p class="per">one payment</p>
<div class="list">
<div><span class="tick">✓</span><span>Everything in With feedback</span></div>
<div><span class="tick">✓</span><span>Three 45-minute 1:1 video calls with Ines</span></div>
<div><span class="tick">✓</span><span>A written four-week practice plan</span></div>
<div><span class="tick">✓</span><span>Calls booked any time within 6 months</span></div>
</div>
<a class="ghost" href="/checkout/coaching/">Enroll with coaching</a>
</div>
</div>
</section>
<section class="peach">
<div class="wrap two">
<div>
<p class="eyebrow">In every option</p>
<h2>What you get on day one</h2>
<div class="list">
<div><span class="tick">✓</span><span>Instant access to all eight modules, not a weekly drip</span></div>
<div><span class="tick">✓</span><span>Captions and downloadable worksheets for every lesson</span></div>
<div><span class="tick">✓</span><span>The free supply list and a shopping guide by budget</span></div>
<div><span class="tick">✓</span><span>A certificate of completion after the final project</span></div>
</div>
</div>
<div>
<p class="eyebrow">What you will need</p>
<h2>Supplies, about $60 in total</h2>
<div class="list">
<div><span class="dot">●</span><span>Three tubes: a warm yellow, a cool red and a blue</span></div>
<div><span class="dot">●</span><span>A pad of 140 lb (300 gsm) cotton watercolor paper</span></div>
<div><span class="dot">●</span><span>Two round brushes, sizes 8 and 12</span></div>
<div><span class="dot">●</span><span>A white plate, two water jars and paper towels</span></div>
</div>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="guarantee">
<span class="g-icon">↺</span>
<h2>14-day refund, no forms</h2>
<p>If the course is not right for you, reply to your receipt email within 14 days of purchase and you get a full refund, whichever option you chose. You do not need to fill in a form or explain why.</p>
</div>
</div>
</section>
<section class="peach" id="faq">
<div class="wrap">
<div class="head">
<p class="eyebrow">Questions</p>
<h2>Before you pay</h2>
</div>
<div class="faq">
<details><summary>Can I upgrade from Self-paced later?</summary><p>Yes. Email us and pay only the difference, at any point in the first 12 months.</p></details>
<details><summary>How does the feedback work?</summary><p>You upload a photo of your assignment painting and receive a 5 to 10 minute video from Ines within three working days, marked up on screen.</p></details>
<details><summary>When are the coaching calls?</summary><p>You book them through a calendar link at times that suit you, weekdays between 9 am and 6 pm Eastern, with some Saturday mornings.</p></details>
<details><summary>Can I pay in installments?</summary><p>The With feedback and Coaching bundle options can be paid in three monthly payments at checkout, at no extra cost.</p></details>
<details><summary>Is the course suitable for children?</summary><p>It is written for adults, but teenagers of about 14 and up follow it well. Younger children usually need an adult painting alongside them.</p></details>
<details><summary>Do you offer a group or classroom license?</summary><p>Yes, for art clubs, libraries and senior centers. Write to [email protected] with the number of learners and we will send a quote.</p></details>
</div>
</div>
</section>
<section>
<div class="wrap close">
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/course/student-at-laptop.jpg" width="1200" height="1200" alt="Woman painting at her kitchen table with a laptop open beside her watercolor paper">
<div>
<p class="eyebrow">Ready when you are</p>
<h2>Paint your first wash tonight</h2>
<p>Enroll, open module one and have your kit laid out in twenty minutes. If you are unsure which option fits, start Self-paced and upgrade later for the difference.</p>
<a class="button inline" href="/checkout/self-paced/">Enroll from $149</a>
</div>
</div>
</section>
</body>
</html>
