Free electrician website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: ohmstead.md, data: ohmstead.json

Electrician website template: first screen on a phone

About this electrician website template

Electrician website template: one free HTML file for a home electrician, with a three-step process, room-by-room services, a fixed price list of eight jobs, a landlord checklist, an out-of-hours line and a visit form. Cream sheets sit on dark green with one aqua accent. AGENTS.md is included, so an AI agent can adapt it.

At a glance, October 2026. One 81 KB index.html with its CSS and JavaScript inside, 13 sections, 14 Unsplash photos credited in CREDITS.md, Host Grotesk from Google Fonts, GSAP 3.13.0 (ScrollTrigger, SplitText); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

A website for electricians has to settle three questions fast: what a job costs, whether the firm is safe to let into the house, and who to ring at night. This page answers them with a price list, a landlord checklist and an out-of-hours number. It suits sole traders, small electrician websites with a team of a few, car charger installers and an electrical contractor website that wants prices shown up front.

Electrician web design by vibe coding goes quickest with an electrician website template for Claude Code, Cursor or Codex, once the agent has the real facts: prices, areas, registrations, insurance, hours and phone numbers. The demo invents all of them, including the nine employed electricians and the eight reviews. Replace those first, keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the selectors AGENTS.md lists, keep one photo per room, and set the footer wordmark's --len to the new name's character count.

This is a good base for a one-page electrician with published prices, landlord work and an emergency line. A plumbing firm can reuse the structure with other prices. A firm that needs several pages, a blog, a quote calculator or online booking will outgrow it, because every booking button only jumps to the one form. The copy is British, with pounds, VAT and Sheffield places. Owners who would rather not touch code can use 8B's builder.

Good for:

Home electrician or electrical contractorPlumber, heating engineer or other fixed-price tradeCar charger, solar or smart-home installerSmall service firm with an emergency line and landlord or compliance work

Turn the electrician website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/electrician-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my electrical business: company name, area covered, services, fixed price per job, team, registrations and insurance, out-of-hours number and callout fee, hours, how people book>. Replace first the company name, the Sheffield places, the eight prices, the team, the reviews and the phone numbers. Keep the ids, the data-8b-section, data-8b-motion and data-8b-part attributes, the selectors AGENTS.md lists and one photo per room. Ask me for missing facts; never invent prices, registrations, cover, hours, addresses, reviews or contacts.

In a terminal

npx degit 8bsite/electrician-website-template my-site

Electrician website design prompt for any AI tool

Use this to build an electrician site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions, the opposite of a page nobody designed; with the template itself, the short prompt above is enough.

Build a one-page website for a home electrician who quotes fixed prices, books landlord safety reports and keeps an out-of-hours line open. Audience: homeowners and landlords. Plain HTML and CSS with GSAP, ScrollTrigger, SplitText and Lenis, no build step. Section order: floating nav, opening sheet with a three-step process, services listed by room beside a sticky photo frame, tidy-work promise, car charger, landlord checklist, fixed price list, team, FAQ, out-of-hours night section, reviews, visit form, footer. Type: Host Grotesk only; weight 340 with tight tracking for headings, 420 for job names and prices, 400 for body, 500 for buttons and labels. Colours: #10231a page ground, #f8f6f1 cream sheets, #212320 ink, #a4e6f4 as the only accent (buttons, Passed badges), #a6b8ac secondary text on green, #e0dcd3 hairlines. Motion idea: things are revealed from a corner or a line; photos open from a notched top-right corner, headings rise line by line, price rows wipe in. Respect prefers-reduced-motion. Avoid purple gradients, three icon cards, a centred hero with two buttons, card shadows and stock icons; show prices and checklists as ruled rows, not boxes. Corners: 18px sheets, 10px photos, 6px buttons. Copy: short and concrete. Ask me for company name, area, prices, registrations, insurance, hours, callout fee and phone; never invent them, leave visible placeholders and list them. One primary action, Book a visit, repeated in the nav, the opening and the form. Mobile: one column at 900px, a Menu button, tap targets of 48px. Checks: no console errors, works at 390px, visible keyboard focus, every placeholder listed.

Electrician website design and motion

Palette

#f8f6f1 cream: reading sheets, photo tabs, form fields and text on the dark green bands#212320 near-black ink: text on cream and aqua, button hover fill, landlord rule lines#575953 grey for secondary text on cream, the Due badge and landlord rows before they are checked#e0dcd3 stone: hairline rules between rows, review card borders and the photo placeholder ground#a4e6f4 aqua accent: opening sheet, primary buttons, Passed badges, charger price tab and lit night cells#10231a dark green: page ground, tidy promise, prices, night stage panel, footer and the tab notch on dark photos#a6b8ac sage: secondary text on the dark green bands#1c3428 deep green: charger and contact photo panels, dark photo ground, the rule above the footer credit line

Fonts

Host Grotesk: the only typeface: light headings and the footer wordmark (weight 340) with tight tracking, sub-headings, job names and prices (420), labels, buttons and photo tabs (500), regular body text (400)

Rounded cream and aqua sheets sit inset on a dark green ground, alternating with full-width dark bands. Section heads pair a heading with a short ruled note. Room photos, team portraits and the wide tidy photo have a notch in the top-right corner holding a small tab. Services are room names beside a sticky photo frame; prices and the landlord checklist are ruled rows, not cards. Corners are 18px on sheets, 10px on photos, 6px on buttons.

In this electrician website design, aqua is kept for the opening sheet, main buttons, Passed badges, the charger price tab and the lit night cells. Cream carries the reading sheets; dark green carries the tidy promise, prices, night stage and footer. The footer wordmark is sized to the screen width.

