Replay Maintenance
Implemented the Replay Maintenance website from a Figma design specification using WordPress and Elementor. The project included building reusable components, developing custom PHP elements for Elementor, optimizing media delivery, and establishing a reliable maintenance workflow to keep the site stable in production.
Problem
The business needed a professional website that clearly communicates services, surfaces, and case studies while remaining editable by non-technical staff. The challenge was translating the Figma design into a scalable WordPress system while maintaining performance and long-term maintainability.
Constraints
- WordPress + Elementor stack to allow client-side editing
- Shared LiteSpeed hosting environment with cPanel
- Image-heavy content including case studies and service pages
- Site changes must be safe and reversible without developer intervention
- Non-technical stakeholders responsible for ongoing content updates
Approach
Figma-to-WordPress implementation
Rebuilt the website from scratch based on the provided Figma design system, translating layout structures and UI patterns into Elementor-compatible components.
Reusable Elementor component system
Structured the site around reusable sections such as service cards, surface layouts, proof blocks, and navigation elements to maintain consistency across pages.
Custom PHP Elementor components
Developed custom PHP components that integrate directly with Elementor, enabling reusable functionality and reducing reliance on third-party plugins.
Media optimization pipeline
Configured LiteSpeed Cache and QUIC.cloud image optimization to generate next-gen formats and significantly reduce the media footprint of the site.
Production stability workflow
Implemented a safe update and rollback process using WordPress backups and host-level snapshots, allowing changes to be reverted quickly if issues occur.
Implementation Highlights
Custom Elementor PHP components
Developed reusable PHP-based components that extend Elementor functionality while keeping the site maintainable and lightweight.
Figma design translated to production
Implemented the entire site structure and layout system based on the original Figma design reference.
WebP media pipeline
Configured automated image optimization and WebP generation to reduce asset weight across the site.
LiteSpeed performance tuning
Optimized caching, asset delivery, and media handling to improve performance while maintaining full Elementor editing capability.
Stable update workflow
Established a predictable maintenance process supported by backups and host-level snapshots.
Screens
Tap an image to open. Pinch to zoom inside the modal.
Results
~324 MB
Media Footprint Reduced
Total reduction reported after optimizing the full image library with LiteSpeed Image Optimization.
4,174 images
Assets Optimized
Generated optimized assets and WebP variants across the site's media library.
Resolved
Production Stability
Eliminated recurring Elementor fatal-error alerts by aligning plugin versions and enforcing a predictable update process.
Component-based
Site Architecture
Implemented reusable Elementor sections and custom PHP components to maintain consistency and scalability.
Next Steps
Continue the maintenance cycle with periodic updates, uptime monitoring, and the gradual expansion of case studies to strengthen SEO and conversion credibility.