Beispiel für dyn. Inhalte auf der Startseite

16falsedisclisttrue

Übersicht

Demoshop Shopbereich

Als Beispiel kann folgenden Demoshop angeschaut werden: https://white-label.pd-server.com/

Whitelabel-Demoshop (Stand: 20.08.2025)

Demoshop Administration

Inhaltselemente der Startseite des Shops (Stand: 20.08.2025)

Einstellungsmöglichkeiten

Über die Einstellungen des Addons können unterschiedliche Inhaltsbereiche angepasst werden:

  • Startseite

  • Header / Footer

  • Position auf der Startseite (externe Systeme)

Die Sortierung der einzelnen Elemente entspricht der Ausgabereihenfolge im Shopbereich.

Beispiel-Startseite

Wir möchten nun die Startseite entsprechend umgestalten bzw. mit individuellen Inhalten befüllen.

Neues Inhaltselement anlegen

Hierzu legen wir zuerst ein neues Element an, in dem wir auf “Inhalt hinzufügen” klicken.

Nachdem man auf “Inhalt hinzufügen” geklickt hat, erscheint ein Modal

Diesem Element geben wir einen Namen und eine Sortierung, so dass für alle anderen Benutzer verständlich wird, wofür das Inhaltselement verwendet wurde.

Inhaltselement mit Daten befüllen

Wir möchten auf der Startseite ganz oben unter der Navigation ein zweispaltiges Layout anlegen.
In der linken Spalte soll Text und Bild ausgegeben werden, in der rechten Spalte ein Text und eine Aufzählung.

So soll es hinterher aussehen.

Konfiguration des Elements

Einstellungen für das Element

Folgende Einstellungen werden verwendet:

  • Status: Aktiv (damit es angezeigt wird)

  • Sortierung: 50 (oder eine beliebige andere Sortierung, je nach gewünschter Position)

  • Name: “Willkommen im Whitelabel-Marketingportal” (Überschrift in blau über dem eigentlichen Inhalt)

  • Name ausblenden: Nein (Name soll angezeigt werden)

  • Beschreibung: HTML-Code optional HTMLmit Inline-CSS (siehe unten)

  • Typ: Inhalt

  • Benutzergruppen: Wer darf es sehen (Mehrfachauswahl möglich)?

“Typ: Inhalt” verwenden wir, damit eine reine Ausgabe der “Beschreibung” stattfindet.

Weitere Inhaltstypen

  • Artikel

    • Raster - Kachelansicht

    • Raster (erweitert) - alternative Kachelansicht

    • Inhalt - Erzeugt Inhaltsbereicht mit Artikel

    • Slider - Erzeugt Artikelslider (Informationen müssen in Artikel hinterlegt werden)

  • Warengruppen

    • Raster - Kachelansicht

    • Raster (erweitert) - alternative Kachelansicht

    • Inhalt - Erzeugt Inhaltsbereicht mit Waregruppen

    • Slider - Erzeugt Warengruppenslider (Informationen müssen in Warengruppen hinterlegt werden)

In beiden Fällen müssen Artikel bzw. Warengruppen manuell ausgewählt werden:

Zugewiesene Warengruppen für einen eigenen Slider

HTML- und CSS-Code erzeugen

Im Beispiel haben wir folgenden HTML-Code über die Quellcode-Ansicht eingefügt

Quellcodeansicht aktivieren

HTML Code für zwei Spalten mit Inhalt

html

Das Portal wurde speziell entwickelt, um Ihre tägliche Arbeit zu erleichtern:

Mit wenigen Klicks können Sie Produkte auswählen. Personalisieren Ihr Wunschprodukt (optional) mit Ihren persönlichen Daten und Informationen. Im Anschluss können Sie es in den Warenkorb legen und Ihre Bestellung abschließen.

Ihre Vorteile:

  • Zugriff nur für Mitarbeitende: Geschützte, unternehmensinterne Nutzung.
  • Schnelle Bestellungen: Intuitive Navigation und benutzerfreundliches Design.
  • Transparenz: Einsicht in den Bestellstatus und Ihre Bestellhistorie.
  • Starten Sie jetzt und entdecken Sie, wie einfach Beschaffung sein kann!
]]>

Der CSS-Code wurde in einer separaten CSS-Datei in den Template-Einstellungen hinterlegt

css

Dieser Code wurde vollständig von Chat-GPT generiert:

note

Bitte erstelle mir einen HTML-Code für ein zweispaltiges Layout passendem CSS-Code. Achte darauf, dass es responsiv ist. Im linken Bereich soll es einen Text geben, darunter ein Bild, im rechten Bereich gibt es nur Text.

Bitte erstelle mir einen HTML-Code für ein zweispaltiges Layout passendem CSS-Code. Achte darauf, dass es responsiv ist. Im linken Bereich soll es einen Text geben, darunter ein Bild, im rechten Bereich gibt es nur Text.

Produktbilder und weitere Grafiken

Wenn kein Fotostudio oder eine firmeninterne Produktbilddatenbank vorhanden ist, empfiehlt sich beispielsweise in Portal wie https://elements.envato.com/de/curated

Bei Envato Elements kann man einen “Produkt X Mockup” suchen und erhält hochauflösende Grafikvorlagen, die sich in Adobe Photoshop anpassen lassen.

Screenshot (20.08.2025): Envato Elements, Suchbegriff: “Visitenkarte Mockup”

Neben kostenpflichtigen Portalen wie Envato gibt es auch viele andere, zum Teil kostenfreie Portale wie z. B. https://www.mockupworld.co/ oder man lässt diese über eine Bild-KI generieren. Dabei bitte immer Lizenz- und Nutzungsbedinungen beachten!