Diese Anleitung beschreibt den Funktionsumfang und die Bedienung des Plugins KK Portlets. Die Dokumentation richtet sich an Shopbetreiber für die tägliche Arbeit im OnPage Composer (dem visuellen Seiteneditor des Shops) sowie an Techniker und Dienstleister, die komplexe Layouts für Kunden umsetzen.

1. Installation und Einrichtung

Die Inbetriebnahme des Plugins folgt dem Standardprozess für JTL Shop Erweiterungen und erfordert keine tiefergehenden Programmierkenntnisse.

Systemanforderungen

Für eine fehlerfreie Funktion wird ein JTL Shop ab der Version 5.4.0 vorausgesetzt. Das Plugin ist speziell für die Nutzung mit dem OnPage Composer optimiert worden.

Plugin Installation

Laden Sie das Plugin Paket über die Plugin Verwaltung im JTL Shop Backend hoch. Nach dem erfolgreichen Hochladen erscheint der Eintrag KK Portlets in der Liste der verfügbaren Plugins. Klicken Sie auf die Schaltfläche Installieren und aktivieren Sie das Plugin im Anschluss. Damit stehen alle enthaltenen Portlets sowie die speziellen Eingabetypen sofort zur Verfügung.

Verfügbarkeit der Vorlagen

Ein großer Vorteil dieses Plugins ist die nahtlose Integration der 16 mitgelieferten Layout Vorlagen. Sobald das Plugin installiert und aktiviert ist, werden diese Blueprints vollautomatisch in Ihren Shop geladen. Sie müssen keine Dateien manuell importieren. Öffnen Sie einfach den OnPage Composer im Frontend, wechseln Sie in der Seitenleiste zum Reiter für Vorlagen und ziehen Sie das gewünschte Layout bequem per Drag and Drop auf Ihre Seite.

Initiale Konfiguration

Nach der ersten Installation sowie nach jeder manuellen Anpassung des Stylings durch einen Techniker wird empfohlen, die SCSS Kompilierung durchzuführen. Navigieren Sie hierzu im Backend zum Plugin Menü und wählen Sie den Punkt SCSS kompilieren aus. Dieser Vorgang stellt sicher, dass alle Designvorgaben effizient in das CSS Ihres Shops übertragen werden.

Nutzung der Portlets

Die neuen Elemente finden Sie im OnPage Composer in einer eigenen Gruppe mit der Bezeichnung kreativkarussell Portlets. Sie können diese wie gewohnt in Ihre Zeilen und Spalten ziehen und über das Einstellungsmenü konfigurieren. Bei Portlets mit Zeitsteuerung oder Kundengruppenprüfung wie dem Banner oder dem Slider greifen diese Regeln sofort nach dem Speichern der Seite im Frontend.

2. Strategischer Mehrwert

Die Portlets wurden entwickelt, um über die Standardfunktionen des JTL Shops hinauszugehen. Der Fokus liegt auf drei Kernbereichen für Ihren Erfolg im Onlinehandel.

• SEO Effizienz (Suchmaschinenoptimierung) Absolute Trennung von technischer Überschriften Gewichtung und optischem Design.
• Zeitmanagement Automatisierung von Inhalten durch präzise Datumssteuerungen und Uhrzeitsteuerungen.
• Conversion Optimierung Einsatz von psychologischen Triggern wie Countdowns, Hotspots und smarten Popups.

3. Die Portlets im Detail

Hier finden Sie alle eigenständigen Bausteine, die Sie frei auf Ihren Seiten platzieren können. Zu jedem Element finden Sie konkrete Anwendungsbeispiele für den Alltag.

Grid Layout

Das Fundament für den Seitenaufbau. Unterteilt die Seite in wählbare Spaltenverhältnisse und sichert die korrekte Darstellung auf dem Smartphone. Techniker können exakt steuern, wie die Spalten auf mobilen Geräten umbrechen.

• Anwendungsbeispiele: Klassische Aufteilung für Ratgeberseiten mit Textbereich und Marginalspalte oder die saubere, einreihige Anordnung einer Fotogalerie auf einer Landingpage.

Container

Dient als Rahmen für andere Elemente. Er ermöglicht die Steuerung von Außenabständen und Innenabständen sowie die Aktivierung von Einblendanimationen beim Herunterscrollen.

• Anwendungsbeispiele: Erstellung eines schmalen, zentrierten Inhaltsbereichs für eine Über uns Story oder die Nutzung eines vollflächigen, farbigen Hintergrunds zur optischen Abgrenzung eines Werbevideos.

Akkordeon

Strukturiert Informationen in aufklappbaren Textblöcken. Jeder dieser Blöcke ist eine eigene Dropzone, in die weitere Elemente gezogen werden können. Das spart enorm viel Platz auf Mobilgeräten. Suchmaschinen können den gesamten Text lesen, während der Nutzer nur das aufklappt, was ihn interessiert.

