Homepage Banner Grid - klickbare Bildcollage, drei responsive Layouts, ohne Theme-Anpassung

Ihre Startseite hat etwa drei Sekunden, um eine Richtung vorzugeben

Ein Slider, über den alle hinwegscrollen, und eine Reihe „Top-Produkte“ sind kein Merchandising. Ein Banner-Raster schon: eine Handvoll Bilder, von denen jedes gezielt in den Teil Ihres Sortiments führt, in dem Sie Ihre Kundschaft wirklich haben wollen. Genau dieses Raster baut das Modul — aus dem Backoffice heraus, ohne eine einzige Theme-Datei anzufassen.

Drei Layouts, bereit zum Befüllen

• Feature Split (dominantes Hauptmotiv) — eine große Hauptkachel und vier ergänzende Kacheln. Fünf Kacheln für einen Shop mit einer Kernbotschaft und einigen Nebenwegen.
• Mosaic (Mosaik) — ein dichtes Raster aus sechzehn Kacheln im Magazinstil, für Sortimente mit vielen Kategorien, die Sichtbarkeit verdienen.
• Showcase (ausgewogene Bühne) — ein redaktionelles Layout aus fünf Kacheln, wenn nichts den Rest erschlagen soll.

Zu jedem Layout gibt es auf der Konfigurationsseite eine Live-Vorschau. So entscheiden Sie mit den Augen statt auf Verdacht.

So funktioniert es

• 1. Layout wählen — klicken Sie auf eine der drei Vorschaukarten; die Seite lädt neu und zeigt die Bildplätze dieses Layouts.
• 2. Stiloptionen einstellen — Zoom beim Überfahren, eingeblendete Bildunterschriften, abgerundete Ecken, Öffnen in neuem Tab und der Abstand zwischen den Kacheln von 0 bis 16 px.
• 3. Kacheln befüllen — laden Sie für jede ein Bild hoch, legen Sie das Ziel des Links fest und ergänzen Sie einen Titel, wenn Sie eine Bildunterschrift möchten. Speichern — fertig, es steht auf Ihrer Startseite.

Jede Kachel ist ein echter Link

Eine Kachel kann eine Kategorie, eine Marke, ein Produkt oder jede beliebige Seite öffnen — einen internen Pfad wie /3-clothes oder eine vollständige https://-Adresse. Links werden geprüft: Akzeptiert werden nur interne Pfade und http(s)-URLs, alles andere wird ignoriert. Titel dienen zugleich als eingeblendete Bildunterschrift und als Barrierefreiheits-Beschriftung des Links.

Responsiv, aus einem einzigen Stylesheet

Version 1.x lieferte für jede feste Pixelbreite ein eigenes Stylesheet — 980, 1000, 1110, 1170 — und für jede PrestaShop-Version ein eigenes Template. Alle zehn Stylesheets und sieben Templates sind verschwunden, ersetzt durch ein einziges CSS-Grid-Stylesheet und ein datengesteuertes Template. Jedes Layout wechselt von selbst vom Desktop über ein zweispaltiges Tablet-Raster zur einspaltigen Mobilansicht. Sie müssen für Ihren Shop keine Pixelbreite mehr auswählen.

Das Modul prüft seine eigene Einrichtung

Das Panel Status oben auf der Konfigurationsseite zeigt Ihnen, ob das Raster tatsächlich auf der Startseite eingebunden und ob der Bildordner beschreibbar ist — samt Schaltfläche Auf der Startseite anzeigen, die das mit einem Klick erledigt. Die alten Hinweise „Bitte setzen Sie den Ordner auf 777“ und „Verschieben Sie das Modul an die erste Position“ sind echten Prüfungen gewichen.

Sicherer als das Modul, das es ablöst

Hochgeladene Bilder werden anhand einer Positivliste zulässiger Endungen als echte Bilder verifiziert und unter libs/custom/ mit eindeutigen Namen gespeichert. Ein künftiges Modul-Update kann Ihre Banner deshalb nie mit den mitgelieferten Beispielbildern überschreiben — ein Konstruktionsfehler, der in 1.x noch schlummerte. Das Stylesheet wird über actionFrontControllerSetMedia geladen statt über den alten Hook displayHeader, und der Block wird über die Widget-Schnittstelle von PrestaShop ausgegeben. Sie können ihn damit auch an beliebiger Stelle mit {widget name='blockpicturecollagepro'} einsetzen.

Kompatibilität

PrestaShop 1.7, 8 und 9, in acht Sprachen: Deutsch, Englisch, Französisch, Italienisch, Niederländisch, Polnisch, Spanisch und Türkisch. Multistore-fähig, Sie können also je Shop unterschiedliche Banner hochladen. Bei der Installation bindet sich das Modul in den Hook Home ein und verändert oder überschreibt niemals eine Theme-Datei — beim Deinstallieren verschwinden Einstellungen, Links, Titel und hochgeladene Bilder, und Ihr Theme bleibt exakt so, wie es war.

Häufige Fragen

Welche Größe sollten meine Banner haben?

Die Kacheln beschneiden das Bild formatfüllend, exakte Maße sind daher nicht entscheidend. Rund 1200×800 px für große und 600×400 px für kleine Kacheln wirken gestochen scharf. JPG, PNG, GIF und WEBP werden akzeptiert.

Kann jede Kachel woandershin führen?

Ja — jede Kachel hat ihr eigenes Bild, ihren eigenen Link und einen optionalen Titel und kann auf jede Kategorie, Marke, jedes Produkt oder jede Seite zeigen.

Funktioniert das auch mobil?

Ja. Ein einziges CSS-Grid-Stylesheet führt jedes Layout vom Desktop über ein zweispaltiges Tablet-Raster zur einspaltigen Mobilansicht.

Muss ich mein Theme bearbeiten?

Nein. Das Modul bindet sich bei der Installation in den Hook Home ein. Nutzt Ihr Theme einen eigenen Startseiten-Hook, platzieren Sie es stattdessen mit {widget name='blockpicturecollagepro'}.

Das Raster erscheint nicht auf meiner Startseite — was nun?

Das Status-Panel sagt Ihnen, ob es eingebunden ist, und bietet die Schaltfläche „Auf der Startseite anzeigen“ für einen Klick. Sie können außerdem unter Design → Positionen den Hook displayHome prüfen und das Raster über Ihren Slider schieben.

Kann ich in verschiedenen Shops verschiedene Banner ausspielen?

Ja, das Modul ist multistore-fähig — Banner werden je Shop hochgeladen.

Was passiert mit meinen Bannern bei einem Modul-Update?

Nichts. Ihre Uploads liegen genau deshalb unter libs/custom/ mit eindeutigen Namen, damit kein Update sie durch die mitgelieferten Beispielbilder ersetzen kann.