Wedding photographer one-page site
The whole site on one page: hero photo, six-photo gallery, about, wedding-day timeline, three priced packages, kind words, FAQ and an availability form.
The top of the template as it renders in a browser. Images become placeholders when you import it.
When to use it
The whole website of a solo wedding and portrait photographer, in the order a couple makes up their mind. The hero states the style in one sentence above a full-width photo, because the first photo does more persuading than any headline. The gallery follows straight away with six frames from different parts of the day. About comes third — couples are hiring a person who will be in the room for eight hours — then the wedding-day timeline, which answers the quiet worry about how much of the day will go on posing. Packages with real prices come next, then kind words, the FAQ and finally the date-check form, which asks for date, venue and guest count so you can reply with an exact quote. Replace the six gallery photos first, mixing light, people and details from different weddings rather than six frames of one couple. Publish your starting prices: couples who see them and still write are already a fit for your budget.
What it converts to
Converted with the Native components mode. The component list below is what this template produces — not a generic example.
- Container × 32
- Container (grid, 3 columns) × 3
- Container (grid) × 3
- HTML widget × 1 — the block’s scoped CSS; keep it, the layout depends on it
- Text Editor × 38
- Heading × 17
- Button × 5
- Image × 8
- Icon List × 5
- Testimonial × 3
- Accordion × 1
- Form × 1
Things worth knowing
- Each section’s id is kept as the container’s CSS ID but prefixed with a code unique to the conversion (for example hte-1a2b3c4d-work), and the in-page button links are rewritten to match. After import, set Advanced → CSS ID of the four section containers to work, about, packages and contact, then change the links of the two hero buttons and the three package buttons to #packages or #contact, so the header and footer links reach them too.
- The portfolio grid has six photos and no captions, so in this library conversion it becomes six Image widgets in a three-column grid Container (two columns below 780px) with empty image slots to fill from the Media Library. Converting the HTML yourself with “Keep original HTML images” turns the same grid into one Image Gallery widget with three columns instead.
- The about facts, the three “included” lists and the contact details convert to five Icon List widgets with circle and check icons; the three couples’ quotes become Testimonial widgets and the six questions one Accordion widget.
- The availability form becomes an Elementor Pro Form with seven fields — names, email, wedding date, a guest-count select, venue, a package select and a message — with labels and options kept. It needs Elementor Pro, and the original action is removed, so set Actions After Submit, such as Email, after import.
- Each timeline step is a small Container with a Text Editor for the time and a Heading for the moment, so duplicating a step adds one. All two- and three-column rows stack below 780px, with the photographer portrait above the about 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>Hattie Calloway — wedding and portrait photographer</title>
<style>
body{margin:0;font-family:'Work Sans',Helvetica,Arial,sans-serif;color:#2e2a33;background:#fcf9f7}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:112px 0}
h1,h2,h3{font-family:'Cormorant Garamond',Georgia,serif;color:#2e2a33;font-weight:500}
h1{font-size:68px;line-height:1.04;letter-spacing:-.01em;margin:0 0 22px}
h2{font-size:46px;line-height:1.1;margin:0 0 18px}
h3{font-size:27px;line-height:1.2;margin:0 0 8px}
p{font-size:16px;line-height:1.85;color:#6f6870;margin:0 0 18px}
.eyebrow{font-size:12px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#8e5559;margin:0 0 18px}
.button{display:inline-block;padding:15px 30px;background:#8e5559;color:#fcf9f7;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border-radius:3px}
.ghost{display:inline-block;padding:14px 29px;border:1px solid #2e2a33;color:#2e2a33;text-decoration:none;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;border-radius:3px}
.actions{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}
.head{max-width:620px;margin:0 auto 56px;text-align:center}
.linen{background:#f3ece8}
.hero{padding:96px 0 0;text-align:center}
.hero .lead{max-width:600px;margin:0 auto 34px;font-size:18px}
.hero-img{display:block;width:100%;height:640px;object-fit:cover;margin:80px 0 0;background:#e6d3cd}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.gallery img{display:block;width:100%;height:440px;object-fit:cover;background:#e6d3cd}
.work-note{text-align:center;margin:44px 0 0;font-size:15px}
.about{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:88px;align-items:center}
.portrait{display:block;width:100%;height:600px;object-fit:cover;background:#e6d3cd}
.facts{display:flex;flex-direction:column;gap:12px;margin:10px 0 0;padding:24px 0 0;border-top:1px solid #e6d3cd}
.facts > div{display:flex;gap:14px;align-items:center;font-size:15px;color:#2e2a33}
.mark{color:#8e5559;font-size:11px}
.day{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:88px;align-items:start}
.steps{display:flex;flex-direction:column;border-left:1px solid #e6d3cd}
.step{position:relative;padding:0 0 34px 34px}
.step::before{content:"";position:absolute;left:-5px;top:5px;width:9px;height:9px;border-radius:50%;background:#8e5559}
.step .time{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8e5559;margin:0 0 6px}
.step p{margin:0}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.tier{display:flex;flex-direction:column;padding:44px 36px;background:#fcf9f7;border:1px solid #e6d3cd}
.tier .price{font-family:'Cormorant Garamond',Georgia,serif;font-size:40px;line-height:1.1;color:#2e2a33;margin:6px 0 10px}
.tier .sum{font-size:15px;margin:0 0 24px}
.incl{display:flex;flex-direction:column;gap:11px;margin:0 0 32px;padding:24px 0 0;border-top:1px solid #e6d3cd;flex-grow:1}
.incl > div{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.55;color:#2e2a33}
.tick{color:#8e5559;font-size:14px;line-height:1.55}
.tier .button,.tier .ghost{text-align:center}
.featured{background:#2e2a33;border-color:#2e2a33}
.featured h3,.featured .price{color:#fcf9f7}
.featured .sum{color:#e6d3cd}
.featured .eyebrow{color:#e6d3cd}
.featured .incl{border-top-color:#6f6870}
.featured .incl > div{color:#fcf9f7}
.featured .tick{color:#e6d3cd}
.tier-note{text-align:center;max-width:720px;margin:40px auto 0;font-size:15px}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
.quote{margin:0;text-align:center}
.quote blockquote{margin:0 0 22px;font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;line-height:1.5;font-style:italic;color:#2e2a33}
.quote cite{font-style:normal}
.quote figcaption{font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#8e5559}
.faq{display:flex;flex-direction:column;max-width:780px;margin:0 auto;border-top:1px solid #e6d3cd}
details{border-bottom:1px solid #e6d3cd;padding:24px 4px}
summary{font-family:'Cormorant Garamond',Georgia,serif;font-size:23px;color:#2e2a33;cursor:pointer}
details p{margin:12px 0 0;font-size:16px}
.contact{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start}
.reply{display:flex;flex-direction:column;gap:12px;margin:8px 0 28px}
.reply > div{display:flex;gap:14px;align-items:center;font-size:15px;color:#2e2a33}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 22px;padding:44px;background:#fcf9f7;border:1px solid #e6d3cd}
.field{display:flex;flex-direction:column;gap:8px}
.full{grid-column:1 / -1}
label{font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#2e2a33}
input,select,textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid #e6d3cd;border-radius:0;background:#f3ece8;color:#2e2a33}
textarea{min-height:120px;resize:vertical}
.submit{grid-column:1 / -1;justify-self:start;padding:16px 32px;border:0;border-radius:3px;background:#8e5559;color:#fcf9f7;font:inherit;font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
@media(max-width:780px){
section{padding:72px 0}
.wrap{padding:0 16px}
.hero{padding:56px 0 0}
.hero .lead{font-size:17px}
h1{font-size:42px}
h2{font-size:34px}
h3{font-size:24px}
.head{margin:0 auto 36px}
.hero-img{height:360px;margin:48px 0 0}
.gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gallery img{height:240px}
.about,.day,.tiers,.quotes,.contact{grid-template-columns:minmax(0,1fr);gap:40px}
.portrait{height:440px}
.step{padding:0 0 28px 24px}
.tier{padding:34px 24px}
form{grid-template-columns:minmax(0,1fr);padding:28px 18px}
}
</style>
</head>
<body>
<section class="hero">
<div class="wrap">
<p class="eyebrow">Wedding and portrait photographer · Alder Bay and the coast</p>
<h1>Honest photographs of the day as it felt</h1>
<p class="lead">I photograph around twenty-five weddings a year, mostly quiet, unhurried ones. Very little posing, plenty of time for the people you invited, and a gallery you will want to open again in ten years.</p>
<div class="actions">
<a class="button" href="#contact">Check your date</a>
<a class="ghost" href="#packages">See packages</a>
</div>
</div>
<img class="hero-img" src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/hero-couple.jpg" width="1600" height="900" alt="Bride and groom walking hand in hand through tall grass by the sea in soft evening light">
</section>
<section id="work">
<div class="wrap">
<div class="head">
<p class="eyebrow">Recent work</p>
<h2>A few frames from this year</h2>
<p>Barn weddings, harbor-side ceremonies and a handful of courthouse elopements. Each one is delivered as a full gallery, not a highlights reel.</p>
</div>
<div class="gallery">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/ceremony.jpg" width="1000" height="1250" alt="Couple exchanging vows under a simple wooden arch in an orchard">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/rings-details.jpg" width="1000" height="1250" alt="Two wedding rings resting on a linen invitation beside a small bouquet of white flowers">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/first-look.jpg" width="1000" height="1250" alt="Groom turning to see his bride for the first time in a sunlit stone courtyard">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/family-laughing.jpg" width="1000" height="1250" alt="Grandmother laughing with the bride while guests gather on a lawn">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/first-dance.jpg" width="1000" height="1250" alt="Couple sharing a first dance under string lights in a timber barn">
<img src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/portrait-session.jpg" width="1000" height="1250" alt="Engaged couple sitting close together on dunes during a relaxed portrait session">
</div>
<p class="work-note">Full galleries from three recent weddings are available on request — just ask when you get in touch.</p>
</div>
</section>
<section class="linen" id="about">
<div class="wrap about">
<img class="portrait" src="https://htmltoelementor.com/wp-content/uploads/hte-library/photographer/photographer-portrait.jpg" width="1000" height="1250" alt="Photographer holding a film camera and smiling, standing by a window in a bright studio">
<div>
<p class="eyebrow">About me</p>
<h2>Hi, I’m Hattie</h2>
<p>I have photographed weddings along this coast for nine years, after a long apprenticeship assisting a newspaper photographer. That is still how I work: I watch, I wait, and I step in only when a moment needs a little help.</p>
<p>Most of my couples are planning something small and personal — a farm, a family garden, a harbor town hall. I keep my calendar short on purpose, so that every couple gets the same attention from the first call to the last photo in the gallery.</p>
<div class="facts">
<div><span class="mark">●</span><span>Based in Alder Bay, travel within 150 miles included</span></div>
<div><span class="mark">●</span><span>Around 25 weddings and 40 portrait sessions a year</span></div>
<div><span class="mark">●</span><span>A trusted second photographer on every full day</span></div>
</div>
</div>
</div>
</section>
<section>
<div class="wrap day">
<div>
<p class="eyebrow">How a wedding day works</p>
<h2>A calm plan, written together</h2>
<p>About six weeks before the wedding we sit down, in person or on a call, and build a photo timeline around your day — not the other way round. These are the usual moments for an afternoon ceremony.</p>
</div>
<div class="steps">
<div class="step">
<p class="time">1:30 pm</p>
<h3>Getting ready</h3>
<p>Details first — the dress, the rings, the letters — then candid photos while hair, makeup and nerves settle.</p>
</div>
<div class="step">
<p class="time">3:00 pm</p>
<h3>First look, if you want one</h3>
<p>Ten quiet minutes for the two of you, away from guests. It frees up the evening for the party.</p>
</div>
<div class="step">
<p class="time">4:00 pm</p>
<h3>Ceremony</h3>
<p>I stay at the edges, without flash, and follow your officiant’s rules about where I can stand.</p>
</div>
<div class="step">
<p class="time">4:45 pm</p>
<h3>Family photos</h3>
<p>A short list you write in advance, called out by a relative who knows everyone. Usually done in twenty minutes.</p>
</div>
<div class="step">
<p class="time">Golden hour</p>
<h3>Portraits of the two of you</h3>
<p>Fifteen to twenty minutes in the best light of the day, timed around sunset at your venue.</p>
</div>
<div class="step">
<p class="time">Evening</p>
<h3>Speeches, first dance and the party</h3>
<p>I stay until the end of your coverage, then your sneak peek arrives within a week.</p>
</div>
</div>
</div>
</section>
<section class="linen" id="packages">
<div class="wrap">
<div class="head">
<p class="eyebrow">Packages</p>
<h2>Three ways to book</h2>
<p>Every package includes a planning call, an online gallery with print rights, and edited photographs delivered within six weeks.</p>
</div>
<div class="tiers">
<div class="tier">
<p class="eyebrow">Elopement</p>
<h3>Small and simple</h3>
<p class="price">$1,900</p>
<p class="sum">For courthouse ceremonies and weddings of up to 30 guests.</p>
<div class="incl">
<div><span class="tick">✓</span><span>Up to 3 hours of coverage</span></div>
<div><span class="tick">✓</span><span>Ceremony, family and couple portraits</span></div>
<div><span class="tick">✓</span><span>Around 250 edited photographs</span></div>
<div><span class="tick">✓</span><span>Online gallery for 2 years</span></div>
</div>
<a class="ghost" href="#contact">Ask about this</a>
</div>
<div class="tier featured">
<p class="eyebrow">Most couples choose</p>
<h3>The full day</h3>
<p class="price">$3,800</p>
<p class="sum">From getting ready to the first hour of dancing.</p>
<div class="incl">
<div><span class="tick">✓</span><span>Up to 8 hours of coverage</span></div>
<div><span class="tick">✓</span><span>Second photographer all day</span></div>
<div><span class="tick">✓</span><span>Around 700 edited photographs</span></div>
<div><span class="tick">✓</span><span>Sneak peek within one week</span></div>
<div><span class="tick">✓</span><span>Online gallery for 5 years</span></div>
</div>
<a class="button" href="#contact">Check your date</a>
</div>
<div class="tier">
<p class="eyebrow">Full day and album</p>
<h3>The keepsake</h3>
<p class="price">$5,200</p>
<p class="sum">Everything in the full day, plus a session before and an album after.</p>
<div class="incl">
<div><span class="tick">✓</span><span>Up to 10 hours of coverage</span></div>
<div><span class="tick">✓</span><span>Engagement portrait session</span></div>
<div><span class="tick">✓</span><span>Linen-bound 30-page album</span></div>
<div><span class="tick">✓</span><span>Online gallery for 10 years</span></div>
</div>
<a class="ghost" href="#contact">Ask about this</a>
</div>
</div>
<p class="tier-note">A 30% retainer and a signed contract hold your date; the rest is due two weeks before the wedding. Travel beyond 150 miles of Alder Bay is quoted at cost.</p>
</div>
</section>
<section>
<div class="wrap">
<div class="head">
<p class="eyebrow">Kind words</p>
<h2>From couples I’ve photographed</h2>
</div>
<div class="quotes">
<figure class="quote">
<blockquote>“We barely noticed Hattie during the ceremony, and then the gallery had my dad wiping his eyes in every other frame. I have no idea how she was everywhere.”</blockquote>
<figcaption><cite>Leah and Sam</cite> — orchard wedding, June</figcaption>
</figure>
<figure class="quote">
<blockquote>“The planning call was the most useful hour of our whole engagement. She told us where the light would be at our venue at six o’clock and she was right.”</blockquote>
<figcaption><cite>Priya and Tom</cite> — harbor town hall, September</figcaption>
</figure>
<figure class="quote">
<blockquote>“We eloped with twelve guests and still got a gallery that tells the whole story, down to the rain on the courthouse steps.”</blockquote>
<figcaption><cite>Jo and Marcus</cite> — courthouse elopement, March</figcaption>
</figure>
</div>
</div>
</section>
<section class="linen">
<div class="wrap">
<div class="head">
<p class="eyebrow">Questions</p>
<h2>Before you get in touch</h2>
</div>
<div class="faq">
<details><summary>How far ahead should we book?</summary><p>Saturdays from May to October usually go nine to fourteen months ahead. Weekdays, winter dates and elopements can often be booked with a few weeks’ notice.</p></details>
<details><summary>Do you travel outside the area?</summary><p>Yes. Travel within 150 miles of Alder Bay is included in every package. Further afield I charge travel and one night’s accommodation at cost, with no extra fee on top.</p></details>
<details><summary>When will we get our photographs?</summary><p>A sneak peek of around 40 photos arrives within a week, and the full edited gallery within six weeks of the wedding, often sooner outside the summer months.</p></details>
<details><summary>Can we print the photographs ourselves?</summary><p>Yes. Every gallery comes with a personal print release, so you can order prints anywhere and share the photos freely with family and friends.</p></details>
<details><summary>What happens if it rains?</summary><p>We plan an indoor or covered option during the planning call. Some of my favorite portraits were taken under umbrellas or in a barn doorway.</p></details>
<details><summary>Do you photograph portraits outside of weddings?</summary><p>Yes — engagement, family and anniversary sessions of about an hour, from $450, most often at the beach or in your own home.</p></details>
</div>
</div>
</section>
<section id="contact">
<div class="wrap contact">
<div>
<p class="eyebrow">Availability</p>
<h2>Check your date</h2>
<p>Tell me when and where, and I will reply with my availability and a full price guide. If your date is open, we will set up a short call to see if we are a good fit.</p>
<div class="reply">
<div><span class="mark">●</span><span>Replies within two working days</span></div>
<div><span class="mark">●</span><span>[email protected]</span></div>
<div><span class="mark">●</span><span>(555) 018-4420, weekdays 10 am to 4 pm</span></div>
</div>
</div>
<form action="#" method="post">
<div class="field"><label for="c-names">Your names</label><input id="c-names" name="names" type="text" autocomplete="name" required></div>
<div class="field"><label for="c-email">Email</label><input id="c-email" name="email" type="email" autocomplete="email" required></div>
<div class="field"><label for="c-date">Wedding date</label><input id="c-date" name="date" type="date" required></div>
<div class="field"><label for="c-guests">Guest count</label><select id="c-guests" name="guests"><option>Just us, under 10</option><option>10 to 30</option><option selected>30 to 80</option><option>80 to 150</option><option>More than 150</option></select></div>
<div class="field full"><label for="c-venue">Venue or town</label><input id="c-venue" name="venue" type="text"></div>
<div class="field full"><label for="c-package">Package you are interested in</label><select id="c-package" name="package"><option>Not sure yet</option><option>Elopement</option><option>The full day</option><option>The keepsake</option><option>Portrait session</option></select></div>
<div class="field full"><label for="c-notes">Tell me a little about your plans</label><textarea id="c-notes" name="notes"></textarea></div>
<button class="submit" type="submit">Check my date</button>
</form>
</div>
</section>
</body>
</html>