Website kits
Dental treatments page
Treatments page with general, cosmetic, orthodontic and emergency care, each with a guide price, a what-to-expect row and an FAQ accordion.
When to use it
The page a prospective patient opens to find out whether you do the thing they need and roughly what it costs. Treatments are grouped into four areas instead of a long list of procedures, because patients think in terms of “a check-up”, “whiter teeth”, “straighter teeth” or “it hurts”, not in clinical names. Each area shows a guide price with the word “from”, and the page states plainly that the real cost is confirmed after an exam; that sentence protects you as much as it informs the patient. The what-to-expect row explains how treatment is agreed, and the FAQ closes the questions that otherwise arrive by phone. Update the prices first and check them against what the front desk actually quotes. For dental sites in particular, keep the emergency guidance consistent with the appointment page, and never describe results as guaranteed: cosmetic and orthodontic outcomes vary from patient to patient.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- pending
Things worth knowing
- The four treatment cards each contain a heading, text and an included-services list, so they convert to Containers with a Heading, Text Editor widgets and an Icon List, rather than to Icon Boxes.
- The what-to-expect row converts to three Icon Box widgets, one per card, when the converter’s “match Elementor icon library” option is on.
- The six FAQ items are sibling details elements, so they become one Accordion widget with six items; edit the questions and answers in the Accordion panel after import.
- Guide prices are plain text inside each card, not Price Table widgets, so they import without Elementor Pro and are edited like any other text.
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>Dental treatments page</title>
<style>
body{margin:0;font-family:'Inter',Arial,sans-serif;color:#263538;background:#ffffff}
h1,h2,h3{font-family:'Manrope',Arial,sans-serif;color:#0e4f55;margin:0 0 12px;letter-spacing:-.02em}
h1{font-size:46px;line-height:1.1}
h2{font-size:32px;line-height:1.2}
h3{font-size:21px;line-height:1.3}
p{margin:0 0 14px;font-size:16px;line-height:1.75;color:#263538}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
section{padding:72px 0}
.tint{background:#f2f5f5}
.head{background:#d6efe8}
.head .wrap{max-width:820px;margin:0}
.head-in{max-width:1140px;margin:0 auto}
.lead{font-size:18px}
.note{margin-top:20px;padding:14px 18px;border-left:4px solid #0e4f55;background:#ffffff;font-size:15px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.treat{padding:30px 28px;border-radius:16px;background:#ffffff;border:1px solid #d6efe8;display:flex;flex-direction:column}
.treat > p{font-size:15.5px}
.incl{display:flex;flex-direction:column;gap:9px;margin:4px 0 20px}
.incl div{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.55}
.incl span:first-child{color:#0e4f55;font-weight:800}
.price{margin:auto 0 0;padding-top:16px;border-top:1px solid #d6efe8;font-family:'Manrope',Arial,sans-serif;font-size:17px;font-weight:800;color:#0e4f55}
.intro{max-width:680px;margin:0 0 32px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{padding:28px 24px;border-radius:16px;background:#ffffff;border:1px solid #d6efe8}
.card h3{font-size:19px}
.card p{font-size:15px;margin:0}
.icon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:18px;border-radius:12px;background:#0e4f55;color:#ffffff;font-size:20px;font-weight:700}
.faq{max-width:820px;display:flex;flex-direction:column;gap:12px}
details{border:1px solid #d6efe8;border-radius:12px;background:#ffffff;padding:18px 22px}
summary{cursor:pointer;font-family:'Manrope',Arial,sans-serif;font-weight:700;font-size:17px;color:#0e4f55}
details p{margin:12px 0 0;font-size:15.5px}
.close{background:#0e4f55;text-align:center}
.close h2,.close p{color:#ffffff}
.close .intro{margin:0 auto 22px}
.button{display:inline-block;padding:14px 24px;border-radius:10px;border:2px solid #e07a52;background:#e07a52;color:#263538;text-decoration:none;font-weight:700;font-size:15px}
@media(max-width:780px){section{padding:50px 0}h1{font-size:33px}h2{font-size:26px}.grid2,.grid3{grid-template-columns:1fr}.treat{padding:24px 20px}.lead{font-size:17px}}
</style>
</head>
<body>
<section class="head">
<div class="wrap head-in">
<h1>Treatments and guide prices</h1>
<p class="lead">Everything we offer falls into four areas. Each one starts the same way: an exam, a conversation about what you want, and a written plan before any work begins.</p>
<p class="note">Prices are guides for patients paying directly. The treatment you need, and its exact cost, can only be confirmed after your dentist has examined you.</p>
</div>
</section>
<section>
<div class="wrap grid2">
<article class="treat">
<h3>General dentistry</h3>
<p>Routine care for children and adults. Your dentist suggests how often to come back based on your exam, rather than a fixed schedule for everyone.</p>
<div class="incl">
<div><span>✓</span><span>Exams, X-rays and hygienist cleanings</span></div>
<div><span>✓</span><span>Tooth-colored fillings</span></div>
<div><span>✓</span><span>Root canal treatment and extractions</span></div>
</div>
<p class="price">Exam, X-rays and cleaning from $185</p>
</article>
<article class="treat">
<h3>Cosmetic dentistry</h3>
<p>Changes to the color or shape of your teeth. We start with a consultation and photos so you can see the options side by side before deciding anything.</p>
<div class="incl">
<div><span>✓</span><span>In-office and take-home whitening</span></div>
<div><span>✓</span><span>Composite bonding for chips and gaps</span></div>
<div><span>✓</span><span>Porcelain veneers</span></div>
</div>
<p class="price">Whitening from $350</p>
</article>
<article class="treat">
<h3>Orthodontics</h3>
<p>Clear aligners and fixed braces for teens and adults. The first consultation covers whether aligners suit your bite and how long treatment is likely to take.</p>
<div class="incl">
<div><span>✓</span><span>Clear aligners</span></div>
<div><span>✓</span><span>Fixed braces</span></div>
<div><span>✓</span><span>Retainers after treatment</span></div>
</div>
<p class="price">Clear aligners from $3,400</p>
</article>
<article class="treat">
<h3>Emergency care</h3>
<p>Toothache, a broken or knocked-out tooth, a lost filling or crown, or swelling. Call as early in the day as you can; we keep time free each day for urgent visits.</p>
<div class="incl">
<div><span>✓</span><span>Same-day appointments when available</span></div>
<div><span>✓</span><span>Pain relief and temporary repairs</span></div>
<div><span>✓</span><span>A follow-up plan for a permanent repair</span></div>
</div>
<p class="price">Emergency exam and X-ray from $120</p>
</article>
</div>
</section>
<section class="tint">
<div class="wrap">
<div class="intro">
<h2>What to expect</h2>
<p>The same three things happen whichever treatment you come in for.</p>
</div>
<div class="grid3">
<article class="card"><span class="icon">◎</span><h3>An exam comes first</h3><p>We do not quote for treatment over the phone. Your dentist looks first, then explains what they found.</p></article>
<article class="card"><span class="icon">✓</span><h3>A written plan and cost</h3><p>You take home the options, the number of visits and the cost, and decide in your own time.</p></article>
<article class="card"><span class="icon">↻</span><h3>Follow-up you can see</h3><p>After treatment we book any review visit before you leave and send a reminder before it.</p></article>
</div>
</div>
</section>
<section>
<div class="wrap">
<div class="intro">
<h2>Questions patients ask</h2>
</div>
<div class="faq">
<details><summary>Do you see children?</summary><p>Yes. We see children from their first tooth, and we can book family members back to back so one trip covers everyone.</p></details>
<details><summary>How long does a check-up take?</summary><p>A first visit takes about an hour, including X-rays if they are needed. Routine check-ups after that are usually around 45 minutes.</p></details>
<details><summary>I get nervous at the dentist. What can you do?</summary><p>Tell us when you book. We can give you a longer slot, explain each step before we do it, and agree a signal for when you want to stop.</p></details>
<details><summary>Do I need a referral?</summary><p>No. You can book any treatment on this page directly. If you need a specialist we do not have in house, we will refer you.</p></details>
<details><summary>Can I get a cost estimate before treatment?</summary><p>Yes. Every plan includes a written estimate. If you have insurance, we can also request a pre-treatment estimate from your plan.</p></details>
<details><summary>What counts as a dental emergency?</summary><p>Severe toothache, a knocked-out or broken tooth, or swelling in the mouth. Facial swelling with fever, or any trouble breathing or swallowing, needs 911 or the nearest emergency room.</p></details>
</div>
</div>
</section>
<section class="close">
<div class="wrap">
<div class="intro">
<h2>Not sure which treatment you need?</h2>
<p>Book a check-up. It is the right starting point for almost every question on this page.</p>
</div>
<a class="button" href="#appointment">Book a check-up</a>
</div>
</section>
</body>
</html>