Electrician Website Template
Demo brand: REDVERS ELECTRICAL · Electrical contractor · 20 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this electrician website template
A complete website for an electrician or small electrical contractor: a fixed-price job estimator that books the job, an EV running-cost calculator, six service pages with price lists, a published price page, safety guides with checklists, and a booking form the estimator fills in for the customer. Twenty built pages, all driven by content files.
It looks like a tidy, trustworthy trade firm. White pages with pale blue-grey blocks and one near-black band, real on-the-job photography of consumer units, sockets, rewires, EV chargers and solar roofs carrying the colour, and one electric-blue accent. Lexend for headings, Hind for everything else.
Every section answers what a homeowner or landlord asks before ringing an electrician: what will it cost, how long will it take, what certificate do I get, when can you start, and are you registered and insured. The estimator answers the first four in under a minute, and the fixed-price versus day-rate table answers why the price is worth it. Motion is one quiet reveal.
The 20 pages you get
- Home
/ - Full-bleed job photo with a "What do you need?" card of five job tiles, promises, services, the fixed-price estimator, the team band, how a job runs, the EV cost calculator, fixed price vs day rate, reviews, safety guides, tabbed FAQ and a booking band.
- Services
/services/ - Six service cards with from-prices, plus a line for the jobs not listed.
- Service pages
/services/…/ - Six services: consumer units, rewires, EV chargers, testing and EICRs, sockets and lighting, solar and batteries. Each has a from-price, time on site, certificate, what is included, a price list, a review and common questions.
- Prices
/prices/ - The estimator again, every service price list in one place, and the fixed price vs day rate comparison.
- About
/about/ - The firm, four working rules, who turns up (initials, no face photos), registration and insurance, and reviews.
- Safety guides
/guides/ - A list of guides for homeowners, landlords and EV drivers, each showing its checklist count. Add an .mdx file and it appears here.
- Guide pages
/guides/…/ - Four written guides (reading an EICR, when to replace a consumer unit, preparing for an EV charger, a landlord's year) each ending in a tickable checklist.
- FAQ
/faq/ - Questions in three tabs: Home, Business and EV.
- Contact and booking
/contact/ - Phone, emergency line, hours and a booking form that arrives pre-filled with the job, the estimate and the chosen options.
- Privacy and terms
/legal/…/ - Two starter legal pages on a shared layout.
- 404
/404 - Designed, with a way back to the services and the phone number.
What is in the build
- A fixed-price estimator for five jobs (consumer unit, rewire, EV charger, EICR, extra sockets) that returns price, time on site, certificate and the next free working day
- "Book this job" carries the job, price and chosen options into the contact form through the link
- An EV calculator: miles a year and home tariff give the yearly cost against petrol and the charger payback in months
- Every price, lead time and assumption in one data file, so changing a price changes the estimator, tiles and price pages together
- Services and safety guides as content files, with price lists, what is included, FAQ and checklists in the frontmatter
- Tables that stack per row on phones instead of scrolling sideways
- Real electrical-work photography with brand marks retouched out, listed in LICENSING.md
- All business details in one file, with clear placeholders for your registration scheme and company number
- Vitest and Playwright suites included
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- White ground with pale blue-grey blocks and one near-black band, Lexend headings over Hind text, real consumer-unit, rewire, EV and solar job photography, one electric-blue accent.
- The mechanic
- A fixed-price estimator for five common jobs gives price, time on site, certificate and next free day, then pre-fills the booking form; an EV calculator compares home charging with petrol. Motion is one quiet reveal.
- Loud channel
- Imagery
- Imagery. Hands-on electrical work, boards, sockets, chargers, roofs
- Type & palette
- Lexend · Hind
-
#ffffff#0f172a#2563eb
Who it is for
Built for electricians and small electrical contractors, EV charger installers and solar and battery fitters working in homes and small businesses. It suits a firm that wants to win work by publishing its prices and letting customers book a fixed-price job online, and it adapts easily to other fixed-price trades.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
How do I change the estimator prices?
Edit src/data/estimator.ts. Each job lists its inputs, the price for every option, the time on site, the certificate and how many working days until the next free slot. The home tiles and price pages read the same file.
Where do bookings go?
The contact form posts nowhere by default. Point it at your form backend or CRM and add its host to the security headers; the README shows how. The estimator fills in the job, price and details for you.
Does it name a registration body?
No. The footer and legal pages carry a "[registration scheme] registered" placeholder and a dummy company number, so you fill in your own and never display a membership you do not hold.
Can I use the photographs?
Yes. They are from Pexels, which allows commercial use. Each one is listed with its source in LICENSING.md, and small breaker and charger logos were retouched out.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More trades & industry templates
KELMER OVERHEAD DOOR
Garage door repair
Loud
Imagery
TORWICK LOCK & SAFE
Locksmith / master keying
Loud
Imagery
KANWICK STEELWORKS
Steel fabrication
Loud
Imagery
Crowder Plumbing & Drainage
Plumbing & drainage
Loud
Imagery
BRISKWELL CLEANING CO.
Contract cleaning
Loud
Imagery