Portlet Highlight

Stand vom 03. März 2025

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

Mit diesem Portlet können Sie besondere Produkte, Aktionen oder Inhalte gezielt in den Mittelpunkt stellen. Es kombiniert Text, Bilder, Slider und Videos, um eine ansprechende visuelle Präsentation zu ermöglichen. Zudem bietet es einen Call-to-Action-Button, der Kunden direkt auf eine Angebots- oder Produktseite weiterleitet.

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

4. Allgemeine Einstellungen vornehmen

In diesem Bereich können Sie die grundlegenden Inhalte des Portlets festlegen.

• Titel eingeben
  • Hier können Sie eine aussagekräftige Überschrift setzen, z. B. „Hit der Woche“ oder „Top-Angebot“.
• Text hinzufügen
  • Fügen Sie eine kurze Beschreibung hinzu, um den Besuchern mehr Informationen zum Highlight zu geben.
• Farben anpassen
  • Titel-Textfarbe: Wählen Sie eine passende Farbe für den Titeltext.
  • Textfarbe: Legen Sie die Farbe für den Beschreibungstext fest.
• Buttontext und Link setzen
  • Geben Sie den Buttontext ein, z. B. „Jetzt kaufen“ oder „Mehr erfahren“.
  • Tragen Sie den Buttonlink ein, der zur gewünschten Seite führt.
• 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.

5. Slider einfügen und konfigurieren

Falls Sie mehrere Bilder als Highlight präsentieren möchten, können Sie einen Slider aktivieren.

• Bild hochladen
  • Klicken Sie auf "Click to Upload", um Bilder in den Slider einzufügen.
  • Die empfohlene Bildgröße beträgt 800 × 600 px.
• Alt-Text für Bilder eingeben
  • Tragen Sie eine alternative Beschreibung für die Bilder ein, um die Suchmaschinenoptimierung (SEO) und die Barrierefreiheit zu verbessern.
• Slider-Einstellungen anpassen
  • Slider automatisch wiederholen: Aktivieren Sie diese Option, wenn der Slider in einer Endlosschleife laufen soll.
  • Autoplay: Der Slider startet automatisch, sobald die Seite geladen wird.
  • Geschwindigkeit (msec): Definieren Sie, wie schnell der Slider zwischen den Bildern wechselt (z. B. 300 ms).
  • Automatisches Abspielen (msec): Stellen Sie ein, wie lange ein Bild angezeigt wird, bevor es zum nächsten wechselt (z. B. 5000 ms).
  • Steuerelemente aktivieren:
    • Punkte: Zeigt Navigationspunkte für die Sliderbilder an.
    • Unendlich: Aktivieren, wenn der Slider ohne Pause endlos läuft.
    • Pfeile: Fügt Pfeile hinzu, mit denen Nutzer zwischen den Bildern wechseln können.

6. Video einfügen und konfigurieren

Falls Sie anstelle von Bildern ein Video präsentieren möchten, können Sie ein YouTube-Video einbinden.

• Quelle auswählen
  • Wählen Sie YouTube als Quelle für das Video.
• 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.

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 "Highlight" Portlet ist eine vielseitige Möglichkeit, besondere Produkte oder Aktionen in den Fokus zu rücken. Mit den umfangreichen Gestaltungsmöglichkeiten für Text, Bilder, Slider und Videos können Sie Ihre Inhalte gezielt hervorheben und die Aufmerksamkeit Ihrer Kunden steigern.

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

Oder Senden Sie uns ein Ticket: Ticket einreichen