Trieu Nails London · Homepage build

The homepage — coded drop-in for a ~100% match

The homepage is delivered as a finished, hand-coded page so it matches the design almost exactly. Use it for the homepage only; build the other pages (Services, Careers, Contact…) in Elementor to the build spec as normal.

✅
Why coded, not rebuilt in Elementor? A native Elementor rebuild lands around 80–90% because Elementor imposes its own markup. This page is plain semantic HTML + CSS, so it’s ~100% and loads faster. The owner edits the homepage rarely (roughly once a year, via code), so there’s no downside to it not being Elementor-editable.
1

What you’re getting

One production-ready file.

home.html — a complete, standalone homepage: semantic HTML, all CSS inline, real WordPress media paths, and an SEO-ready <head> (title, meta description, Open Graph, and a LocalBusiness / NailSalon JSON-LD schema with address, phone, hours and geo).

  • Images point at the existing media library, e.g. /wp-content/uploads/2025/07/nails-at-nail-salon.webp.
  • The logo is styled live text (great for SEO), linked to /.
  • The map is a live Google embed; the “Get directions” link is wired.
  • TODO The hero image is a placeholder — the client supplies the marble/chrome photo. Until then an elegant gradient stands in. See the .ph-hero.img-hero comment in the file.
2

How to install it

Pick whichever route you prefer.

Route A — Elementor HTML widget (quickest):

  • Create a new page “Home v2” and set the Elementor page layout to Canvas (no theme header/footer) or Full Width.
  • Add one HTML / Custom Code widget and paste the file’s <style> block + everything inside <body> into it.
  • Put the <head> essentials where they belong: meta title/description via your SEO plugin, and paste the JSON-LD <script> into the widget (or a header-scripts plugin).

Route B — child-theme page template (cleanest 100%):

  • Drop the whole file in as a page-home.php template (or a full-page template) and assign it to the homepage.

Then, either route:

  • Preview and compare side-by-side with the design.
  • Settings → Reading → set “Home v2” as the front page. Keep the old homepage as a draft for instant rollback.
3

Header & footer consistency

Keep nav identical site-wide.

The coded page ships with its own header and footer. Build a matching header/footer for the Elementor inner pages (Theme Builder) so the nav, logo and call-bar look identical everywhere — they already closely match the current live site.

Alternative: strip the coded header/footer out of home.html and let your theme’s global header/footer wrap the body content. Either way — just make sure they look the same across pages.

4

SEO checklist

A coded homepage is SEO-neutral to positive.
  • Keep the URL as / — don’t change the homepage slug. This protects existing rankings.
  • Set the meta title & description in your SEO plugin (Yoast/RankMath) — or keep the ones already in the file’s <head>. Don’t double up.
  • The LocalBusiness (NailSalon) schema is already in the file — keep it, or manage via plugin, not both.
  • Add real alt text to every image once dropped in.
  • Preserve the keyword paragraphs (East London / Bethnal Green / Roman Road / London) — they’re already in the copy.
  • Speed: lean coded HTML beats Elementor’s div bloat — expect better Core Web Vitals.
🌓
Recommended: the file includes an automatic dark-mode variant. For a consistent light brand look on every device, delete the two @media (prefers-color-scheme: dark) blocks in the <style>.
🔤
Optional (GDPR): the elegant serif loads Playfair Display from Google Fonts. Self-host it if you’d rather avoid third-party font calls.
5

Still to add (from the client)

Drop-in slots are marked.
  • Hero image — marble/chrome nails (see the TODO comment in the file).
  • 3 real reviews — replace the placeholder quotes/names.
  • Real polish shade names & colours — for the “by season” and “by mood” swatches.
◆ The coded homepage
home.html — view / download the drop-in file →

Also here: the design · the full build spec (inner pages).