Website kits
Online course instructor about page
Instructor about page with a portrait intro, personal story, modest background list, three teaching principles and a 1:1 coaching offer with price.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The page people open when they are nearly convinced and want to know who is teaching. It begins with a personal hook — when and why the instructor started — beside a portrait, because buyers of a solo course are choosing the teacher as much as the lessons. The story section explains where the course came from and why the lessons run in that order. The background list states experience plainly and says what the instructor does not claim; modest, checkable facts reassure more than titles do. Three teaching principles set expectations for the style of the videos, and the dark coaching section sells the second product: what a 1:1 session includes, what it costs and how to book it. Replace the story with your own, written in the first person, and list only credentials you could show if asked. A tip for coaches: say what the client sends before the call, so every session starts with real work on the table.
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, 3 columns) × 1
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 13
- Heading × 5
- Image × 3
- Icon List × 2
- Icon Box × 3
- Button × 1
Things worth knowing
- The background list and the coaching inclusions become two Icon List widgets (circle and check icons) when the Icons option matches the Elementor icon library.
- The three teaching principles each hold one glyph, one heading and one paragraph, so they convert to Icon Box widgets with circle, bullseye and undo icons.
- The portrait, the painting close-up and the coaching photo become three Image widgets with empty slots; select your own photos from the Media Library after import.
- Email to book a session is a Button widget with a mailto: link; replace it with your scheduling page link if you use one. Below 780px each photo-and-text row stacks in source order, with the intro text above the portrait.
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>About Ines Marlow — watercolor teacher</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:36px;line-height:1.18;margin:0 0 14px}
h3{font-size:21px;line-height:1.3;margin:0 0 8px}
p{font-size:17px;line-height:1.75;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:inline-block;padding:15px 28px;border-radius:12px;background:#c93e64;color:#fffdf8;text-decoration:none;font-weight:800;font-size:16px}
.head{max-width:680px;margin:0 0 40px}
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.split.flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.intro{padding:64px 0 80px}
.photo{width:100%;height:520px;object-fit:cover;border-radius:18px;display:block;background:#fde8dc}
.photo.wide{height:420px}
.peach{background:#fde8dc}
.story{max-width:760px}
.creds{display:flex;flex-direction:column;gap:14px;margin:8px 0 0}
.creds > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#262a3b}
.dot{color:#c93e64;font-size:11px;line-height:2.3}
.ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.way{padding:28px;border-radius:18px;background:#fffdf8;border:2px solid #fde8dc}
.way-icon{display:inline-block;color:#c93e64;font-size:24px;line-height:1;margin:0 0 14px}
.way p{font-size:16px;margin:0}
.ink{background:#262a3b}
.ink h2{color:#fffdf8}
.ink p{color:#fde8dc}
.ink .eyebrow{color:#fde8dc}
.offer{display:flex;flex-direction:column;gap:12px;margin:4px 0 24px}
.offer > div{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:#fffdf8}
.tick{color:#fde8dc;font-size:17px;font-weight:800;line-height:1.5}
.fee{font-family:'Fraunces',Georgia,serif;font-size:24px;font-weight:700;color:#fffdf8;margin:0 0 24px}
@media(max-width:780px){
section{padding:56px 0}
.wrap{padding:0 16px}
.intro{padding:36px 0 56px}
h1{font-size:35px}
h2{font-size:28px}
.split,.split.flip,.ways{grid-template-columns:minmax(0,1fr);gap:28px}
.photo{height:380px}
.photo.wide{height:260px}
.fee{font-size:21px}
}
</style>
</head>
<body>
<section class="intro">
<div class="wrap split">
<div>
<p class="eyebrow">About Ines</p>
<h1>I learned watercolor the slow way, so you do not have to</h1>
<p>I picked up a brush at 34, after a long stretch of working at a screen all day. For two years I bought the wrong paper, too many colors and every book I could find, and most of my paintings ended up grey.</p>
<p>What finally helped was a teacher who explained what the water was doing. That is the kind of teacher I try to be.</p>
</div>
<img class="photo" src="https://htmltoelementor.com/wp-content/uploads/hte-library/course/instructor-portrait.jpg" width="1000" height="1250" alt="Smiling woman with a paint-stained apron holding a round brush beside her painting table">
</div>
</section>
<section class="peach">
<div class="wrap">
<div class="story">
<p class="eyebrow">How the course came about</p>
<h2>From a Tuesday evening class to an online studio</h2>
<p>In 2014 the community arts center near my home needed someone to take over its beginner watercolor class. I said yes, and taught twelve adults every Tuesday evening for the next nine years.</p>
<p>Every term, the same five problems came up: muddy color, streaky washes, hard edges where people wanted soft ones, overworked paintings, and giving up a month after the class ended. I started writing worksheets for each one.</p>
<p>Those worksheets became Loose Watercolor Foundations. The order of the lessons is the order in which I saw students get unstuck.</p>
</div>
</div>
</section>
<section>
<div class="wrap split flip">
<img class="photo wide" src="https://htmltoelementor.com/wp-content/uploads/hte-library/course/hands-painting.jpg" width="1600" height="1000" alt="Close view of a hand laying a blue watercolor wash across taped paper with a round brush">
<div>
<p class="eyebrow">Background, briefly</p>
<h2>What I bring, and what I do not claim</h2>
<p>I am not a gallery painter and I do not sell originals for a living. I am a careful teacher with a lot of practice explaining one medium.</p>
<div class="creds">
<div><span class="dot">●</span><span>Painting watercolor since 2009 and teaching it since 2014</span></div>
<div><span class="dot">●</span><span>Nine years teaching adult beginners at the Fernhill Community Arts Center</span></div>
<div><span class="dot">●</span><span>Trained as a graphic designer, which is where the color theory comes from</span></div>
<div><span class="dot">●</span><span>Paintings shown in two regional open exhibitions</span></div>
</div>
</div>
</div>
</section>
<section class="peach">
<div class="wrap">
<div class="head">
<p class="eyebrow">How I teach</p>
<h2>Three rules behind every lesson</h2>
</div>
<div class="ways">
<div class="way"><span class="way-icon">●</span><h3>One skill, one painting</h3><p>Every module ends with a small painting that uses only what you just learned, so you see progress each week.</p></div>
<div class="way"><span class="way-icon">◎</span><h3>Three tubes, not thirty</h3><p>A short palette teaches you more about mixing than a full set, and it costs far less to start.</p></div>
<div class="way"><span class="way-icon">↺</span><h3>Mistakes stay in</h3><p>I leave my own blooms and stripes in the videos and show how I fix them, because you will make them too.</p></div>
</div>
</div>
</section>
<section class="ink" id="coaching">
<div class="wrap split flip">
<img class="photo wide" src="https://htmltoelementor.com/wp-content/uploads/hte-library/course/coaching-call.jpg" width="1200" height="1200" alt="Watercolor teacher at her desk holding up a student painting toward a laptop during a video call">
<div>
<p class="eyebrow">1:1 coaching</p>
<h2>Forty-five minutes on your own paintings</h2>
<p>For anyone who wants a second pair of eyes, enrolled in the course or not. You send photos of up to three paintings beforehand, and we go through them together on a video call. Course students get three calls at a lower price in the Coaching bundle.</p>
<div class="offer">
<div><span class="tick">✓</span><span>A plain-language review of what is working and what to change</span></div>
<div><span class="tick">✓</span><span>A live demonstration of the one technique you most need</span></div>
<div><span class="tick">✓</span><span>A written practice plan for the next four weeks</span></div>
<div><span class="tick">✓</span><span>A recording of the call to watch again</span></div>
</div>
<p class="fee">$95 per session · three sessions for $255</p>
<a class="button" href="mailto:[email protected]?subject=Coaching%20session">Email to book a session</a>
</div>
</div>
</section>
</body>
</html>