• Anwendungsbeispiele: Platzsparende Unterbringung von technischen Datenblättern am Ende einer Produktbeschreibung oder die Integration eines aufklappbaren Inhaltsverzeichnisses am Anfang langer Blogbeiträge.

Banner und CTA (Call to Action / Handlungsaufforderung)

Auffällige Werbeflächen für Bilder, Videos oder Freisteller kombiniert mit Text. Sie bieten eine integrierte Zeitsteuerung. Sie bestimmen auf die Minute genau, wann ein Banner erscheint und wieder verschwindet. Ebenso können B2B Kunden (Geschäftskunden) gezielt von der Anzeige ausgeschlossen werden.

• Anwendungsbeispiele: Automatisches Einblenden eines Wochenend Rabattbanners oder die Platzierung eines großflächigen Buttons am Ende eines Ratgebers zur direkten Weiterleitung in die passende Produktkategorie.

Markenkollektion

Kachelansicht zur Präsentation von Logos oder Herstellern in verschiedenen wählbaren Größen. Das schafft sofortiges Vertrauen beim Kunden durch die visuelle Präsenz bekannter Marken.

• Anwendungsbeispiele: Integration einer Logo Galerie im Footer für Premium Partner oder eine vertrauensbildende Übersicht aller Zahlungsmethoden und Versanddienstleister im Bestellprozess.

Hotspot Slider

Ein Bildslider, auf dem Sie interaktive Punkte platzieren können. Bei Berührung oder Klick öffnen sich weitere Informationen oder direkte Links. Das verkürzt den Weg zur Kaufentscheidung enorm, da Kunden nicht erst nach den abgebildeten Artikeln suchen müssen.

• Anwendungsbeispiele: Ein Shop the Look Bild eines Wohnzimmers mit direkt verlinkten Artikeln oder eine technische Explosionszeichnung, bei der die Klickpunkte Erklärungen zu den einzelnen Bauteilen öffnen.

Smartes Popup

Ein intelligentes Einblendfenster für besondere Aktionen. Es speichert die Interaktion im Browser des Kunden. Das Popup stört nicht bei jedem Seitenaufruf, sondern verbleibt nach dem aktiven Wegklicken dezent als kleiner Button am Bildschirmrand.

• Anwendungsbeispiele: Einblendung eines Gutscheincodes für die Newsletter Anmeldung, der beim Checkout wieder aufrufbar bleibt, oder dezente Hinweise auf geänderte Öffnungszeiten, die nach dem Wegklicken als Infoblase verbleiben.

Produkt Stream

Dynamische Artikelausgabe als Slider oder Raster. Produkte werden über Filter oder manuell über die Suchfunktion ausgewählt. Das bietet eine automatisierte Aktualität. Wenn ein Artikel ausverkauft ist, rutscht automatisch der nächste Artikel nach.

• Anwendungsbeispiele: Automatisierte Präsentation von passendem Zubehör auf einer Kategorieseite oder ein sich selbst aktualisierender Slider mit reduzierten Artikeln im Sale Bereich.

Text und Media

Das ultimative Werkzeug für emotionales Storytelling. Kombiniert Text mit Bildern oder Videos in unzähligen Variationen. Unterstützt Video Modals. Bei Klick auf einen Play Button öffnet sich das Video in einem großen abgedunkelten Fenster. Dekorative Zusatzelemente wie schwebende Badges werten das Design zusätzlich auf.

• Anwendungsbeispiele: Präsentation eines Premium Artikels mit Text und atmosphärischem Video oder die Vorstellung der Unternehmensgeschichte mit einladendem Text und einem nostalgischen Gründerfoto.

Störer und Störer für Produktauflistung

Ein extrem aufmerksamkeitsstarkes Element, das den normalen Lesefluss unterbricht. Es kombiniert ein Hintergrundbild mit einem freigestellten Bild, das optisch aus dem Rahmen herausragen kann. Spezialisierte Varianten binden direkt das Newsletter Formular ein oder bewerben das Produkt des Monats.

• Anwendungsbeispiele: Prominente Platzierung der Newsletter Box über dem Footer zur Steigerung der Konversionsrate oder die Hervorhebung des Rezepts des Monats, bei dem das fertige Gericht optisch über den Kastenrand hinausragt.

Zitat

Ein elegantes, minimalistisches Element zur Darstellung von Kundenbewertungen oder wichtigen Leitsätzen.

• Anwendungsbeispiele: Einstreuen echter Kundenstimmen auf Kategorieseiten zur Vertrauensgewinnung oder die prominente, zentrierte Platzierung des Leitbildes der Geschäftsführung auf der Startseite.

Text mit Überzeile und Text in Spalten

Spezialisierte Bausteine für Sektionsüberschriften und gut lesbare Fließtexte. Mit Text in Spalten teilen Sie Inhalte direkt in zwei übersichtliche Blöcke nebeneinander.

