Website kits
Fitness studio classes and timetable page
Class descriptions with intensity labels, a seven-day class timetable, a what-to-bring checklist and a class questions accordion.
When to use it
This is the page regular visitors bookmark, so it is built around the timetable rather than around marketing. It opens by explaining that the intensity label describes how a class feels, not who may join, because beginners often rule themselves out. Each class then gets a photo, an intensity and length tag, and a description of what actually happens in the session. The weekly timetable follows as a real table that scrolls sideways inside its own box on a phone. What to bring and the class questions come last, since they matter most the night before a first visit. Replace the class names and times first and make sure they match your booking app exactly; a timetable that disagrees with the app costs more trust than having none. A tip for studios: state the holiday timetable rule under the table so the page does not need editing every December.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 19
- Container (grid) × 6
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 15
- Heading × 9
- Button × 1
- Image × 4
- Icon List × 1
- Accordion × 1
Things worth knowing
- The timetable stays one real table inside a single Text Editor widget, wrapped in a box that scrolls sideways (Elementor has no table widget). Edit it in the Text Editor’s Text tab to keep the columns aligned.
- Each class card converts to a Container holding an Image, a Heading and two Text Editors (the intensity tag and the description). It is not an Image Box because the card has two paragraphs.
- The what-to-bring rows become one Icon List, and the five question-and-answer pairs become one Accordion widget.
- Below 780px the class grid stacks to one column and each card puts its photo above the 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>Fitness studio classes 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:76px 0}
h1,h2,h3{font-family:'Oswald','Arial Narrow',Arial,sans-serif;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:60px;line-height:1.04;margin:0 0 18px;color:#ffffff}
h2{font-size:40px;line-height:1.1;margin:0 0 16px}
h3{font-size:24px;line-height:1.2;margin:0 0 6px}
p{font-size:16px;line-height:1.75;color:#5d6670;margin:0 0 16px}
.intro{background:#111315;padding:64px 0}
.intro p{color:#e8ebef;font-size:18px;max-width:700px}
.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 14px}
.head{max-width:700px;margin:0 0 34px}
.list{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.class{display:grid;grid-template-columns:200px minmax(0,1fr);gap:22px;align-items:start;padding:20px;border:1px solid #e8ebef;border-radius:6px;background:#ffffff}
.class img{width:200px;height:200px;object-fit:cover;border-radius:4px;display:block;background:#e8ebef}
.level{display:inline-block;margin:0 0 12px;padding:4px 10px;border-radius:4px;background:#c8f135;color:#111315;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.class p{font-size:15px;margin:0 0 10px}
.tint{background:#e8ebef}
.scroll{overflow-x:auto;background:#ffffff;border-radius:6px}
table{width:100%;min-width:760px;border-collapse:collapse;font-size:14.5px}
th,td{padding:14px 12px;border:1px solid #e8ebef;text-align:left;vertical-align:top;color:#24282d}
th{background:#111315;color:#ffffff;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
td:first-child{font-weight:700;color:#111315;white-space:nowrap}
.small{font-size:14px;margin:16px 0 0}
.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.checks{display:flex;flex-direction:column;gap:14px}
.checks > div{display:flex;align-items:flex-start;gap:14px;font-size:16.5px;line-height:1.6;color:#111315}
.tick{color:#111315;background:#c8f135;font-size:14px;line-height:1;padding:6px 7px;border-radius:4px}
.faq{display:flex;flex-direction:column;gap:12px}
details{border:1px solid #e8ebef;border-radius:6px;padding:18px 20px;background:#ffffff}
summary{font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-size:19px;text-transform:uppercase;letter-spacing:.02em;cursor:pointer;color:#111315}
details p{margin:12px 0 0;font-size:15.5px}
.button{display:inline-block;margin-top:8px;padding:15px 26px;border-radius:4px;background:#c8f135;color:#111315;text-decoration:none;font-family:'Oswald','Arial Narrow',Arial,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:780px){section{padding:54px 0}.wrap{padding:0 16px}.intro{padding:46px 0}h1{font-size:40px}h2{font-size:29px}.list,.split{grid-template-columns:minmax(0,1fr);gap:28px}.class{grid-template-columns:1fr;gap:14px;padding:16px}.class img{width:100%;height:220px}}
</style>
</head>
<body>
<section class="intro">
<div class="wrap">
<p class="eyebrow">Classes and timetable</p>
<h1>What each class is, and when it runs</h1>
<p>Every class at Northline is 45 to 60 minutes, coached from start to finish, and open to beginners. The intensity label tells you how hard the session usually feels, not who is allowed in.</p>
<a class="button" href="#free-trial">Book a free trial class</a>
</div>
</section>
<section id="classes">
<div class="wrap">
<div class="head">
<h2>The classes</h2>
<p>Coaches give an easier and a harder version of every exercise, so you can join any class and work at your own level.</p>
</div>
<div class="list">
<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">
<div>
<h3>Strength</h3>
<p class="level">Intensity: moderate · 60 min</p>
<p>Squats, presses, pulls and hinges with barbells and dumbbells. The program runs in four-week blocks and you log your weights on a shared board, so each week starts from where the last one finished.</p>
</div>
</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">
<div>
<h3>Conditioning</h3>
<p class="level">Intensity: high · 45 min</p>
<p>Intervals on rowers, bikes and sleds, mixed with kettlebell work. You choose the pace inside each interval; the coach keeps time and checks positions when you are tired.</p>
</div>
</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">
<div>
<h3>Ride</h3>
<p class="level">Intensity: moderate to high · 45 min</p>
<p>Indoor cycling built on cadence and effort zones called out by the coach. Bikes are set up for you on your first visit, and cycling shoes are optional.</p>
</div>
</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">
<div>
<h3>Mobility</h3>
<p class="level">Intensity: low · 45 min</p>
<p>Slow, controlled work on hips, shoulders and the upper back, with time spent in each position. Mats, blocks and bands are provided.</p>
</div>
</div>
</div>
</div>
</section>
<section class="tint" id="timetable">
<div class="wrap">
<div class="head">
<h2>Weekly timetable</h2>
<p>The same timetable runs every week. Book a spot in the members’ app up to seven days ahead.</p>
</div>
<div class="scroll">
<table>
<tr><th>Time</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th></tr>
<tr><td>6:00 am</td><td>Strength</td><td>Conditioning</td><td>Strength</td><td>Conditioning</td><td>Strength</td><td>—</td><td>—</td></tr>
<tr><td>7:15 am</td><td>Ride</td><td>Strength</td><td>Ride</td><td>Strength</td><td>Ride</td><td>—</td><td>—</td></tr>
<tr><td>9:00 am</td><td>—</td><td>—</td><td>—</td><td>—</td><td>—</td><td>Strength</td><td>Mobility</td></tr>
<tr><td>10:15 am</td><td>Mobility</td><td>—</td><td>Mobility</td><td>—</td><td>Mobility</td><td>Conditioning</td><td>Ride</td></tr>
<tr><td>12:15 pm</td><td>Conditioning</td><td>Ride</td><td>Conditioning</td><td>Ride</td><td>Conditioning</td><td>—</td><td>—</td></tr>
<tr><td>5:30 pm</td><td>Strength</td><td>Conditioning</td><td>Strength</td><td>Conditioning</td><td>Strength</td><td>—</td><td>—</td></tr>
<tr><td>6:45 pm</td><td>Ride</td><td>Mobility</td><td>Ride</td><td>Mobility</td><td>—</td><td>—</td><td>—</td></tr>
</table>
</div>
<p class="small">Holiday weeks run a reduced timetable, posted in the app two weeks in advance.</p>
</div>
</section>
<section>
<div class="wrap split">
<div>
<h2>What to bring</h2>
<p>Arrive ten minutes early for your first class so a coach can show you around and set up any equipment.</p>
</div>
<div class="checks">
<div><span class="tick">✓</span><span>Clothes you can squat and stretch in</span></div>
<div><span class="tick">✓</span><span>Clean indoor trainers with flat soles for strength classes</span></div>
<div><span class="tick">✓</span><span>A refillable water bottle (there is a filtered tap by the front desk)</span></div>
<div><span class="tick">✓</span><span>A lock for the lockers, or borrow one at the desk</span></div>
<div><span class="tick">✓</span><span>Nothing else: towels, mats and all equipment are provided</span></div>
</div>
</div>
</section>
<section class="tint">
<div class="wrap">
<div class="head">
<h2>Class questions</h2>
</div>
<div class="faq">
<details><summary>I have never trained before. Which class should I start with?</summary><p>Strength or Mobility. Both move at a pace that leaves time for the coach to explain each exercise, and you will learn the positions used in every other class.</p></details>
<details><summary>How do I book a class?</summary><p>Members book in the app up to seven days ahead. For your free trial, use the form on the contact page and we will reserve a spot for you.</p></details>
<details><summary>What if a class is full?</summary><p>Join the waitlist in the app. If someone cancels, the first person on the list is booked automatically and gets a notification.</p></details>
<details><summary>Can I cancel a booking?</summary><p>Yes, up to two hours before the start time. Later cancellations and no-shows count as a used class on class packs and the two-a-week plan.</p></details>
<details><summary>I have an injury. Can I still train?</summary><p>Tell the coach before class. They will adjust or swap exercises, and if your doctor or physical therapist has given you limits, bring them along so the coach can work within them.</p></details>
</div>
</div>
</section>
</body>
</html>