Homepage Banner Grid - collage di immagini cliccabile, tre layout responsive, senza toccare il tema

La tua home page ha circa tre secondi per indicare una direzione

Uno slider che tutti scorrono senza guardare e una fila di «prodotti in evidenza» non sono merchandising. Una griglia di banner sì: poche immagini, ognuna delle quali è un percorso voluto verso la parte di catalogo in cui vuoi davvero portare i tuoi clienti. Questo modulo costruisce quella griglia dal back office, senza toccare un solo file del tema.

Tre layout, pronti da riempire

• Feature Split (blocco protagonista) — un riquadro grande più quattro di supporto. Cinque in tutto, per un negozio con un messaggio principale e qualche percorso secondario.
• Mosaic (mosaico) — una griglia ricca di sedici riquadri, in stile rivista, per cataloghi con molte categorie che vale la pena mettere in luce.
• Showcase (vetrina equilibrata) — una composizione editoriale di cinque riquadri, quando nulla deve prevalere sul resto.

Ogni layout ha un'anteprima dal vivo nella pagina di configurazione: scegli guardando, non tirando a indovinare.

Come funziona

• 1. Scegli un layout — clicca su una delle tre schede di anteprima; la pagina si ricarica mostrando gli spazi immagine di quel layout.
• 2. Imposta le opzioni di stile — zoom al passaggio del mouse, didascalie in sovrimpressione, angoli arrotondati, apertura in una nuova scheda e la spaziatura tra i riquadri, da 0 a 16 px.
• 3. Riempi i riquadri — carica un'immagine per ciascuno, imposta il link da aprire e aggiungi un titolo se vuoi una didascalia. Salva ed è già online sulla tua home page.

Ogni riquadro è un vero link

Un riquadro può aprire una categoria, un marchio, un prodotto o qualsiasi pagina tu voglia: un percorso interno come /3-clothes oppure un indirizzo https:// completo. I link vengono validati, quindi sono accettati solo i percorsi interni e gli URL http(s), e tutto il resto viene ignorato. I titoli fanno doppio lavoro: didascalia in sovrimpressione ed etichetta di accessibilità del link.

Responsive, con un solo foglio di stile

La versione 1.x includeva un foglio di stile diverso per ogni larghezza fissa in pixel — 980, 1000, 1110, 1170 — e un template diverso per ogni versione di PrestaShop. Tutti e dieci i fogli di stile e i sette template sono spariti, sostituiti da un unico foglio di stile CSS-Grid e un solo template basato sui dati. Ogni layout passa da solo dal desktop a una griglia a due colonne su tablet e a una singola colonna su mobile. Non devi più scegliere una larghezza in pixel per il tuo negozio.

Controlla da sé la propria configurazione

Il pannello Stato, in cima alla pagina di configurazione, ti dice se la griglia è davvero agganciata alla home page e se la cartella delle immagini è scrivibile, con un pulsante Mostra in home page che risolve tutto con un clic quando non lo è. Le vecchie istruzioni del tipo «imposta la cartella a 777» e «sposta il modulo in prima posizione» lasciano il posto a controlli reali.

Più sicuro del modulo che sostituisce

Le immagini caricate vengono validate come immagini vere rispetto a un elenco di estensioni consentite e salvate in libs/custom/ con nomi distinti: nessun aggiornamento futuro del modulo potrà quindi sovrascrivere i tuoi banner con gli esempi inclusi, un difetto latente dell'impianto 1.x. Il foglio di stile viene caricato tramite actionFrontControllerSetMedia invece del vecchio hook displayHeader, e il blocco viene renderizzato attraverso l'interfaccia widget di PrestaShop, così puoi anche posizionarlo dove vuoi con {widget name='blockpicturecollagepro'}.

Compatibilità

PrestaShop 1.7, 8 e 9, in otto lingue: francese, inglese, italiano, olandese, polacco, spagnolo, tedesco e turco. Compatibile con il multinegozio, così puoi caricare banner diversi per ogni negozio. Si aggancia all'hook Home durante l'installazione e non modifica né sovrascrive mai un file del tema: disinstallandolo vengono rimossi impostazioni, link, titoli e immagini caricate, e il tuo tema resta esattamente com'era.

Domande frequenti

Che dimensioni devono avere i miei banner?

I riquadri ritagliano l'immagine per riempire lo spazio, quindi le dimensioni esatte non sono critiche. Circa 1200×800 px per i riquadri grandi e 600×400 px per quelli piccoli danno un risultato nitido. Sono accettati JPG, PNG, GIF e WEBP.

Ogni riquadro può portare in un punto diverso?

Sì: ogni riquadro ha la sua immagine, il suo link e un titolo facoltativo, e può puntare a qualsiasi categoria, marchio, prodotto o pagina.

Funziona su mobile?

Sì. Un unico foglio di stile CSS-Grid adatta ogni layout dal desktop a una griglia a due colonne su tablet fino a una singola colonna su mobile.

Devo modificare il mio tema?

No. Il modulo si aggancia all'hook Home durante l'installazione. Se il tuo tema usa un hook home personalizzato, puoi inserirlo con {widget name='blockpicturecollagepro'}.

La griglia non compare sulla mia home page: e adesso?

Il pannello Stato ti dice se è agganciata correttamente e offre un pulsante «Mostra in home page» da un solo clic. Puoi anche controllare l'hook displayHome in Design → Posizioni e spostare la griglia sopra il tuo slider.

Posso usare banner diversi su negozi diversi?

Sì, il modulo è compatibile con il multinegozio: i banner si caricano negozio per negozio.

Che fine fanno i miei banner quando il modulo si aggiorna?

Nessuna. I file caricati sono salvati in libs/custom/ con nomi distinti proprio perché un aggiornamento non possa sostituirli con gli esempi inclusi.