Il Progetto: Wearefancards
Wearefancards è l’iniziativa di Lab Go dedicata alla promozione delle “Fancards”, strumenti phygital per il fan engagement. Il progetto richiedeva una landing page verticale, dal forte impatto visivo, disegnata per convertire visitatori in clienti, mantenendo la coerenza estetica rigorosa del brand madre.
La Sfida: Design Senza Compromessi
Il reparto grafico ha fornito un layout complesso e non convenzionale. La sfida non era solo replicarlo Pixel-perfect, ma renderlo dinamico. Gli elementi grafici “fluttuanti” e le sovrapposizioni non potevano essere statici: il cliente doveva poterli gestire senza rompere l’equilibrio visivo del design originale.
Lo Stack: Bootstrap & WordPress
Per ottenere la massima fedeltà al design Figma, ho utilizzato Bootstrap 5 integrato in un tema WordPress custom. Questo ha permesso di gestire la griglia responsive con precisione millimetrica, evitando le limitazioni dei page builder commerciali e garantendo un codice pulito e veloce per la landing page.
Gallery Ibrida & Video Overlay
Il cuore della pagina è una gallery multimediale complessa. Ho sviluppato una soluzione custom che permette di visualizzare video in sovraimpressione sulle immagini. Tramite ACF, il cliente può associare un file video a specifiche immagini della galleria, creando un’esperienza utente interattiva e dinamica.
Controllo Posizionale Avanzato
La caratteristica tecnica più rilevante è il controllo delle immagini. Ho programmato campi ACF che mappano le proprietà CSS top, left, right, bottom. Il cliente può inserire valori specifici dal backend per spostare ogni singola immagine nello spazio, decidendo l’esatto posizionamento orizzontale e verticale.
Gestione Dimensioni Autonoma
Oltre alla posizione, il cliente ha il controllo sulle dimensioni. Attraverso campi numerici dedicati nel backend, è possibile definire larghezza e altezza di ogni elemento grafico. Questo trasforma l’editor di WordPress in un tool di layout potente, senza che l’utente debba scrivere una riga di CSS.