• Anwendungsbeispiele: Einleitung einer neuen Inhaltsseite mit einer Überzeile oder eine übersichtliche Gegenüberstellung von Vorteilen und Nachteilen beziehungsweise Inhaltsstoffen und Anwendungsempfehlungen in zwei Spalten.

Galerie und Video

Stellen Sie mehrere Bilder in einer interaktiven Lightbox dar oder binden Sie Videos nahtlos ein.

• Anwendungsbeispiele: Einbindung eines lautlosen Hintergrundvideos für emotionale Stimmung oder ein digitales Lookbook für Bekleidung mit hochauflösenden Detailaufnahmen in der Lightbox.

Repeater

Ein hochkomplexes Strukturwerkzeug für Techniker und fortgeschrittene Anwender. Es ermöglicht die Erstellung von beliebig tief verschachtelten Inhalten.

• Anwendungsbeispiele: Aufbau völlig freier Kampagnenstrukturen für individuelle Designwünsche oder die Erstellung einer mehrstufigen Timeline zur Unternehmenshistorie mit verschachtelten Galerien.

4. Die Blueprints im Alltag

Blueprints sind fertige Vorlagen, in denen die oben genannten Portlets bereits professionell kombiniert wurden. Sie ziehen diese einfach auf die Seite und tauschen nur noch Texte und Bilder aus.

Vorlage FAQ (Frequently Asked Questions / Häufig gestellte Fragen)

Ein fertiger Bereich für Kundenfragen inklusive Kontaktbox. Spart enorm viel Zeit beim Aufbau von Serviceseiten.

• Anwendungsbeispiele: Einbindung auf der Kontaktseite zum Abfangen häufiger Rückfragen zu Lieferzeiten oder die Platzierung unter erklärungsbedürftigen Produkten zur Klärung technischer Details.

Vorlage Features List

Eine horizontale Leiste mit vier Icons und kurzen Textzeilen. Kommuniziert die Kernversprechen Ihres Shops auf einen Blick.

• Anwendungsbeispiele: Kommunikation von Kernversprechen wie kostenlosem Versand unter dem Hauptbanner oder die Darstellung wichtiger Qualitätssiegel im Bestellprozess.

Vorlage Preistabellen

Farbige Boxen, die nebeneinanderstehen und Preise sowie Leistungen vergleichen. Macht komplexe Dienstleistungen sofort greifbar.

• Anwendungsbeispiele: Gegenüberstellung von Servicepaketen wie Basis Wartung und Premium Pflege oder die transparente Darstellung gestaffelter Versandkosten.

Vorlage Team Sektion

Ein professionelles Raster für Mitarbeiterprofile mit Bild, Position und Aufgabenbereich. Gibt dem Onlineshop ein Gesicht und schafft eine persönliche Bindung zum Käufer.

• Anwendungsbeispiele: Vorstellung der Geschäftsführung auf der Über uns Seite oder die Präsentation spezieller Ansprechpartner für den Großhandel im B2B Bereich.

Vorlage Produktvorstellung Kampagne

Eine riesige Premium Vorlage, die Parallax Effekte, interaktive Karten und Countdowns kombiniert. Die perfekte Landingpage für Produkteinführungen ohne großen Programmieraufwand.

• Anwendungsbeispiele: Interaktiver Verkaufsstart eines exklusiven Artikels mit Countdown oder die Ankündigung eines Firmenjubiläums mit Timer für Rabattaktionen.

Vorlage Animierter Newsfeed

Inhaltsboxen, die erst beim Herunterscrollen elegant in den Bildschirmbereich fliegen. Bricht statische Textwüsten auf und hält den Nutzer beim Lesen bei Laune.

• Anwendungsbeispiele: Visuell ansprechende Präsentation der letzten Blogbeiträge auf der Startseite oder einweichend einfliegende Pressemitteilungen beim Scrollen.

5. Wichtige Hinweise für Techniker

Das Plugin bietet für Agenturen und Entwickler erweiterte Möglichkeiten zur Performance Optimierung.

SCSS Kompilierung (Design Formatierungssprache)

In den Plugin Einstellungen des Backends finden Sie den Bereich zum Kompilieren. Eigene SCSS Anpassungen für Kundenprojekte können hierüber direkt in performantes CSS übersetzt werden. Dies garantiert blitzschnelle Ladezeiten im Frontend, da keine unnötigen Stylesheets geladen werden.

Responsive Design und Asset Management

Alle Portlets verfügen über granulare Einstellungen für mobile Endgeräte. Externe Bibliotheken wie Slider oder Animationen werden nur dann in den Quelltext geladen, wenn sie auf der jeweiligen Seite auch tatsächlich zum Einsatz kommen. So wird konsequent vermieden, dass nicht genutzte Skripte die Ladezeit anderer Shop Seiten unnötig belasten, wodurch die Performance Ihres Shops sauber erhalten bleibt.