Every value of this electrician website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the electrician website page

Navigation
Bar with the logo mark and wordmark, four links, phone and a Book a visit button; a Menu button and full-screen overlay on narrow screens
The bar floats after 60 px of scrolling and slides away while you scroll down past 160 px, and the link of the section in view is underlined in aqua.
From first look to final certificate
One aqua sheet with the h1, a short note, two links and a numbered three-step process
On load the heading, the note and the three steps rise in one after another, with about 0.08 s between steps.
Room by room
Six rooms listed by name with a sticky frame of photos that open over one another
As each row reaches the reading line its photo opens over the previous one from the top-right corner while the room name darkens, and it dims again once the next room takes over.
We leave the place tidier than we found it
Tidy-work promise: a wide photo with a tab, a small photo and three ruled notes on a dark ground
The heading rises line by line, each photo opens from its corner while the image settles from a zoom, and each note draws in once as it arrives.
Plug in on the drive, wake up full
Car charger offer: a village seen from above behind a sheet with a list, a button and a price tab
With the scroll the photo zooms out from 1.55 times, the sheet rises into place and the price tab slides in from the right.
Landlord certificates without the chasing
Landlord certificate: heading, lead, button and a five-line test sheet that fills in as you read
With the scroll each checklist row draws its line across and darkens its text, and its badge switches from Due to Passed.
Fixed prices for the jobs we do most
Fixed price list of eight jobs in ruled rows on a dark ground
Each price row wipes in from the left as it comes into view, after the heading rises line by line.
The people who come round
Four electricians with notched portraits, tabs and a speciality line
The four portraits start as one tilted pile in the middle of the grid and are dealt to their places as the grid scrolls in.
Questions we get asked at the door
Six questions and answers in native details elements
The heading rises line by line and the note beside it wipes in; the questions are plain details elements that open and close without script.
Lights out at 2 a.m.?
Dark stage with the out-of-hours number while a grid of cells lights up around it
The section is 230vh tall and its stage stays fixed while a grid of square cells lights up with the scroll, nearest the phone number first.
What the neighbours say
Eight short reviews in two rows that scroll past in opposite directions
The eight cards become two single rows that slide across in opposite directions as the section scrolls past.
Book a visit
A visit form and contact details on a sheet over an aerial photo of terraced houses
The heading rises line by line and the contact details wipe in; sending the form only shows a thank-you line.
Ohmstead Electrical
Dark footer with the large wordmark, company line, links, phone, email and the copyright with the Design: 8B credit
The wordmark rises line by line and the three columns wipe in.

Before you publish the electrician website site

Replace social preview image, favicon, phone number, contact form (sends nothing yet) and email address and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book a visit buttons (navigation bar, menu overlay, opening, footer link) lead to #contact now; point them to keep them on the visit form, or point them to your booking calendar.
See fixed prices link in the opening lead to #prices now; point them to keep it, or change it if you rename or remove the price list.
Get a charger quote button in the charger section lead to #contact now; point them to keep it on the form, or point it to a charger quote page.
Book a landlord check button in the landlord section lead to #contact now; point them to keep it on the form, or point it to a landlord booking page.
Phone links (navigation, menu, FAQ, contact, footer) and the out-of-hours number link in the night section lead to tel: links to two placeholder numbers now; point them to your office phone and your out-of-hours phone in tel: form (+44...).
Email links in the contact details and the footer lead to mailto: links to a placeholder address now; point them to your office email.
Request a visit button of the form lead to a script that checks name and phone, shows a thank-you line and clears the form; nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your CRM form, and drop the thank-you script.
The night section is 230vh tall and the rooms frame is sticky; check both on short laptop screens, where the rooms frame can crowd the list.
The reviews turn into two clipped sliding rows only when the script runs; with reduced motion they stay a wrapped grid, as do the other scenes.
GSAP, ScrollTrigger and SplitText load from the jsDelivr CDN at the end of the body, so the effects depend on that request succeeding.

Questions about this electrician website template

Is this one of the free electrician website templates I can use for client sites?

Yes. It is a single index.html, every service on one page, under the MIT license, so you can build electrical company websites for clients at no cost. GSAP, ScrollTrigger, SplitText and Lenis load from jsDelivr, there is no build step, and the 14 Unsplash photos and the Host Grotesk font are credited in CREDITS.md.

Can I use this design with other AI tools?

Yes. The electrician website design prompt on this page works without the template in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, and a Replit button fills it in. With the template, download index.html and AGENTS.md into an empty folder, open it in your agent, paste the short prompt; AGENTS.md says what to keep and which facts to ask for.

What must I keep when I edit it?

Keep the ids and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the selectors AGENTS.md lists for each animation. Keep one photo per room in the same order, both badges in every landlord row, and update the footer wordmark's --len when you rename the business.

Does the visit form send anything?

No. The script checks that name and phone are filled in, shows a thank-you line and clears the fields. To receive requests, point the form at Formspree or Netlify Forms, or at your own CRM form, and then drop the thank-you script.

What happens with reduced motion or without JavaScript?

With reduced motion the entrance and scroll animations and smooth scrolling are off and the page still reads in full, though the navigation bar still hides on scroll and button hovers still animate. Without JavaScript the wide-screen links, FAQ and prices work, but the phone Menu button cannot open its overlay and the night grid stays empty.

Can I get a site like this without editing code?

Yes. 8B's AI website builder lets you describe the business in a sentence and designs a new site of its own, not this template. Designing and restyling are free. Publishing with hosting and SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly, and it also runs inside Claude and ChatGPT.

Not a electrician website? More free templates