Case study
From a simple HTML original to an Oxygen WordPress site
Thornhill Utilities is a fictional contractor. The site is real enough to click through. This post is the part we show prospects when we talk about how a WordPress build should start.
The point of the exercise
Most companies do not need a mysterious process. They need a site they can look at, a structure they can follow, and an editor they can actually use after launch. We start in HTML so the design is visible before anyone logs into WordPress. We finish in Oxygen so the same sections become blocks a client can change.
What you are looking at
This property began as a folder of HTML pages, one stylesheet, and a small script for the mobile menu and the contact form. Header and footer are identical on every page on purpose. Each band of content is a section with a name — hero, split, cards, CTA, article. Those names are the map for Oxygen.
- Global colors live in CSS variables. In Oxygen they become Global Colors.
- The header and footer are templates, not one-off code on ten pages.
- Cards, jobs, and posts are repeating components. Change one, keep the pattern.
- The contact form is a dummy here. In WordPress it can write to an inbox.
What a client does in the backend
After conversion, a prospect can be walked through WordPress with a limited role. Edit a headline. Swap a photograph. Add a job to Careers. Publish a second Insights post. None of that should require a developer ticket if the build was structured this way from the first HTML pass.
The demo is not “look what a designer can do.” It is “look how little you have to ask us once the site is yours.”
Why Thornhill
We needed a company that was allowed to be a little strange. A utility contractor with a CEO who does not sit for portraits is more interesting than another generic services page, and it still has the bones of a real industrial site: services, coverage, safety, careers, contact, a blog. If you catch the quieter jokes, you were supposed to. If you do not, the site still has to work as a contractor brochure.
Want to see the editor?
Ask Inspire for a walkthrough of the WordPress / Oxygen version. The HTML you are reading is the before. The backend is the after.