Den Theme-Editor meistern: Ein vollständiger Leitfaden

Ihr Schaufenster ist die Auslage für alles, was Sie verkaufen, und auf Dirora gestalten Sie es mit dem visuellen Theme-Editor – einem Drag-and-Drop-Arbeitsbereich, in dem Sie Seiten aufbauen, Ihre Markenfarben und Schriften festlegen und jede Änderung sofort in einer Live-Vorschau erscheinen sehen. Es gibt keinen Code zu schreiben und nichts, was kaputtgehen kann: Sie ordnen die Bausteine an, die Layout-Engine kümmert sich um das responsive, performante Markup darunter. Dieser Leitfaden führt durch den gesamten Editor, vom ersten Klick bis zu einem startbereiten Design.

Wenn Sie noch überlegen, ob Sie einen Shop ohne Entwickler aufbauen können, lautet die kurze Antwort ja – und unser Beitrag darüber, ob Sie programmieren müssen, um einen Online-Shop zu starten, führt die ausführlichere Begründung aus. Der Theme-Editor ist der Ort, an dem dieses Versprechen wahr wird.

Was der Theme-Editor tatsächlich ist

Stellen Sie sich den Editor als zwei Dinge vor, die zusammenarbeiten. Obenauf liegt eine WYSIWYG-Arbeitsfläche – was Sie sehen, ist wirklich das, was Ihre Kunden bekommen. Darunter sitzt die Layout-Engine, die die Abschnitte und Widgets, die Sie auf die Seite ziehen, als sauberes, serverseitiges HTML rendert, das schnell lädt und auf jedem Gerät korrekt gelesen wird. Diese Ebene berühren Sie nie direkt; Sie arbeiten ausschließlich über visuelle Steuerelemente, und die Engine hält die Ausgabe ordentlich.

Alles, was Sie zusammenstellen, wird bei Ihrem Theme gespeichert, sodass Ihr Design, Ihre Farben, Ihre Schriften und Ihre Seitenlayouts zusammen reisen. Das ist wichtig, wenn Sie ein Theme duplizieren möchten, um zu experimentieren, oder später zu einem Design zurückkehren wollen, ohne Ihre Arbeit zu verlieren.

Sich in der Oberfläche zurechtfinden

Wenn Sie den Editor öffnen, blicken Sie auf drei Zonen:

• Das linke Panel ist Ihre Steuerungsfläche – hier fügen Sie Widgets hinzu und ordnen sie neu, öffnen die Einstellungen eines Widgets und wechseln zwischen den Teilen Ihres Shops, die Sie bearbeiten. Der Editor arbeitet in Modi: Header, Seiten und Footer für die Struktur, plus eigene Modi für Typografie, Assets und CSS für globale Gestaltung, Bildbündelung und fortgeschrittenen Code. Die meiste Zeit verbringen Sie in den visuellen Modi; die letzten drei sind da, wenn Sie tiefere Kontrolle wünschen.

• Die zentrale Arbeitsfläche ist eine Live-Vorschau Ihres Schaufensters. Klicken Sie ein beliebiges Element an, um es auszuwählen; ändern Sie eine Einstellung und die Vorschau aktualisiert sich in Echtzeit, sodass Sie nie raten müssen, was eine Anpassung bewirkt.

• Die obere Symbolleiste enthält Ihre globalen Werkzeuge: den Geräteumschalter für die responsive Vorschau, Rückgängig und Wiederholen sowie die Steuerelemente zum Speichern und Veröffentlichen.

Weil die Vorschau wirklich live ist, ist der schnellste Weg, den Editor zu lernen, etwas Kleines zu ändern und zu beobachten, was passiert. Nichts, was Sie in einem Entwurf tun, ist öffentlich, bis Sie sich entscheiden, es zu veröffentlichen, es ist also sicher, zu erkunden.

Seiten mit Widgets aufbauen

Jede Seite wird aus Widgets zusammengesetzt – eigenständigen Bausteinen, die Sie auf die Arbeitsfläche ziehen, dann stapeln und neu anordnen, um eine Seite zu komponieren. Dirora bringt 41 Schaufenster-Widgets mit, die die Elemente abdecken, die ein echter Shop braucht, sodass Sie in den meisten Fällen auswählen und anordnen, statt von Grund auf zu bauen. Zu denen, nach denen Sie am häufigsten greifen, gehören:

• Hero-Banner – ein Überschriftenbereich in voller Breite mit Hintergrundbild, begleitendem Text und einer Call-to-Action-Schaltfläche. Das ist meist das Erste, was ein Besucher sieht, also verdient es die meiste Aufmerksamkeit.

