Cosa ho fatto
- Ho ripensato l’identità visiva partendo da quella esistente: foto vere dell’azienda e dei prodotti, video di sfondo, nero, bianco e rosso, per passare da un sito freddo a uno che racconta le persone dietro i prodotti.
- Ho recuperato tutto il contenuto del vecchio sito, che non aveva una struttura dati: categorie con immagini e descrizioni, schede prodotto, gallery, schede tecniche, voci di capitolato, accessori, loghi dei clienti, video e testimonianze.
- Ho trasformato il catalogo in un tipo di contenuto dedicato con categorie gerarchiche e campi personalizzati, invece di usare un e-commerce che a SIAL non serviva: niente carrello, niente prezzi, solo informazioni tecniche.
- Ho costruito un archivio che capisce da solo dove si trova: se una categoria ha sottocategorie mostra quelle, se è l’ultimo livello mostra i prodotti, se contiene entrambe le cose le unisce in un’unica griglia con card identiche.
- Ho fatto in modo che le categorie con un solo prodotto portino direttamente alla scheda, così nessuno entra in una pagina con una card sola.
- Ho ricostruito gli indirizzi del vecchio sito: ogni prodotto ha una URL che segue il percorso completo delle sue categorie, le vecchie URL portano alle nuove e le breadcrumb partono sempre dalla pagina del catalogo.
- Ho disegnato un menu per un catalogo su quattro livelli e più: a schermo intero su mobile, e su desktop una tendina verticale in cui il clic sulla voce apre la pagina e il clic sulla freccia apre il sottolivello.
Sfide e soluzioni
Elementor non sa mostrare in una griglia solo le sottocategorie della categoria in cui ci si trova, e non prevede categorie che contengono insieme sottocategorie e prodotti, come succede nel catalogo SIAL. Ho aggiunto alle pagine una logica che riconosce tre situazioni diverse e decide quali sezioni del template mostrare; per i casi misti ho scritto una griglia unica che riprende al pixel le card fatte in Elementor, così chi naviga non vede differenze tra una pagina e l’altra.
La seconda sfida era non perdere il traffico del vecchio sito. Le sue URL erano lunghe e annidate, e WordPress da solo non riesce a capire se l’ultimo pezzo dell’indirizzo è una categoria o un prodotto. Ho fatto riconoscere al sito i prodotti prima che decida che una pagina non esiste, così titolo, breadcrumb e dati SEO risultano corretti fin dal primo caricamento. Dopo la messa online ho anche risolto il video della homepage, che il sistema di consenso ai cookie bloccava alla prima visita.
Tecnologie usate
- WordPress
- Elementor Pro: Theme Builder e Loop Grid
- Advanced Custom Fields: tipo di contenuto, categorie e campi
- WPCode: logiche PHP, CSS e JavaScript su misura
- Yoast SEO: breadcrumb e metadati
- WP Rocket
- Claude: sviluppo delle logiche del catalogo e debug
