Portlet Vier Seiten des Produkts

Stand vom 03. März 2025

Auf dieser Seite erfahren Sie alles über das Portlet "Vier Seiten des Produkts" für den OnPage Composer im JTL-Shop.

Mit diesem Portlet können Sie ein Produkt aus verschiedenen Perspektiven präsentieren, um dessen Eigenschaften optimal hervorzuheben. Das Layout bietet vier individuell anpassbare Bereiche, in denen Sie Bilder, Titel, Beschreibungen und Call-to-Action-Buttons einfügen können. So lassen sich Produkte mit mehreren Ansichten und wichtigen Details visuell ansprechend darstellen.

Vier Seiten des Produkts erstellen

Schritt-für-Schritt-Anleitung:

1. Anmeldung im Backend

• Melden Sie sich im Backend Ihres JTL-Shops an und wechseln Sie anschließend ins Frontend.

2. Seite auswählen

• Öffnen Sie die Seite, die Sie bearbeiten möchten.
• Klicken Sie auf das OnPage Composer-Icon oben links auf der Seite, um den OnPage Composer zu starten.

3. Portlet hinzufügen

• Ziehen Sie das Portlet "Vier Seiten des Produkts" an die gewünschte Stelle im OnPage Composer.
• Das Fenster "Vier Seiten des Produkts bearbeiten" öffnet sich.

4. Die vier Bereiche des Portlets konfigurieren

Das Portlet besteht aus vier verschiedenen Bereichen:

• Oben links: Ein einzelnes Produktbild mit Titel und Beschreibung
• Oben rechts: Drei rotierende Bilder mit Titel und Beschreibung
• Unten links: Ein einzelnes Produktbild
• Unten rechts: Ein Produktbild mit Call-to-Action-Button

Jeder Bereich kann individuell gestaltet werden. 

5. Bereich „Oben links“ – Ein einzelnes Bild mit Titel und Beschreibung
Dieser Bereich ist ideal für die Darstellung eines Produkts mit einer kurzen Beschreibung.

• Bild hochladen:
  • Empfohlene Größe: 600 × 600 px
  • Klicken Sie auf "Click to upload", um ein Bild hinzuzufügen.
• Alt-Text eingeben:
  • Hier können Sie eine alternative Beschreibung für das Bild hinzufügen. Diese wird angezeigt, wenn das Bild nicht geladen werden kann, und hilft der Suchmaschinenoptimierung (SEO).
• Titel eingeben:
  • Tragen Sie hier die Hauptüberschrift für das Produkt ein, z. B. den Produktnamen oder ein Werbeversprechen.
• Beschreibung hinzufügen:
  • In diesem Feld können Sie eine kurze Beschreibung des Produkts mit maximal 2 Zeilen und 130 Zeichen eingeben.
• Schriftgrößen anpassen:
  • Wählen Sie eine passende Größe für den Titel (Standard: 24 px) und für die Beschreibung (Standard: 16 px).
• Farben anpassen:
  • Wählen Sie eine geeignete Titel- und Textfarbe, damit der Inhalt auf dem gewählten Hintergrund gut lesbar ist.

6. Bereich „Oben rechts“ – Drei rotierende Bilder mit Beschreibung
In diesem Bereich können bis zu drei Produktbilder nacheinander angezeigt werden.

• Drei Bilder hochladen:
  • Empfohlene Größe: 400 × 300 px pro Bild.
  • Klicken Sie auf "Click to upload" für jedes Bild.
• Alt-Text für jedes Bild eingeben:
  • Geben Sie eine Beschreibung für jedes Bild ein, um die Benutzerfreundlichkeit und SEO zu verbessern.
• Titel und Beschreibung hinzufügen:
  • Fügen Sie einen Titel für diesen Bereich hinzu, z. B. "Verschiedene Blickwinkel".
  • Die Beschreibung sollte maximal 2 Zeilen mit 130 Zeichen enthalten.
• Hintergrundfarbe anpassen:
  • Hier können Sie eine Hintergrundfarbe für diesen Bereich auswählen, um den Bildern mehr Kontrast zu verleihen.
• Schriftgrößen festlegen:
  • Wählen Sie eine geeignete Titel- und Textgröße, um die Lesbarkeit zu optimieren.
• Farben einstellen:
  • Legen Sie fest, welche Farbe der Titel und der Text haben sollen.

7. Bereich „Unten links“ – Ein einzelnes Bild

• Bild hochladen:
  • Klicken Sie auf "Click to upload", um ein Bild hinzuzufügen.
  • Empfohlene Bildgröße: 600 × 600 px.
• Alt-Text eingeben:
  • Geben Sie eine Bildbeschreibung ein, um die Barrierefreiheit und SEO zu verbessern. 

Hier gibt es keinen Titel oder Beschreibungstext, nur ein Bild.

8. Bereich „Unten rechts“ – Produktbild mit Call-to-Action-Button
In diesem Bereich wird ein Produktbild mit einem CTA-Button zur direkten Verlinkung auf eine Produktseite oder eine Angebotsseite dargestellt.

• Bild hochladen:
  • Empfohlene Größe: 600 × 600 px
  • Klicken Sie auf "Click to upload", um ein Bild hinzuzufügen.
• Alt-Text eingeben:
  • Fügen Sie eine alternative Beschreibung für das Bild hinzu.
• Hintergrundfarbe wählen:
  • Hier können Sie die Hintergrundfarbe dieses Bereichs anpassen.
• Titel und Beschreibung hinzufügen:
  • Tragen Sie eine Überschrift und eine kurze Beschreibung (max. 130 Zeichen) ein.
• CTA-Button konfigurieren:
  • Buttontext anpassen:
    • Standardmäßig ist „Jetzt einkaufen“ eingetragen, aber Sie können einen eigenen Text wählen.
  • Link für den Button setzen:
    • Tragen Sie hier die URL der Produktseite oder einer Angebotsseite ein.
  • Button-Farben einstellen:
    • Hier können Sie die Farbe des Button-Textes anpassen, damit dieser gut sichtbar ist.
    • Die Hintergrundfarbe des Buttons kann hier geändert werden, um ihn optisch hervorzuheben.
    • Legen Sie eine Button-Hover-Farbe fest, die sich verändert, wenn der Nutzer mit der Maus darüberfährt.
    • Definieren Sie eine Hintergrundfarbe für den Button im Hover-Zustand, um ihn noch interaktiver zu gestalten.

9. Speichern und veröffentlichen

• Sobald alle Anpassungen vorgenommen wurden, klicken Sie auf "Speichern", um die Änderungen zu übernehmen.
• Das Portlet wird nun auf der gewünschten Seite im OnPage Composer sichtbar.

Das "Vier Seiten des Produkts" Portlet ist eine leistungsstarke Möglichkeit, ein Produkt aus verschiedenen Perspektiven zu präsentieren.

Durch die Kombination aus statischen und rotierenden Bildern, anpassbaren Texten und einem CTA-Button eignet es sich hervorragend für eine professionelle Produktdarstellung in Ihrem JTL-Shop.

Kontaktieren Sie uns jetzt: +49 (0)511 51518510
Oder schreiben Sie uns: info@deinconsultant.de

Oder Senden Sie uns ein Ticket: Ticket einreichen