• Empfohlene Produkte und Produktraster – ziehen Sie Artikel direkt aus Ihrem Katalog in ein ordentliches Raster und wählen Sie, wie viele Produkte und Spalten angezeigt werden. Kombinieren Sie das mit starken Bildern aus unseren Tipps zur Produktfotografie und es verkauft schon von allein eine Menge.

• Kollektionslisten – präsentieren Sie Ihre Kategorien visuell, damit Käufer selbst zu dem navigieren können, was sie möchten.

• Text mit Bild – ein nebeneinander angeordneter Block für Markenerzählung, mit dem Bild links oder rechts.

• Testimonials und Bewertungen – Social Proof in Spalten angelegt, um im Entscheidungsmoment Vertrauen aufzubauen.

• Newsletter-Anmeldung – erfassen Sie E-Mail-Adressen, um ein Publikum aufzubauen, das Ihnen gehört, statt es zu mieten.

• Rich-Text, Bildergalerien, Countdown-Timer und Trust-Badges – die Nebendarsteller für Launches, Aktionen und Beruhigung.

• Custom HTML – ein eigenes Widget, um Ihr eigenes Markup einzufügen, wenn Sie etwas brauchen, das die Standard-Widgets nicht abdecken, etwa ein eingebettetes Drittanbieter-Tool oder eine maßgeschneiderte Integration. Es steht neben den visuellen Widgets, sodass Sie nur danach greifen, wenn Sie es wirklich brauchen.

Um eines hinzuzufügen, ziehen Sie es aus dem linken Panel dorthin, wo Sie es auf der Seite haben möchten; um es zu verschieben, ziehen Sie es nach oben oder unten; um es zu konfigurieren, klicken Sie es an und passen seine Einstellungen an. Jedes Widget ist von Haus aus responsiv, sodass ein Raster, das auf dem Desktop vier Spalten zeigt, auf einem Handy elegant auf eine zusammenklappt, ganz ohne zusätzlichen Aufwand Ihrerseits.

Die Widget-Wahl ist Design, aber sie ist auch Conversion. Wenn Sie Seiten bauen möchten, die tatsächlich verkaufen, passen unsere Leitfäden zu Produktseiten mit hoher Conversion und dazu, Vertrauen in Ihren Checkout einzubauen, gut zu diesem Abschnitt.

Ihre Farben und Schriften festlegen

Eine konsistente Palette und Schriftart sind es, die ein Schaufenster, das maßgeschneidert aussieht, von einem unterscheiden, das wie eine Vorlage aussieht. Der Editor gibt Ihnen für beides eigene Steuerelemente:

• Farben – legen Sie Ihre Markenfarben einmal fest und wenden Sie sie über Hintergründe, Text, Schaltflächen und Akzente hinweg an. Weil die Änderungen global sind, durchdringt eine einzige Anpassung den gesamten Shop konsistent, statt Ihnen die Aufgabe zu lassen, Seite für Seite nach unpassenden Farbtönen zu suchen.

• Schriften – wählen Sie die Schriftarten für Ihre Überschriften und Ihren Fließtext und legen Sie deren Größen und Stärken fest, damit Ihr Shop klar und markengerecht liest.

Farbentscheidungen wiegen schwerer, als die meisten erwarten – sie prägen, wie vertrauenswürdig, hochwertig oder zugänglich ein Shop wirkt, bevor auch nur ein Wort gelesen ist. Wenn Sie unsicher sind, wo Sie anfangen sollen, ist unser Beitrag zur Farbpsychologie im E-Commerce eine gute Einführung. Als Faustregel: Wählen Sie ein oder zwei Markenfarben, einen Neutralton für Hintergründe und einen einzigen Akzent für Schaltflächen und widerstehen Sie dann dem Drang, mehr hinzuzufügen.

Fortgeschrittene Typografie und eigene Schriften

Schriften leisten stille, ständige Arbeit: Sie setzen den Ton Ihres gesamten Shops, und konsistente Typografie ist eines der klarsten Signale einer professionellen Marke. Der eigene Typografie-Modus geht weit über eine einzige Wahl von Überschrift und Fließtext hinaus und lässt Sie Schriftfamilie, Größe und Stärke unabhängig für jede Textrolle in Ihrem Shop festlegen:

• Fließtext – die Grundlage, die Ihre Kunden am meisten lesen, hier zählt die Lesbarkeit am meisten.

• Überschriften, H1 bis H6 – steuern Sie jede Ebene separat, um eine klare visuelle Hierarchie über die Seite hinweg aufzubauen.

