01
Context
A&T Construction needed its website on WordPress and Elementor Pro: an existing reference site cloned and rebranded, three new pages (About Us, Financing, Civil Work) added, and a property listing system the team could manage without code. The target was a faithful duplicate of the reference design, minus the agreed removals, not an approximation of it. An earlier build was no longer available, so the site had to be rebuilt.
The rebuild started from evidence rather than memory: the live reference site, the client's brief and copy documents, and a reconstruction record that marked every setting as recorded, partial or not recorded. Most visual values had never been written down anywhere, so they were measured on the rendered reference pages before a single section was built, and every rebrand rule was checked mechanically rather than by eye. The rebuild ran from late July to early September 2026.
02
The Challenge
- The palette beyond one accent colour, the typography beyond one family, all spacing and all breakpoints were unrecorded; the reference site, a Next.js and Tailwind build, was the only place they existed.
- The reference layout switches at 1024px, which falls on the wrong side of Elementor's default tablet breakpoint.
- The old company identity had to disappear everywhere, while legal entity names, person names and client-written copy stayed exactly as supplied.
- Several Elementor and custom-field failures are silent: a wrong settings key or a field group hidden from the REST API returns success and changes nothing.
03
Scope and Approach
Evidence recovery
A reconstruction record compiled from the earlier build's history, with every custom code block and setting marked full, partial or not recorded. A fixed source order settled conflicts: live reference site, then the client brief, then the client's copy documents, then the record. Client copy was extracted from the documents and checked against them with an automated round-trip diff: zero mismatches.
Measured design system
Computed styles captured on nine reference pages at 1440, 768 and 375px, with scroll-reveal animations forced open and modern colour functions converted to hex. The result became Elementor global colours and fonts, a spacing scale, and a per-page build manual pairing the content of each page with its measured styles at all three widths.
Property data layer
A property post type with its own archive, a category taxonomy, and a Property Details field group for location, featured flag, description and gallery. The homepage featured carousel runs through an Elementor query hook that filters on the featured flag, because the loop widget's query settings cannot filter on a custom field. Header, footer, archive, single and card templates built in Theme Builder.
Section-by-section page build
Pages assembled by hand in the Elementor editor from written section guides: structure first, then control and value tables, then a QA table. Scripted capture handled the reference pages and the media pipeline, and early review drafts published over the REST API were each verified by reading the stored data back. Site behaviour such as the sticky header and slider indicators lives in FluentSnippets, driven by CSS class hooks.
Rebrand gate, audit and handover
A grep gate run over every deliverable for the old brand, the removed service lines, the legacy domain and its image API. Office details taken from the brief, since the reference site mislabelled one address and listed a retired phone number. A mobile audit at phone and tablet widths, full-site backups copied off the server, and every open item listed for the client.
04
Architecture flow
05
Technical Deep Dive
Recovering values nobody wrote down
The record listed one accent colour and one font. Scraping the reference site found the dominant brand blue, absent from the record, and a second display typeface used for headings. Its breakpoints were Tailwind defaults, so the main layout switch sits at 1024px. Elementor's Tablet breakpoint was set to 1023 and a Laptop breakpoint enabled at 1279, so each layout lands on the same side of the line as the original.
Three off-canvas menu traps
The mobile panel opened empty: the Nav Menu widget defaults to a tablet breakpoint that hides the main menu, with no toggle left inside the panel to reveal it. Submenus then stayed hidden because they open on hover, so they were forced inline with CSS scoped to the main menu only. Finally, a fixed panel cannot escape an ancestor's z-index, so the container owning the panel was kept above the sticky header at tablet and mobile widths.
Failures that return success
Containers store CSS classes under one settings key and widgets under another; the wrong one drops the class silently and breaks every snippet hooked to it. A loop widget with a blank skin renders nothing, also without an error. Property fields written over REST returned success codes and were discarded because the field group was not exposed to REST. Every write was therefore verified by reading it back, never by status code.
An audit that measured behaviour
A desktop browser window cannot shrink to phone width, so phone and tablet were emulated at device level. Every image reported a width near its layout size, which suggested blurry downscaling; decoding the actual files showed the opposite, images heavily over-served. Resource timing then located a 2 MB PNG used as a small background and 670 KB of logos loaded on every page.
06
Engineering Decisions
Legal names are never rebranded
The rebrand replaced the old company name everywhere except inside the client's legal entity names and people's names. The Financing disclaimer keeps the entity exactly as the client wrote it, occurrences counted and checked, and the question went to the client instead of being settled by search and replace.
Create, never modify
On the shared staging site, scripted work could only create new objects: no edits to existing pages, templates or properties, no plugin installs, theme edits or database writes. Before and after snapshots were diffed field by field to prove nothing pre-existing changed.
Leave it out rather than guess
With no confirmed recipient, the contact form notification was left off rather than defaulted to the admin address. Field keys were never guessed, missing property photos got an explicit placeholder, and unconfirmed contact details stayed visibly marked as placeholders until the client supplies them.
07
Results
- Nine pages plus header, footer, properties archive, property single and property card templates rebuilt in Elementor, delivered and accepted by the client.
- A complete design system recovered by measurement from nine reference pages at three widths, including the brand colour and heading typeface the record did not contain.
- Rebrand verified by grep across all page text and deliverables: zero occurrences of the old brand, the removed service lines or the legacy domain, with legal entity and person names kept verbatim.
- New property photography re-encoded on upload from 67.6 MB to 8.6 MB, 87 percent lighter, with metadata stripped.
- Mobile audit at 375 and 768px in emulated Chrome: no horizontal scrolling on any page, with the remaining weight and touch findings documented for the client. A final pass on the delivered build confirmed all nine pages and sample property pages at 375, 768 and 1440px.
- Seven property listings published in a sortable archive, each with location, directions and detail page, and listings without approved photography shown with an explicit placeholder.