Portlet Hauptprodukt Slider

Stand vom 27. Februar 2025

Auf dieser Seite finden Sie einen umfassenden Überblick über die Möglichkeiten des DC-Portlets: Portlet Hauptprodukt Slider für den OnPage Composer des JTL-Shops.

Mit diesem Portlet können Sie ein ansprechendes Produktbanner mit zwei Bildern erstellen: ein Bild im Vordergrund und ein weiteres im Hintergrund. Zudem können Sie einen Call-to-Action-Button einfügen. Das Banner zeigt einen Titel, einen Button, eine kurze Beschreibung und den Preis des Produkts an. Sie können Ihre Artikelnummer eingeben, wodurch automatisch der Haupttitel und der Link für den Button eingefügt werden. Der Link ist direkt mit der Artikelseite verbunden. Außerdem können Sie in diesem Portlet mehrere Banner erstellen.

Hauptprodukt Slider 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, und 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 "Hauptprodukt Slider" im OnPage Composer an die gewünschte Stelle auf Ihrer Seite. Es öffnet sich das Fenster "Hauptprodukt Slider bearbeiten".

4. Bilder hochladen:

• Klicken Sie auf "Click to Upload". Es öffnet sich ein Dialogfenster, in dem Sie alle bisher hochgeladenen Mediendateien für den OnPage Composer finden.
• Ziehen Sie die gewünschte Bilddatei per Drag & Drop in das Fenster oder klicken Sie mit der rechten Maustaste in das Fenster und wählen Sie "Datei hochladen". Navigieren Sie zur Datei und wählen Sie diese aus.

5. Alternativtext hinzufügen:

• Geben Sie einen Alternativtext (Alt-Text) für das hochgeladene Bild ein. Dieser Text wird von Suchmaschinen interpretiert und hilft bei der Barrierefreiheit.

6. Bilder und Texte konfigurieren:

• Wählen Sie die Bildausrichtung und geben Sie den Titel sowie die Beschreibung ein.

7. Preis eingeben:

• Geben Sie den Preis für den im Portlet dargestellten Artikel ein.

8. Button-Text eingeben:

• Geben Sie den Text ein, der im Button angezeigt wird.

9. Farbeinstellungen vornehmen:

• Wählen Sie die Textfarbe und die Hintergrundfarbe aus.

10. Button-Link hinzufügen:

• Geben Sie unter "Button Link" den URL-Link für die Seite ein, die Sie mit dem Button verlinken möchten.

11. Weitere Farbeinstellungen:

• Wählen Sie die Textfarbe und die Hover-Textfarbe des Buttons.
• Wählen Sie die Hintergrundfarbe und die Hover-Hintergrundfarbe des Buttons. Diese Farbe wird angezeigt, wenn der Mauszeiger über den Button bewegt wird.

12. Weitere Slider hinzufügen:

• Mit dem Plussymbol können Sie die erforderliche Anzahl an Slidern hinzufügen.

13. Slider-Optionen konfigurieren:

• Slider-Navigation & Pfeile: Aktiviere die Navigation und bestimme, ob große Pfeile verwendet werden sollen. Du kannst die Farben für Pfeile (links/rechts) sowie deren Hover-Effekte anpassen.
• Autoplay & Wiederholung: Lasse den Slider automatisch ablaufen und optional endlos wiederholen.
• Navigationspunkte: Falls gewünscht, kannst du Navigationspunkte unter dem Slider aktivieren und ihre Farbe anpassen.

14. Einstellungen speichern:

• Speichern Sie Ihre Einstellungen, um die Änderungen zu übernehmen.

Mit diesen Schritten haben Sie erfolgreich einen Hauptprodukt Slider erstellt, der Ihre Produkte ansprechend präsentiert und die Aufmerksamkeit der Kunden auf Ihr Angebot lenkt. Nutzen Sie die verschiedenen Anpassungsmöglichkeiten, um das Portlet optimal an das Design Ihres Shops und die Bedürfnisse Ihrer Kunden anzupassen.

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

Oder Senden Sie uns ein Ticket: Ticket einreichen