• Schaltflächentext – stimmen Sie die Schrift Ihrer Call-to-Actions ab, damit sie bewusst und anklickbar wirken.

• Navigationstext – halten Sie Ihre Menüs auf jeder Seite scharf und markengerecht.

Sie können diese Rollen frei kombinieren – zum Beispiel eine charaktervolle Display-Schrift für Überschriften gegen eine saubere, gut lesbare Fließtextschrift. Es stehen über 50 kuratierte Google Fonts zur Auswahl, sodass Sie nicht auf Systemstandards beschränkt sind und etwas finden können, das wirklich zu Ihrer Marke passt. Ihre Typografie-Einstellungen werden so angewendet, dass sie komponenteneigene Standardwerte zuverlässig überschreiben, was bedeutet, dass die Entscheidungen, die Sie hier treffen, konsistent über das Schaufenster hinweg gelten, statt still von der eingebauten Gestaltung eines Widgets überschrieben zu werden.

Theme-Assets: Ihre Bilder mit dem Theme bündeln

Manche Bilder gehören zum Design statt zu einem bestimmten Produkt – eine Hintergrundtextur, ein Markenmuster, eine Platzhaltergrafik. Der Assets-Modus ist der Ort, an dem diese leben. Sie laden hier Bilder hoch und sie werden mit dem Theme selbst gebündelt, dann aus Ihren Widget-Einstellungen über eine Asset-Referenz statt einer einmaligen URL referenziert.

Der Gewinn ist Portabilität: Weil die Bilder mit dem Theme reisen, können Sie ein Theme duplizieren, um zu experimentieren, oder ein Design zwischen Umgebungen verschieben, ohne dass Ihre Bilder kaputtgehen oder verloren gehen. Genau deshalb sind Assets wichtig, wenn Sie je ein Theme teilen oder wiederverwenden möchten – das Design kommt vollständig an, Bildmaterial inklusive, statt auf Dateien zu zeigen, die abhandengekommen sind. Für Produkt- und Lifestyle-Fotografie, die in Ihrem Katalog statt Ihrem Theme sitzt, ist der Medienmanager die bessere Heimat; die Hinweise in unseren Tipps zur Produktfotografie gelten für beide.

Eigenes CSS: Feinsteuerung für die, die sie wollen

Der visuelle Editor deckt die überwältigende Mehrheit dessen ab, was ein Schaufenster braucht, aber manchmal möchten Sie ein bestimmtes Detail anstupsen, das keine Einstellung freilegt. Dafür ist der CSS-Modus da – ein optionaler, vollständiger Code-Editor für alle, die es gewohnt sind, ein paar Zeilen CSS zu schreiben, der still aus dem Weg all derer sitzt, die es nicht sind.

Sie zielen auf Elemente über die eingebauten Selektoren des Schaufensters ab – zum Beispiel .dirora-store für den Gesamtrahmen, .dirora-header und .dirora-footer für diese Bereiche, abschnittstypbezogene Selektoren wie .section-hero oder einen einzelnen Abschnitt über seine eigene ID. Ihr eigenes CSS wird nach allen anderen Styles geladen, sodass es Vorrang hat und zuverlässig gewinnt, wenn Sie es brauchen. Der Editor enthält Annehmlichkeiten wie eine Formatier-Schaltfläche, um Ihren Code aufzuräumen, und einen Vollbildmodus für längere Bearbeitungen. Er ist völlig optional – Sie müssen ihn nie öffnen, um einen professionellen Shop zu bauen –, aber er ist da, sobald Sie diesen letzten Grad an Kontrolle wünschen.

Live-Vorschau und responsives Design

Mehr als die Hälfte des E-Commerce-Traffics läuft mobil, sodass ein Design, das nur auf einem Laptop richtig aussieht, ein Design ist, das Verkäufe verliert. Diroras Editor lässt Sie Ihren Shop über Desktop, Tablet und Mobil hinweg mit dem Geräteumschalter in der oberen Symbolleiste vorschauen. Jedes Widget passt sich automatisch an, aber die Vorschau lässt Sie die Details prüfen – wie eine Hero-Überschrift auf einem schmalen Bildschirm umbricht, ob Abstände beengt wirken, wie ein Produktraster umfließt.

Gewöhnen Sie sich an, auf Mobil umzuschalten, bevor Sie etwas veröffentlichen. Ein Layout, das auf einem breiten Monitor ausgewogen wirkt, kann auf einem Handy spärlich oder unbeholfen aussehen, und die Vorschau ist der schnellste Weg, das zu erkennen. Geschwindigkeit zählt genauso wie das Layout; unser Leitfaden zur Optimierung der Shop-Performance behandelt, wie Bildmaterial und Seitengewicht die Ladezeiten beeinflussen.

