The Project: Wearefancards
Wearefancards is Lab Go’s initiative promoting “Fancards,” phygital tools for fan engagement. The project required a vertical, high-impact landing page designed to convert visitors into customers while maintaining the rigorous aesthetic consistency of the parent brand.
The Challenge: Design Without Compromise
The graphics department provided a complex, unconventional layout. The challenge wasn’t just replicating it Pixel-perfectly, but making it dynamic. “Floating” graphic elements and overlays couldn’t be static: the client needed to manage them without breaking the visual balance of the original design.
The Stack: Bootstrap & WordPress
To achieve maximum fidelity to the Figma design, I used Bootstrap 5 integrated into a custom WordPress theme. This allowed for millimeter-precise responsive grid management, avoiding the limitations of commercial page builders and ensuring clean, fast code for the landing page.
Hybrid Gallery & Video Overlay
The core of the page is a complex multimedia gallery. I developed a custom solution allowing video overlays on images. Through ACF, the client can associate a video file with specific gallery images, creating an interactive and dynamic user experience.
Advanced Positional Control
The standout technical feature is image control. I programmed ACF fields mapping CSS properties top, left, right, bottom. The client can input specific values from the backend to move each single image in space, deciding its exact horizontal and vertical positioning.
Autonomous Size Management
Beyond position, the client controls dimensions. Through dedicated numeric fields in the backend, width and height for each graphic element can be defined. This transforms the WordPress editor into a powerful layout tool without the user needing to write a single line of CSS.
