Replay Maintenance
Replay Maintenance is a production WordPress and Elementor website built from a Figma design specification for a UK sports surface maintenance company. The project included reusable page sections, custom PHP Elementor components, responsive implementation, image optimization, and a safe maintenance workflow for long-term production stability.
Problem
The client needed a production-ready website that matched the provided Figma design, remained easy to maintain in WordPress/Elementor, and avoided the usual performance and layout problems that appear when business websites grow through repeated content updates.
Constraints
- The website had to match the provided Figma design closely while staying maintainable inside WordPress and Elementor.
- Reusable sections and components were needed so future content updates would not require rebuilding layouts from scratch.
- Custom PHP, HTML, and CSS had to extend Elementor where visual builder functionality was not enough.
- Image-heavy content needed optimization to reduce page weight and improve long-term performance.
- Changes had to be production-safe because the website was intended for real business use.
Approach
Figma-to-WordPress Implementation
Converted the provided Figma design into a responsive WordPress and Elementor website while preserving the intended layout, spacing, visual hierarchy, and business presentation.
Reusable Elementor Structure
Built reusable page sections and content patterns so future updates could be handled safely without rebuilding the site from scratch.
Custom PHP, HTML, and CSS Fixes
Extended Elementor where needed with custom PHP components, HTML structure, and CSS fixes to solve layout, styling, and content requirements.
Image and Performance Optimization
Optimized a large media library by processing thousands of images, reducing unnecessary page weight and improving maintainability for future content updates.
Production-Safe Maintenance
Supported safe production changes, content updates, layout fixes, and long-term website maintenance without disrupting the live business site.
Implementation Highlights
Figma-to-WordPress Delivery
Implemented the website from Figma into WordPress and Elementor, keeping the design responsive, structured, and maintainable.
Reusable Elementor Sections
Built reusable page sections and content structures to make future content updates safer and faster.
Custom PHP and CSS Support
Used custom PHP, HTML, and CSS where Elementor needed additional flexibility for layout, styling, and component behavior.
Image Optimization
Optimized 4,174 images and reduced approximately 324 MB of media weight to improve maintainability and performance.
Production Maintenance Workflow
Handled safe production changes, content updates, responsive fixes, and long-term website stability work.
Screens
Tap an image to open. Pinch to zoom inside the modal.
Results
Figma to Production
Website Delivery
Delivered a complete WordPress and Elementor business website from the provided design specification.
4,174 Images
Media Optimization
Optimized the site media library and reduced roughly 324 MB of unnecessary image weight.
Reusable Sections
Maintenance
Built reusable Elementor structures and production-safe update workflows for long-term website maintenance.
Next Steps
Next improvements could include ongoing content updates, technical SEO refinements, new case-study pages, deeper performance checks, and continued maintenance of the WordPress/Elementor stack.