Sicher arbeiten: Entwürfe, Rückgängig und Wiederholen

Einer der stillen Vorteile des Editors ist, dass Experimentieren kein Risiko birgt. Ihre Änderungen leben in einem Entwurf, bis Sie sie aktiv veröffentlichen, sodass sich Ihr Live-Schaufenster nie unter den Füßen Ihrer Kunden ändert, während Sie mitten in einem Redesign sind. Wenn Sie zufrieden sind, veröffentlichen Sie; bis dahin sehen Käufer die letzte Version, die Sie freigegeben haben.

Innerhalb einer Sitzung haben Sie außerdem einen vollständigen Verlauf zum Rückgängigmachen und Wiederholen. Ziehen Sie ein Widget an die falsche Stelle, hadern Sie mit einer Farbe, löschen Sie versehentlich einen Abschnitt – gehen Sie mit Rückgängig einen Schritt zurück oder mit Wiederholen wieder vor. Zwischen Entwürfen und Rückgängig-Verlauf gibt es so etwas wie einen nicht wiederherstellbaren Fehler nicht, was genau das Vertrauen ist, das Sie beim Erlernen des Werkzeugs wünschen.

Header und Footer anpassen

Ihr Header und Footer erscheinen auf jeder Seite, also leisten sie viel Navigations- und Vertrauensarbeit. Im Editor bearbeiten Sie sie genauso, wie Sie Seiten bearbeiten – indem Sie Blöcke hinzufügen und anordnen. Ein typischer Header trägt Ihr Logo, die Hauptnavigation, einen Sucheinstieg und den Warenkorb; ein Footer enthält meist Link-Spalten, eine Newsletter-Anmeldung, Social-Links, Zahlungssymbole sowie Ihre rechtlichen und Kontaktangaben. Nehmen Sie sich früh die Zeit, diese richtig hinzubekommen, denn sie rahmen jede andere Seite, auf der ein Besucher landet.

Ein einfacher Arbeitsablauf für Ihr erstes Design

Wenn Sie auf eine leere Arbeitsfläche starren, hält diese Reihenfolge die Dinge überschaubar:

1. Legen Sie zuerst Ihre Markengrundlagen fest. Wählen Sie Ihre Farben und Schriften, bevor Sie Seiten bauen, damit alles, was Sie hinzufügen, von Anfang an den richtigen Look erbt.

2. Bringen Sie Header und Footer in Ordnung. Setzen Sie Navigations- und Vertrauenselemente an ihren Platz, damit der Rahmen stabil ist.

3. Bauen Sie die Startseite von oben nach unten. Beginnen Sie mit einem Hero, fügen Sie einen Block mit empfohlenen Produkten oder einer Kollektion hinzu, schichten Sie dann Social Proof und eine Newsletter-Anmeldung ein.

4. Prüfen Sie Mobil unterwegs. Schalten Sie die Gerätevorschau nach jedem größeren Abschnitt um statt nur am Ende.

5. Veröffentlichen Sie, wenn es zusammenhält. Sie können immer zurückkehren – der Editor belohnt Iteration.

Ganz neu auf der Plattform? Unser Leitfaden für den Einstieg führt durch die Kontoeinrichtung und das Hinzufügen von Produkten, was natürlich zur Gestaltung des Schaufensters hier passt.

Was es kostet, so zu bauen

Der Theme-Editor und die Layout-Engine sind Teil der Plattform in jedem Tarif, einschließlich des kostenlosen Starter-Tarifs – es gibt kein separates „Design-Add-on“ und keine Gebühr für die Nutzung des Editors. Genauso wichtig: Dirora nimmt keine Transaktionsgebühren in keinem Tarif; der einzige Anteil ist eine kleine Plattformgebühr, die mit Ihrem Wachstum fällt, von 1,5 % bei Starter über 0,75 % bei Pro und 0,25 % bei Business bis 0 % bei Enterprise. Die vollständige Aufschlüsselung sehen Sie auf der Preisseite, und wenn Sie Ihre Optionen abwägen, legt unsere Vergleichsseite dar, wie sich das gegen andere Plattformen schlägt. Wenn Sie bereit sind, unter Ihrer eigenen Adresse live zu gehen, behandelt der Leitfaden zu eigenen Domains, wie man eine Domain mit automatischem SSL verbindet.