Website kits
Fitness studio home page
Studio home page: photo hero with a free trial button, four class cards, a why-train-here checklist, coaches teaser, member quote and membership prompt.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The home page for a coached studio whose offer is classes rather than open gym floor. The hero says what kind of training happens here, names the town and offers the free trial, with a second button to the timetable, because the two questions on arrival are “can I try it?” and “does it fit my week?”. The four class cards come next so visitors see the options before reading about the studio. The checklist then answers why this studio and not a cheaper gym nearby, the coaches section puts real people in front of the room, and the member quote sits just before the membership prompt, where doubt is highest. Replace the hero photo first with a picture of your own room during a real class, not a stock shot. Keep the class-size and no-joining-fee lines only if they are true for your studio.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 13
- Container (grid) × 3
- Container (grid, 4 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 7
- Heading × 5
- Button × 5
- Image × 2
- Image Box × 4
- Icon List × 1
- Testimonial × 1
Things worth knowing
- Each of the four class cards is one image, one heading and one paragraph, so each converts to an Image Box widget; the 240px cover crop carries over as the image height.
- The five checklist rows become one Icon List with fa-check icons, so rows can be added or reordered in the panel.
- The member quote converts to a Testimonial widget: the bold name becomes the name field and “Member since 2023” becomes the job title.
- The hero and coaches photos become Image widgets. Upload your own photos to the Media Library and select them after import.
- The hero, the two-column sections and the card grid stack to one column below 780px, with the hero text above the photo.
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>Fitness studio home page</title>
<style>
body{margin:0;font-family:'Roboto',Arial,Helvetica,sans-serif;color:#111315;background:#ffffff}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
h1,h2,h3{font-family:'Oswald','Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:68px;line-height:1.02;margin:0 0 20px;color:#ffffff}
h2{font-size:42px;line-height:1.08;margin:0 0 16px}
h3{font-size:22px;line-height:1.2;margin:0 0 8px}
p{font-size:16px;line-height:1.75;color:#5d6670;margin:0 0 16px}
.eyebrow{font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:14px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#c8f135;margin:0 0 16px}
.button{display:inline-block;padding:16px 28px;border-radius:4px;text-decoration:none;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.volt{background:#c8f135;color:#111315}
.ghost{border:2px solid #e8ebef;color:#ffffff}
.outline{border:2px solid #111315;color:#111315}
.hero{background:#111315;padding:72px 0}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:48px;align-items:center}
.hero p{color:#e8ebef;font-size:18px}
.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.hero-img{width:100%;height:520px;object-fit:cover;border-radius:6px;display:block;background:#24282d}
.head{max-width:680px;margin:0 0 36px}
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.class{background:#e8ebef;border-radius:6px;padding:0 0 22px}
.class img{width:100%;height:240px;object-fit:cover;border-radius:6px 6px 0 0;display:block;margin:0 0 18px;background:#5d6670}
.class h3{padding:0 20px}
.class p{padding:0 20px;margin:0;font-size:15px}
.why{background:#e8ebef}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.checks{display:flex;flex-direction:column;gap:16px}
.checks > div{display:flex;align-items:flex-start;gap:14px;font-size:17px;line-height:1.6;color:#111315;background:#ffffff;padding:16px 18px;border-radius:6px}
.tick{color:#111315;background:#c8f135;font-size:15px;line-height:1;padding:6px 7px;border-radius:4px}
.coach-img{width:100%;height:420px;object-fit:cover;border-radius:6px;display:block;background:#e8ebef}
.quote{background:#24282d}
.quote figure{max-width:820px;margin:0 auto;text-align:center}
.quote blockquote{margin:0 0 22px;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:30px;line-height:1.35;color:#ffffff}
.quote figcaption{font-size:15px;letter-spacing:.08em;text-transform:uppercase;color:#c8f135}
.cta{background:#c8f135;text-align:center}
.cta h2{color:#111315}
.cta p{color:#24282d;max-width:620px;margin:0 auto 28px}
.cta .button{background:#111315;color:#ffffff}
@media(max-width:780px){section{padding:56px 0}.wrap{padding:0 16px}.hero{padding:48px 0}.hero .wrap,.split,.classes{grid-template-columns:minmax(0,1fr);gap:28px}h1{font-size:42px}h2{font-size:30px}.hero-img{height:300px;background:#24282d}.coach-img{height:280px;background:#e8ebef}.class img{height:200px}.quote blockquote{font-size:22px}}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<div>
<p class="eyebrow">Coached group training · Riverton</p>
<h1>Strong, steady training with a coach in the room</h1>
<p>Small group strength, conditioning, cycling and mobility classes at Northline Studio. Every session is planned and coached, and your first class is free.</p>
<div class="actions">
<a class="button volt" href="#free-trial">Book a free trial class</a>
<a class="button ghost" href="#timetable">See the timetable</a>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/hero-group-class.jpg" width="1600" height="1000" alt="Coach guiding a small group through a kettlebell class in a bright studio">
</div>
</section>
<section id="classes">
<div class="wrap">
<div class="head">
<h2>Four ways to train</h2>
<p>Pick one class type or mix them through the week. Each one runs at several times a day, and coaches scale every exercise to where you are today.</p>
</div>
<div class="classes">
<div class="class"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/class-strength.jpg" width="1200" height="1200" alt="Member lifting a barbell from a rack with a coach watching"><h3>Strength</h3><p>Barbell and dumbbell lifts in a planned weekly block, with weights logged so you know what to lift next time.</p></div>
<div class="class"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/class-conditioning.jpg" width="1200" height="1200" alt="Members working on rowing machines during a conditioning class"><h3>Conditioning</h3><p>Rowers, sleds and kettlebells in timed intervals. Hard work, short rests, and a clear plan on the board.</p></div>
<div class="class"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/class-ride.jpg" width="1200" height="1200" alt="Row of indoor bikes with riders in a dimly lit cycling room"><h3>Ride</h3><p>Forty-five minutes of indoor cycling built around cadence and effort levels, not choreography.</p></div>
<div class="class"><img src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/class-mobility.jpg" width="1200" height="1200" alt="Small group stretching on mats on a studio floor"><h3>Mobility</h3><p>A slower class for range of motion, positions and breathing. A good pairing with two strength days a week.</p></div>
</div>
</div>
</section>
<section class="why">
<div class="wrap split">
<div>
<h2>Why people train here</h2>
<p>Northline is a coached studio, not a room full of machines. These are the things members tell us made them stay.</p>
<a class="button outline" href="#membership">Compare memberships</a>
</div>
<div class="checks">
<div><span class="tick">✓</span><span>Classes are capped at 14 people, so the coach can watch every set</span></div>
<div><span class="tick">✓</span><span>Every exercise has an easier and a harder option, shown before you start</span></div>
<div><span class="tick">✓</span><span>Programming runs in four-week blocks, so sessions build on each other</span></div>
<div><span class="tick">✓</span><span>Showers, towels and lockers are included in every membership</span></div>
<div><span class="tick">✓</span><span>Month-to-month memberships with no joining fee</span></div>
</div>
</div>
</section>
<section>
<div class="wrap split">
<img class="coach-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/fitness/coaches-team.jpg" width="1600" height="900" alt="Three coaches in studio t-shirts talking beside a rack of dumbbells">
<div>
<p class="eyebrow">The coaching team</p>
<h2>Coaches who learn your name on day one</h2>
<p>Our six coaches each lead the same class types every week, so you see familiar faces and they remember what you lifted last Tuesday. Before your first class, a coach spends ten minutes with you on how you move and what you want from training.</p>
<a class="button outline" href="#coaches">Meet the coaches</a>
</div>
</div>
</section>
<section class="quote">
<div class="wrap">
<figure>
<blockquote>I had never touched a barbell. The coach started me with an empty bar, wrote my numbers on the board each week, and I always knew what to do next.</blockquote>
<figcaption><strong>Dana R.</strong> · Member since 2023</figcaption>
</figure>
</div>
</section>
<section class="cta" id="membership">
<div class="wrap">
<h2>Find the membership that fits your week</h2>
<p>Two classes a week, unlimited, or off-peak. All monthly plans include a free trial class first, and you can freeze or cancel without a fee.</p>
<a class="button" href="#membership-options">View membership options</a>
</div>
</section>
</body>
</html>
