Portlet Bild/Video/Text

Stand vom 03. März 2025

Auf dieser Seite erfahren Sie alles über das Portlet "Bild/Video Text" für den OnPage Composer im JTL-Shop.

Mit diesem Portlet können Sie Bilder oder Videos mit einer individuellen Beschreibung und einem Call-to-Action-Button auf Ihrer Seite platzieren. Dadurch lassen sich Produkte, Dienstleistungen oder Werbebotschaften ansprechend präsentieren und gezielt hervorheben.

Das Portlet bietet eine flexible Gestaltung, da Sie entweder ein statisches Bild oder ein eingebettetes Video (z. B. von YouTube) verwenden können. Zudem können Sie Texte, Buttons und Farben nach Ihren Wünschen anpassen, um eine optimale Integration in Ihr Shop-Design zu gewährleisten.

Bild/Video/Text 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 "Bild/Video Text" an die gewünschte Stelle auf Ihrer Seite.
• Das Fenster "Bild/Video Text bearbeiten" öffnet sich.

4. Bild einfügen und konfigurieren
Falls Sie ein Bild anstelle eines Videos verwenden möchten, können Sie hier die notwendigen Einstellungen vornehmen.

• Bild hochladen
  • Klicken Sie auf "Click to Upload", um ein Bild hinzuzufügen.
  • Die empfohlene Bildgröße beträgt 300 × 300 px.
• Alt-Text eingeben
  • Tragen Sie eine alternative Beschreibung für das Bild ein, um die Suchmaschinenoptimierung (SEO) und die Barrierefreiheit zu verbessern.
• Haupttitel hinzufügen
  • Geben Sie eine Überschrift für das Bild oder das Video ein.
• Beschreibung hinzufügen
  • In diesem Feld können Sie einen ausführlicheren Beschreibungstext einfügen. Die Länge sollte zwischen 3 und 10 Zeilen liegen.
• Buttontext festlegen
  • Hier können Sie den Text des Call-to-Action-Buttons anpassen (z. B. „Jetzt einkaufen“ oder „Mehr erfahren“).
• Link setzen
  • Tragen Sie hier die URL der Seite ein, auf die der Button verweisen soll.

5. Video einfügen und konfigurieren
Falls Sie anstelle eines Bildes ein Video einfügen möchten, können Sie ein YouTube-Video in das Portlet einbetten.

• Quelle auswählen
  • Wählen Sie YouTube als Quelle.
• Video-ID eingeben
  • Kopieren Sie den letzten Teil der YouTube-URL (nach ?v=) und fügen Sie ihn in das Feld Video ID / Video URL ein.
  • Beispiel: Für https://www.youtube.com/watch?v=xITQHgJ3RRo ist die Video-ID xITQHgJ3RRo.
• Start- und Endzeit definieren (optional)
  • Falls das Video nicht von Anfang an abgespielt werden soll, können Sie hier eine Startzeit (in Sekunden) festlegen.
  • Ebenso kann eine Endzeit gesetzt werden, um das Video an einer bestimmten Stelle zu stoppen.
• Steuerungselemente einblenden oder ausblenden
  • Wählen Sie, ob die Videosteuerung sichtbar sein soll (Ja/Nein).
• Ähnliche Videos anzeigen oder deaktivieren
  • Entscheiden Sie, ob nach dem Video ähnliche YouTube-Videos vorgeschlagen werden sollen.
• Farbe für den Videoplayer auswählen
  • Hier können Sie die Farbe für den YouTube-Player festlegen (z. B. weiß oder rot).
• Playlist hinzufügen (optional)
  • Falls das Video Teil einer YouTube-Playlist ist, können Sie hier die Playlist-ID eingeben.

6. Text- und Farbgestaltung anpassen
Um das Erscheinungsbild des Portlets an Ihre Webseite anzupassen, können Sie folgende Einstellungen vornehmen:

• Schriftgrößen anpassen
  • Titelgröße: Hier können Sie die Größe der Überschrift festlegen (Standard: 24 px).
  • Textgröße: Wählen Sie die Größe für den Beschreibungstext (Standard: 16 px).
• Textfarben anpassen
  • Titel-Textfarbe: Bestimmen Sie die Farbe der Überschrift.
  • Textfarbe: Wählen Sie eine passende Farbe für die Beschreibung.
• Button-Farben anpassen
  • Hier können Sie die Hintergrundfarbe des Buttons einstellen, um ihn optisch hervorzuheben.
  • Legen Sie eine Farbe für den Button-Text fest, damit dieser gut sichtbar ist.
  • Wählen Sie eine Hover-Farbe für den Button, damit sich das Design verändert, wenn der Nutzer mit der Maus darüberfährt.
  • Definieren Sie eine Hover-Textfarbe für den Button, damit sich auch der Button-Text bei einer Interaktion anpasst.

7. Speichern und veröffentlichen

• Sobald alle Einstellungen 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 "Bild/Video Text" Portlet ist eine vielseitige Möglichkeit, Bilder oder Videos mit begleitendem Text und Call-to-Action-Button in Ihren JTL-Shop zu integrieren. Durch die umfangreichen Anpassungsmöglichkeiten können Sie Ihre Inhalte optimal an Ihr Design anpassen und gezielt Kunden ansprechen.

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

Oder Senden Sie uns ein Ticket: Ticket einreichen