Homepage Banner Grid - klikbare beeldcollage, drie responsieve layouts, zonder themabewerking

Uw homepage heeft ongeveer drie seconden om een richting te wijzen

Een slider waar iedereen langs scrolt en een rij "uitgelichte producten" is geen merchandising. Een bannerraster wel: een handvol beelden die stuk voor stuk gericht naar dat deel van uw assortiment leiden waar u uw bezoekers echt wilt hebben. Precies dat raster bouwt deze module — vanuit het backoffice, zonder één themabestand aan te raken.

Drie layouts, klaar om te vullen

• Feature Split (dominant hoofdbeeld) — één grote hoofdtegel plus vier ondersteunende tegels. Vijf tegels, voor een shop met één kernboodschap en een paar nevenroutes.
• Mosaic (mozaïek) — een rijk raster van zestien tegels in magazinestijl, voor assortimenten met veel categorieën die zichtbaarheid verdienen.
• Showcase (evenwichtige etalage) — een redactionele opzet van vijf tegels, voor als niets de rest mag overheersen.

Van elke layout staat een live voorbeeld op de configuratiepagina. Zo kiest u op wat u ziet, niet op gevoel.

Zo werkt het

• 1. Kies een layout — klik op een van de drie voorbeeldkaarten; de pagina laadt opnieuw en toont de beeldplekken van die layout.
• 2. Stel de stijlopties in — zoom bij hover, bijschriften over het beeld, afgeronde hoeken, openen in een nieuw tabblad en de tussenruimte tussen tegels van 0 tot 16 px.
• 3. Vul de tegels — upload voor elke tegel een afbeelding, bepaal welke link hij opent en voeg een titel toe als u een bijschrift wilt. Opslaan, en het staat op uw homepage.

Elke tegel is een echte link

Een tegel kan een categorie, een merk, een product of elke gewenste pagina openen — een intern pad zoals /3-clothes of een volledig https://-adres. Links worden gecontroleerd: alleen interne paden en http(s)-URL's worden geaccepteerd, al het andere wordt genegeerd. Titels dienen tegelijk als bijschrift over het beeld en als toegankelijkheidslabel van de link.

Responsief, uit één stylesheet

Versie 1.x leverde voor elke vaste pixelbreedte een apart stylesheet — 980, 1000, 1110, 1170 — en per PrestaShop-versie een apart template. Alle tien stylesheets en zeven templates zijn verdwenen, vervangen door één CSS-Grid-stylesheet en één datagestuurd template. Elke layout gaat vanzelf van desktop via een tabletraster met twee kolommen naar één mobiele kolom. U hoeft geen pixelbreedte meer te kiezen voor uw shop.

De module controleert haar eigen installatie

Het paneel Status bovenaan de configuratiepagina laat zien of het raster daadwerkelijk aan de homepage hangt en of de afbeeldingsmap beschrijfbaar is — inclusief een knop Tonen op homepage die dat met één klik regelt. De oude instructies "zet de map op 777" en "verplaats de module naar de bovenste positie" zijn vervangen door echte controles.

Veiliger dan de module die het vervangt

Geüploade afbeeldingen worden aan de hand van een lijst met toegestane extensies als echte afbeelding geverifieerd en onder libs/custom/ met eigen namen opgeslagen. Een toekomstige module-update kan uw banners daardoor nooit overschrijven met de meegeleverde voorbeelden — een sluimerende ontwerpfout in 1.x. Het stylesheet wordt geladen via actionFrontControllerSetMedia in plaats van via de verouderde hook displayHeader, en het blok wordt weergegeven via de widget-interface van PrestaShop. Daarmee plaatst u het desgewenst ook elders met {widget name='blockpicturecollagepro'}.

Compatibiliteit

PrestaShop 1.7, 8 en 9, in acht talen: Duits, Engels, Frans, Italiaans, Nederlands, Pools, Spaans en Turks. Multistore-proof, dus u kunt per shop andere banners uploaden. Bij de installatie koppelt de module zich aan de hook Home en past of overschrijft nooit een themabestand — bij het verwijderen gaan de instellingen, links, titels en geüploade afbeeldingen mee, en blijft uw thema precies zoals het was.

Veelgestelde vragen

Welk formaat moeten mijn banners hebben?

Tegels snijden het beeld beeldvullend bij, dus exacte afmetingen zijn niet doorslaggevend. Rond 1200×800 px voor grote tegels en 600×400 px voor kleine oogt messcherp. JPG, PNG, GIF en WEBP worden geaccepteerd.

Kan elke tegel naar een andere plek leiden?

Ja — elke tegel heeft een eigen afbeelding, een eigen link en een optionele titel, en kan naar elke categorie, elk merk, elk product of elke pagina wijzen.

Werkt het ook op mobiel?

Ja. Eén CSS-Grid-stylesheet laat elke layout meebewegen van desktop via een tabletraster met twee kolommen naar één mobiele kolom.

Moet ik mijn thema aanpassen?

Nee. De module koppelt zich bij de installatie aan de hook Home. Gebruikt uw thema een eigen homepage-hook, plaats hem dan met {widget name='blockpicturecollagepro'}.

Het raster verschijnt niet op mijn homepage — wat nu?

Het Status-paneel vertelt u of het gekoppeld is en biedt een knop "Tonen op homepage" voor één klik. U kunt ook onder Design → Posities de hook displayHome controleren en het raster boven uw slider schuiven.

Kan ik verschillende banners tonen in verschillende shops?

Ja, de module is multistore-proof — banners worden per shop geüpload.

Wat gebeurt er met mijn banners bij een module-update?

Niets. Uw uploads staan juist daarom onder libs/custom/ met eigen namen, zodat een update ze niet kan vervangen door de meegeleverde voorbeelden.