🔍 Übersicht
Der Listing Designer in 3Dsellers ist ein visueller Editor zum Anpassen bestehender Listing-Vorlagen. Nutzer wählen zunächst eine vorgefertigte Vorlage, die anschließend vollständig per Drag-and-Drop im WYSIWYG-Editor (What You See Is What You Get) angepasst werden kann.
Die andere Alternative zur Nutzung einer vorgefertigten visuellen Vorlage ist das Erstellen einer Custom HTML/CSS template, die für fortgeschrittene Nutzer gedacht ist, die volle Kontrolle auf Code-Ebene bevorzugen.
Mit dem Listing Designer können Sie professionell gestaltete Vorlagen schnell an Ihre Marke anpassen, während Produktdaten wie Titel, Beschreibungen, Bilder und Preise automatisch übernommen werden.
⭐ Vorteile der Nutzung des Listing Designer
🎨 Visuelle Anpassung – Vorlagen visuell bearbeiten und Änderungen in Echtzeit sehen
🖱️ Drag-and-Drop-Bearbeitung – Kein HTML oder CSS für visuelle Vorlagen nötig
🔁 Wiederverwendbare Vorlagen – Einmal anpassen, für viele Produkte wiederverwenden
🔄 Dynamische Inhalte – Listings füllen sich automatisch über Produkt-Platzhalter
📱 Responsive Layouts – Optimiert für Desktop und Mobilgeräte
🖼️ Umfangreiche Medienunterstützung – Bilder, Galerien und Videos
🏆 Professionelle Designs – Gestaltet, um Vertrauen und Conversions zu steigern
⏱️ Schnellere Einrichtung – Start mit bewährten Layouts statt einer leeren Fläche
🚪 Zugriff auf den Listing Designer
So verwenden Sie den Listing Designer:
Melden Sie sich bei Ihrem 3Dsellers-Konto an
Gehen Sie zu Listing Designer → Templates
Wählen Sie eine der vorgefertigten Vorlagen
Klicken Sie auf Customize, um sie im visuellen Editor zu öffnen
Der Editor öffnet sich mit der bereits geladenen ausgewählten Vorlage, bereit zur Anpassung.
ℹ️ Wichtig:
Der visuelle Editor startet immer mit einer vorgefertigten Vorlage
Wenn Sie ein komplett individuelles Layout von Grund auf benötigen, nutzen Sie stattdessen die Option Custom HTML Template
🧭 Die Listing-Designer-Oberfläche verstehen
Der Editor ist in zwei Hauptbereiche unterteilt:
🖥️ Central Canvas (Design Area)
Hier passen Sie die ausgewählte Vorlage an:
⬅️ Return Back – Editor verlassen
💾 Action Buttons – Cancel, Save Template, Preview
🧱 Design Canvas – Bestehende Abschnitte bearbeiten und neu anordnen
↩️↪️ View Controls – Undo/Redo sowie Desktop-/Mobile-Vorschau
🧰 Right Sidebar (Design Elements)
Die rechte Seitenleiste enthält Elemente, die Sie per Drag-and-Drop zur Vorlage hinzufügen oder darin ändern können:
📦 Content – Zentrale Design-Elemente
🧩 Blocks – Vorgefertigte Layout-Abschnitte
🎨 Body – Globales Styling
🖼️ Images – Bild-Uploads und -Verwaltung
✅ Audit – Validierung und Fehlerprüfung
🔗 Placeholders – Dynamische Produktdatenfelder
📌 Items – Artikelspezifische Einstellungen
🧱 Verfügbare Design-Elemente
📐 Layout-Elemente
COLUMNS – Mehrspaltige Layouts
HEADER – Branding- oder Navigationsbereiche
RECTANGLE – Hintergründe oder visuelle Blöcke
DIVIDER – Abschnittstrenner
✏️ Content-Elemente
HEADING – Titel und Abschnittsüberschriften
PARAGRAPH – Textinhalte
HTML – Individuelles HTML (innerhalb visueller Vorlagen)
🔘 Interaktive Elemente
BUTTON – Calls-to-Action
NAVIGATION – Kategoriemenüs oder Links
TABS – Inhaltsbereiche mit Tabs
🖼️ Medien-Elemente
IMAGE – Einzelbilder
GALLERY – Bildersammlungen
VIDEO – Eingebettete Produktvideos
📊 Daten-Elemente
TABLE – Spezifikationen oder strukturierte Daten
🔗 Dynamische Platzhalter verwenden
Platzhalter füllen Ihr Listing automatisch mit Produktdaten.
📌 Häufige Platzhalter
{title}– Produkttitel{description}– Produktbeschreibung{images}– Produktbilder und -videos{price}– Produktpreis{sku}– SKU{brand}– Markenname{category}– Kategorie
⚠️ Platzhalter unterscheiden zwischen Groß- und Kleinschreibung und müssen genau dem Tab Placeholders entsprechen.
⚡ Start mit vorgefertigten Vorlagen (erforderlich für visuelles Bearbeiten)
Alle visuellen Listings in 3Dsellers starten mit einer vorgefertigten Vorlage.
🧭 So funktioniert es
Durchsuchen Sie Vorlagen nach Kategorie (Jewelry, Tech, Fashion, Basic usw.)
Wählen Sie eine Vorlage, die zu Ihrem Produkttyp passt
Klicken Sie auf Customize
Bearbeiten Sie Layout, Farben, Text, Bilder und Buttons
Speichern Sie die angepasste Vorlage zur Wiederverwendung
Sie starten nie mit einer leeren Fläche — jede Vorlage bietet eine strukturierte, marktplatzoptimierte Grundlage.
🧩 Blöcke bearbeiten und die rechte Seitenleiste nutzen
Jeder Abschnitt einer Listing-Vorlage besteht aus einzelnen Blöcken (wie Headern, Bildern, Beschreibungen, Richtlinien und Featured Products).
Wenn Sie auf einen beliebigen Block im Design Canvas klicken, aktualisiert sich die rechte Seitenleiste automatisch und zeigt die spezifischen Einstellungen für diesen Block. So können Sie jeden Abschnitt unabhängig anpassen, ohne den Rest der Vorlage zu beeinflussen.
🔄 So funktioniert es
Klicken Sie auf einen Block im Canvas
Der Block wird ausgewählt
Die rechte Seitenleiste aktualisiert sich mit den Einstellungen dieses Blocks
Passen Sie Layout, Stil, Inhalt oder Verhalten an
🧱 Häufige Beispiele
🧭 Header / Navigation – Menü-Layout, Farben, Abstände, Verhalten auf Mobilgeräten
🖼️ Images & Galleries – Galerietyp, Vorschaubilder, Video-Unterstützung
✏️ Description / Text – Platzhalter, Hintergrund, Abstände
📑 Policies (Tabs) – Tab-Layout, Inhalt, Styling
⭐ Featured Products – Raster oder Karussell, Artikelquelle, Button-Text
💡 Tipp: Wenn Sie nicht die erwarteten Optionen sehen, stellen Sie sicher, dass der richtige Block ausgewählt ist.
🧑💻 Alternative: Custom HTML/CSS Templates
Für fortgeschrittene Nutzer unterstützt 3Dsellers außerdem Custom HTML templates.
Wann Sie Custom HTML verwenden sollten
Sie benötigen ein Layout, das sich nicht visuell erstellen lässt
Sie möchten volle Kontrolle über HTML und CSS
Sie haben bereits ein bestehendes HTML-Listing
Wichtige Unterschiede
Visual Templates | Custom HTML Templates |
Start mit vorgefertigtem Design | Start mit leerem Code |
Drag-and-Drop-Editor | Nur Code-Bearbeitung |
Anfängerfreundlich | Nur für fortgeschrittene Nutzer |
Eingebaute Responsivität | Manuelle Responsivität |
ℹ️ Custom HTML templates sind getrennt vom visuellen Listing Designer und werden per Code bearbeitet, nicht per Drag-and-Drop.
👀 Vorschau und Testen
🔍 Nutzen Sie Preview vor dem Speichern
🖥️ Testen Sie Desktop- und Mobile-Ansichten
🧪 Prüfen Sie Platzhalter in der Vorschau mit verschiedenen Produkten
💾 Vorlagen speichern und wiederverwenden
Speichern Sie angepasste Vorlagen mit eindeutigen Namen
Verwenden Sie Vorlagen für mehrere Listings wieder
Duplizieren Sie Vorlagen, um Varianten zu erstellen
📌 Eine Vorlage auf Listings anwenden
Nachdem Sie eine Listing-Vorlage erstellt oder angepasst haben, muss die Vorlage auf Ihre Produkt-Listings angewendet werden, damit sie auf Ihren Marktplatz-Listings erscheint.
Das Erstellen oder Speichern einer Vorlage wendet sie nicht automatisch auf Listings an.
🔁 Vorlagen in großen Mengen anwenden
Mit 3Dsellers können Sie Vorlagen auf mehrere Listings gleichzeitig anwenden, was Zeit spart und Konsistenz sichert.
So wenden Sie eine Vorlage in großen Mengen an:
Gehen Sie zu Listing Designer → Listings
Wählen Sie über die Checkboxen ein oder mehrere Listings aus
Klicken Sie auf Bulk Actions
Wählen Sie Apply Template
Wählen Sie die anzuwendende Vorlage aus
Bestätigen Sie die Aktion
Die ausgewählte Vorlage wird gleichzeitig auf alle gewählten Listings angewendet.
🧹 Vorlagen aktualisieren oder ersetzen
Über die Bulk Actions können Sie auch bereits auf Listings angewendete Vorlagen verwalten:
Remove Template – Eine Vorlage von ausgewählten Listings entfernen
Re-apply Current Template – Listings nach Vorlagen-Updates aktualisieren
Switch Templates – Eine andere Vorlage auf ausgewählte Listings anwenden
Diese Aktionen sind auch über Bulk Actions verfügbar, wodurch sich große Mengen an Listings effizient aktualisieren lassen.
ℹ️ Wichtige Hinweise
Vorlagen wirken sich erst auf Listings aus, nachdem sie angewendet wurden
Das Aktualisieren einer Vorlage aktualisiert Listings nicht automatisch, außer Sie wenden sie erneut an
Bulk Actions helfen, ein konsistentes Design im gesamten Katalog sicherzustellen
✅ Best Practices
Beginnen Sie mit der Vorlage, die Ihrem Produkttyp am nächsten kommt
Halten Sie Layouts übersichtlich und mobilfreundlich
Nutzen Sie vor der Veröffentlichung immer die Vorschau
Verwenden Sie Platzhalter statt statischem Text
Nutzen Sie Custom HTML nur, wenn visuelle Vorlagen Ihre Anforderungen nicht erfüllen können