Seitengestalter

Mit dem Seiten-Designer erstellen Sie Ihr eigenes Seitenlayout, indem Sie Inhaltsblöcke hinzufügen, verschieben und konfigurieren. Sie können einzigartige Layouts für Ihre Startseite, Kategorieseiten, Produktseiten, Landingpages, den Checkout und viele weitere Seitentypen erstellen – ganz ohne Programmierkenntnisse.

Wo finde ich den Seiten-Designer?

Du findest den Seiten-Designer unter „Shop“ » „Design“ » „Seiten-Designer“ in deinem Shoporama-Adminbereich. Hier kannst du neue Seitenlayouts erstellen oder bestehende bearbeiten.

Welche Seitentypen unterstützt der Seiten-Designer?

Der Seiten-Designer unterstützt zwei Gruppen von Seitentypen. Die erste Gruppe umfasst dynamische Seiten, bei denen Sie wählen können, ob das Layout für alle Seiten dieses Typs oder nur für ausgewählte Seiten gelten soll:

• Kategorie (inkl. Startseite). Das Layout aller Kategorieseiten und der Startseite. Die Startseite ist die Kategorie, die als Startseitenkategorie markiert ist. Wenn Sie also ein spezielles Startseitenlayout wünschen, erstellen Sie eine spezifische Kategoriekonfiguration, die genau auf diese Kategorie verweist.
• Produkt. Das Layout der Produktseiten.
• Landingpage. Das Layout der Landingpages.
• Statische Seite. Das Layout auf statischen Seiten, z. B. „Über uns“ und „AGB“.
• Blogbeitrag. Das Layout von Blogbeiträgen.

Die zweite Gruppe sind feste Seiten, für die es pro Shop nur ein Layout geben kann:

• Suchseite
• Warenkorb
• Die Adressseite (im Checkout)
• Versandseite (im Checkout)
• Bestätigungsseite (im Checkout)
• Zahlungsseite
• Seite „Vielen Dank für Ihre Bestellung“
• Seite für Zusatzkäufe
• Bestellseite
• Rücksendezentrum
• Anmeldeseite
• Seite „Konto erstellen“
• Bestellungen des Benutzers
• Wunschliste des Benutzers

Wenn Ihr Theme eigene Theme-Tags (wiederverwendbare Inhaltsplätze) definiert, können Sie auch Page-Builder-Layouts dafür erstellen. Diese werden beim Erstellen in einer separaten Gruppe angezeigt.

So erstellen Sie ein Seitenlayout

1. Gehen Sie zu Shop » Design » Seiten-Designer.
2. Klicken Sie auf „Neues Seitenlayout erstellen“.
3. Wähle aus, für welchen Seitentyp das Layout gelten soll.
4. Gib dem Layout gegebenenfalls einen Namen, damit du es in der Liste wiedererkennen kannst.
5. Klicken Sie auf „Erstellen“. Sie gelangen direkt in den Abschnitts-Editor, wo Sie mit dem Hinzufügen von Blöcken beginnen können.
6. Ein dynamisches Layout gilt grundsätzlich für alle Seiten dieses Typs. Wenn du es auf ausgewählte Seiten beschränken möchtest, öffne „Einstellungen“ und füge die Seiten unter „Bestimmte Seiten auswählen“ hinzu. Feste Seiten können pro Shop nur ein Layout haben.

So erstellst du die Startseite

Die Startseite ist eine normale Kategorie, die als Startseitenkategorie markiert ist. Wenn du der Startseite ein besonderes Aussehen verleihen möchtest, gehst du wie folgt vor:

1. Stelle sicher, dass du eine Kategorie als Startseitenkategorie markiert hast (dies erfolgt in der Kategorie selbst). Weitere Informationen findest du unter „Einrichtung der Startseite“.
2. Gehen Sie zum Seitendesigner. Unter der Überschrift „Inhaltsseiten “ befindet sich eine Karte mit dem Namen „Startseite“.
3. Klicken Sie auf dieser Karte auf „Layout erstellen “. Der Seiten-Designer erstellt eine Kategorie-Konfiguration, die bereits mit Ihrer Startseitenkategorie verknüpft ist.
4. Füge die Blöcke hinzu, aus denen die Startseite bestehen soll, z. B. ein Hero-Banner, ein Produktkarussell, einen USP-Block und eine Blog-Liste.

Dieses spezifische Layout wird nun auf der Startseite verwendet, während Ihre übrigen Kategorien das allgemeine Kategorie-Layout (oder die Standardeinstellung des Themes) verwenden.

Verfügbare Blocktypen

Die verfügbaren Blocktypen hängen von Ihrem Theme ab. Hier sind die gängigsten in Delaware, DelawareDK und Montana:

• Hero. Großer Hero-Bereich mit Überschrift, Beschreibung, Schaltfläche und Hintergrundbild.
• Banner. Bilder im Karussell-/Slider-Format.
• Text. Freitextblock mit Überschrift und Formatierung.
• Text mit Bild. Zwei Spalten mit Text auf der einen Seite und einem Bild auf der anderen.
• Zweispaltiger Text. Text, der auf zwei Spalten verteilt ist.
• Produktliste. Produkte aus einer Kategorie, einer Landingpage oder nach Beliebtheit/Neuheit anzeigen.
• Produkt-Slider. Produkte im Karussell-Format.
• Kategorieliste. Produktkategorien anzeigen.
• Kategorien-Slider. Kategorien im Karussell-Format.
• Bildraster in Delaware und DelawareDK, Bildergalerie in Montana und MontanaB2B. Raster aus Bildern mit optionalen Links.
• Adresse & Karte. Zeige die Adresse des Shops mit einer interaktiven Karte an. Erfordert keinen Google Maps-API-Schlüssel. Mehr erfahren.
• Facebook. „Gefällt mir“-Button für Ihre Facebook-Seite (oder binden Sie einen Feed über eigenen Code ein).
• Instagram. Zeige dein öffentliches Instagram-Profil mit den neuesten Beiträgen, einem „Folgen“-Button oder beidem an.
• Blog-Liste. Zeige die neuesten Blog-Beiträge an.
• Trustpilot. Widget mit Trustpilot-Bewertungen. Verfügbar in Delaware und DelawareDK, jedoch nicht in Montana.
• Wertversprechen in Delaware, Wertangebote in DelawareDK sowie Werte/USPs in Montana und MontanaB2B. Heben Sie Ihre USPs hervor, z. B. kostenlosen Versand oder schnelle Lieferung.
• HTML. Reines HTML für volle Kontrolle über den Inhalt.

Wenn du ein anderes Theme verwendest, kann die Liste anders aussehen. Öffne eine Konfiguration und klicke auf den Reiter „Module“ am rechten Rand, um zu sehen, welche Blöcke dein Theme tatsächlich unterstützt.

Neuere Blöcke, die du vielleicht noch nicht entdeckt hast

Die Liste der Blöcke wird laufend erweitert, und die neuesten sind in Montana hinzugekommen. Hier sind die Blöcke, die zusätzlich zu den Klassikern hinzugekommen sind, und wofür du sie verwenden kannst. Die unten aufgeführten Namen sind diejenigen, die du in Montana siehst. In DelawareDK heißen sie fast genauso, und in Delaware sind sie auf Englisch. Wenn ein Block nur in bestimmten Themes verfügbar ist, wird dies neben dem Block angegeben.

Beachte außerdem, dass einige der bekannten Blöcke in Montana neue Namen erhalten haben. „Hero“ heißt nun „Großes Banner“, der Produkt-Slider heißt „Produkt-Karussell“, das Bildraster heißt „Bildergalerie“ und der HTML-Block heißt „Benutzerdefinierter Code“. Es handelt sich um dieselbe Funktion, nur mit einem Namen, der leichter zu verstehen ist.

Überschrift, Textbanner und Leerraum

• Überschrift. Eine echte H1-Überschrift für den oberen Rand der Seite, mit Ausrichtung links, zentriert oder rechts und einer optionalen dünnen Unterstreichung. Verwenden Sie diese, wenn die Seite eine Seitenüberschrift statt nur eines Textblocks haben soll.
• Textbanner. Ein schmaler Streifen mit Text, Hintergrundfarbe, Textfarbe, Ausrichtung und Schriftgröße. Er kann mit einem Link anklickbar gemacht werden, und wenn Sie „Kann geschlossen werden “ aktivieren, erscheint ein kleines Kreuz neben der Meldung. Wenn ein Besucher das Banner schließt, bleibt es in seinem Browser geschlossen. Ideal für „Kostenloser Versand ab 499 kr.“ oder eine kurze Kampagnenmeldung. Erhältlich in Montana und MontanaB2B.
• Abstand & Trennlinie. Freiraum zwischen zwei Abschnitten in fünf Größen von extra klein bis extra groß, mit der Option einer horizontalen Linie in der Mitte. Löst das klassische Problem, wenn zwei Abschnitte zu dicht beieinander liegen. Erhältlich in Montana und MontanaB2B.

Blöcke, die Produkte und Kategorien hervorheben

• Produktblock. Ein einzelnes Produkt wird groß mit Bild, Name, Preis und einer Schaltfläche zur Produktseite dargestellt. Sie wählen aus, ob das Bild links oder rechts platziert wird, wie die beiden Spalten aufgeteilt werden (50/50, 60/40 oder 40/60) und ob die Produktbeschreibung angezeigt werden soll.
• Produkt-Feature. Eine Kampagnenfläche mit Überschrift, Fließtext, zwei Schaltflächen und einem Hintergrundbild sowie einem Produktkarussell daneben. Ideal für „Marke des Monats“ oder eine neue Kollektion.
• Kategorie-Feature. Das gleiche Konzept, jedoch für Kategorien. Wählen Sie bis zu drei Kategorien, ein Hintergrundbild oder eine Hintergrundfarbe, ein helles oder dunkles Overlay sowie die Größe der Kategoriebilder aus.
• Hero-Video mit Kategorie oder Landingpage. Ein großes Banner mit Hintergrundvideo und bis zu drei hervorgehobenen Kategorien oder Landingpages darüber. Verfügbar in Delaware und DelawareDK.

Newsletter mitten im Inhalt

Der Newsletter-Block fügt ein Anmeldeformular direkt in den Seiteninhalt ein, sodass Sie Anmeldungen nicht nur in der Fußzeile sammeln. Sie wählen zwischen drei Layouts:

• Einfach. Ein zentriertes Formular auf farbigem Hintergrund.
• Zentriert mit Hintergrundbild. Gleicher Aufbau, jedoch mit einem Bild im Hintergrund und einem hellen oder dunklen Overlay.
• Geteilt mit Bild. Bild auf der einen Seite und Formular auf der anderen.

Außerdem fügst du eine Überschrift, den Lauftext, den Schaltflächentext und einen Einwilligungstext unterhalb des Formulars ein und kannst wählen, ob auch nach dem Vornamen gefragt werden soll. Wo die Anmeldungen landen, hängt davon ab, ob Sie im Newsletter-Modul die Option „Interne Newsletter-Liste verwenden“ aktiviert haben:

• Ist diese Einstellung aktiviert, wird der Anmelder als Abonnent im eigenen Newsletter-Modul des Shops angelegt und in Ihre Standardliste aufgenommen. Wenn Sie gleichzeitig „Bestätigung erforderlich (Double-Opt-in) “ aktiviert haben, erhält der Angemeldete automatisch eine Bestätigungs-E-Mail und wird erst aktiv, wenn er auf den Link in der E-Mail geklickt hat.
• Ist die Einstellung deaktiviert, wird die Anmeldung stattdessen an das externe Newsletter-System weitergeleitet, das Sie angebunden haben, z. B. Mailchimp, Klaviyo oder Brevo. Es wird also kein Abonnent im eigenen Newsletter-Modul von Shoporama angelegt, und eine eventuelle Bestätigungs-E-Mail wird vom externen Anbieter versendet.

In beiden Fällen speichert Shoporama eine Einwilligungserfassung mit Zeitpunkt, IP-Adresse und Browser, damit du die Anmeldung dokumentieren kannst. Weitere Informationen findest du im Newsletter-Modul.

Modul-Panel: So fügst du einen Abschnitt hinzu

Sektionen fügen Sie über ein Panel auf der rechten Seite des Sektions-Editors hinzu. Ist das Panel geschlossen, öffnen Sie es über die Registerkarte „Module“ am rechten Bildschirmrand. Das Panel merkt sich, ob Sie es geöffnet oder geschlossen hatten, sodass es beim nächsten Mal so angezeigt wird, wie Sie es verlassen haben.

• Suchfeld. Geben Sie z. B. „Produkt“ oder „Text“ ein, um die Liste sofort zu filtern. Die Suche erfolgt sowohl im Namen als auch in der Beschreibung des Moduls.
• Vorschauen. Jedes Modul wird mit einer kleinen Skizze seines Aufbaus angezeigt, sodass du es erkennen kannst, ohne anhand des Namens raten zu müssen. Die Skizzen dienen nur zur Orientierung und zeigen nicht dein eigenes Design.
• Ein Klick. Klicke auf ein Modul, um den Abschnitt auf der Seite einzufügen. Der neue Abschnitt wird zunächst ausgeblendet, die Seite scrollt zu ihm hin und er blinkt kurz, damit du sehen kannst, wo er platziert wurde.

Jeder Abschnitt verfügt über vier Schaltflächen in der Kopfzeile: Umbenennen, Ein- oder Ausklappen, Kopieren und Löschen. Mit „Kopieren“ wird direkt unter dem Original ein Duplikat mit dem Zusatz „(Kopie)“ im Namen erstellt – der schnellste Weg zu zwei nahezu identischen Bannern. Oben in der Abschnittsübersicht befindet sich eine Schaltfläche, mit der du zwischen „Alle einklappen“ und „Alle ausklappen“ wechseln kannst, sodass du mit einem Klick den Überblick über eine lange Seite erhältst.

Einige Blöcke verfügen unten unter den Feldern über einen Link „Mehr über diesen Block erfahren“. Dies gilt unter anderem für „Adresse & Karte“ sowie „Facebook“ und „Instagram“, wo ein Artikel mit der vollständigen Einrichtung zu finden ist.

Am unteren Rand der Seite befindet sich eine feste Leiste mit den Schaltflächen „Speichern“, „Speichern und schließen“ sowie „Seiteneinrichtung löschen“. Die Reihenfolge der Abschnitte wird automatisch gespeichert, wenn du sie verschiebst, aber der Inhalt der Felder wird erst gespeichert, wenn du auf „Speichern“ klickst.

Drag & Drop

Du kannst die Reihenfolge deiner Blöcke ganz einfach ändern, indem du sie nach oben oder unten ziehst. Greife die Überschrift des Blocks und ziehe ihn an die gewünschte Position. Die Reihenfolge wird automatisch gespeichert.

Sie können Blöcke auch zusammenklappen, um einen besseren Überblick zu erhalten, wenn Sie viele Blöcke auf einer Seite haben.

Konfiguration von Blöcken

Jeder Block verfügt je nach Typ über eigene Einstellungen. Typische Optionen sind:

• Text und Überschriften. Schreibe direkt in einem Texteditor.
• Bilder. Lade Bilder direkt von deinem Computer hoch.
• Hintergrundvideo. Lade ein MP4-/WebM-Video hoch oder wähle es aus, z. B. als Hintergrund für ein Hero-Banner. Das Video wird automatisch, ohne Ton und in einer Endlosschleife auf allen Geräten abgespielt.
• Produktauswahl. Wählen Sie bestimmte Produkte, Kategorien oder Landingpages aus.
• Links und Schaltflächen. Füge URLs und Schaltflächentexte hinzu.
• Wiederholbare Elemente. In einigen Blöcken (z. B. Bannern) kannst du mehrere Elemente innerhalb desselben Blocks hinzufügen.

Sie können jedem Block einen benutzerdefinierten Namen geben, damit Sie in der Übersicht leichter den Überblick behalten.

Produkt-Selektor in Delaware/DelawareDK

In Delaware und DelawareDK verfügen mehrere Seiten-Designer-Abschnitte (Produktliste, Produkt-Slider und Produkt-Feature) über ein Feld namens „Product Selector“. Dieses Feld dient dazu, anzugeben, welche Produkte in dem Abschnitt angezeigt werden sollen.

So verwenden Sie den „Product Selector“

1. Wählen Sie zunächst im Dropdown-Menü einen Produkttyp aus, z. B. „Nach Kategorie-Tag“, „Nach Landingpage-Tag“ oder „Nach Produkt-IDs“.
2. Geben Sie anschließend den entsprechenden Wert in das Feld „Product Selector“ ein (siehe unten).

Wenn du als Produkttyp „Neueste Produkte“, „Beliebte Produkte“ oder „Meistverkaufte Produkte“ auswählst, musst du das Feld „Produkt-Selektor“ nicht ausfüllen. Die Produkte werden automatisch abgerufen.

Was muss ich in das Feld eingeben?

Das hängt vom ausgewählten Produkttyp ab:

• „By Category Tag“. Geben Sie das Tag der Kategorie ein. Sie finden das Tag, indem Sie die Kategorie im Admin-Bereich unter dem Feld „Tag“ bearbeiten. Beispiel: Sommerangebote
• Nach Landingpage-Tag. Geben Sie das Tag der Landingpage ein. Sie finden das Tag, indem Sie die Landingpage im Admin-Bereich bearbeiten. Beispiel: Neuheiten
• Nach Produkt-IDs (zu finden im Produkt-Slider). Geben Sie die Produkt-IDs durch Kommas getrennt ein. Die ID eines Produkts finden Sie in der Produktliste oder in der URL, wenn Sie das Produkt bearbeiten. Beispiel: 123,456,789

Allgemeine vs. spezifische Einstellungen

Für dynamische Seitentypen gibt es zwei Möglichkeiten, den Seiten-Designer zu nutzen:

• Allgemeine Konfiguration. Gilt für alle Seiten eines bestimmten Typs. Z. B. eine Konfiguration für alle Kategorieseiten.
• Spezifische Konfiguration. Gilt nur für ausgewählte Seiten. Z. B. eine spezielle Konfiguration für eine bestimmte Landingpage oder für die Startseitenkategorie.

Spezifische Einstellungen haben Vorrang. Wenn ein Produkt eine eigene Einstellung hat, wird diese anstelle der allgemeinen Produktsseiten-Einstellung verwendet.

Intelligentere Felder im Montana-Theme

Das Montana-Theme nutzt die neuesten Feldtypen des Seiten-Designers, die die Auswahl von Inhalten erleichtern:

• Produktsuche. Suchen und wählen Sie mehrere Produkte auf einmal aus. Diese werden als Tags angezeigt, die Sie ganz einfach hinzufügen und entfernen können.
• Kategoriesuche. Wählen Sie Kategorien aus und zeigen Sie automatisch Produkte daraus an.
• Landingpage-Suche. Wählen Sie Landingpages aus und rufen Sie deren Produkte ab.
• Smart-Link-Feld. Durchsuchen Sie Produkte, Kategorien, Landingpages, statische Seiten und Blogbeiträge. Jedes Ergebnis ist mit einem Farbcode gekennzeichnet, der den Typ angibt.
• Videofeld. Lade ein Hintergrundvideo direkt in diesem Bereich hoch oder wähle es aus, z. B. für das Hero-Banner. Unterstützt MP4 und WebM und verwendet ein Bild im selben Bereich als Platzhalter.

In der Produktliste und im Produktkarussell von Montana kannst du Produkte aus mehreren Quellen kombinieren (handverlesene Produkte, Kategorien und Landingpages). Das System entfernt automatisch Duplikate.

Erfahre mehr in unserem Blogbeitrag: Intelligentere Feldtypen im Seiten-Designer.

So bestimmt dein Theme, was der Seiten-Designer kann

Der Seiten-Designer ist der Rahmen. Die Blöcke selbst stammen aus deinem Theme. Deshalb können zwei Shops im selben Seiten-Designer sehr unterschiedliche Möglichkeiten haben, und das erklärt die meisten Fragen nach dem Motto „Warum habe ich diesen Block nicht?“. Konkret bestimmt das Theme:

• Welche Blöcke verfügbar sind. Das Modul-Panel zeigt genau die Blöcke an, die dein Theme bereitstellt – weder mehr noch weniger.
• Welche Felder jeder Block hat. Zwei Themes können beide eine Produktliste haben, jedoch mit völlig unterschiedlichen Einstellungen. In Delaware füllst du ein „Product Selector“-Feld mit einem Kategorie-Tag aus, während du in Montana Kategorien suchst und diese anklickst.
• Wie die Felder heißen. „Delaware“ ist ein englisches Theme, daher sind die Feldnamen auf Englisch. „DelawareDK“ und „Montana“ sind dänische Themes und zeigen dänische Feldnamen an. Es handelt sich um die Theme-eigenen Texte, nicht um Ihre Sprachauswahl im Admin-Bereich.
• Wie der Block aussieht. Design, Farben, Abstände und das responsive Verhalten sind im Theme festgelegt. Dieselbe Produktliste sieht daher in zwei Themes nicht gleich aus.
• Welche Seitentypen gestaltet werden können. Ein Theme muss nicht alle Seitentypen unterstützen.
• Ob Split-Blöcke aktiviert sind. Die Möglichkeit, Abschnitte sowohl über als auch unter dem Hauptinhalt der Seite zu platzieren, ist eine Einstellung im Theme.
• Ob Theme-Tags vorhanden sind. Die zusätzlichen Inhaltsbereiche, die Sie zusätzlich zu den normalen Seiten gestalten können, werden vom Theme definiert. Alaska2 verfügt beispielsweise über Platz für vier Fußzeilenspalten und eine untere Zeile.

Daher kann das Modul-Panel leer sein

Wenn du ein neues Layout erstellst, zeigt der Seiten-Designer immer alle festen Seitentypen im Dropdown-Menü an, unabhängig davon, welches Theme du verwendest. Die Blöcke werden jedoch erst angezeigt, wenn das Theme auch genau diesen Seitentyp unterstützt. Wenn du beispielsweise die Adressseite in einem Theme ohne Blöcke für die Checkout-Schritte auswählst, erhältst du ein leeres Seitenlayout ohne Module zur Auswahl.

• Montana und MontanaB2B unterstützen alle Seitentypen, einschließlich aller Schritte im Checkout, der Bestellseite, des Rückgabecenters und der Wunschliste.
• Delaware und DelawareDK unterstützen Kategorien (und damit die Startseite), Produkte, Landingpages, statische Seiten, Blogbeiträge, die Suchseite, den Warenkorb, die Bestellbestätigungsseite, die Anmeldung, die Kontoerstellung und die Bestellungen des Benutzers. Sie unterstützen hingegen nicht die Adressseite, die Versandseite, die Autorisierungsseite, die Zahlungsseite, die Seite für Zusatzkäufe, die Bestellseite, das Rücksendezentrum oder die Wunschliste.
• Ältere und einfachere Themes können auf wenige Seitentypen beschränkt sein. „California“ verfügt beispielsweise nur über Blöcke für statische Seiten, Kategorien und Landingpages.

Ist das Bedienfeld leer, handelt es sich also nicht um einen Fehler im Seiten-Designer. Es liegt daran, dass das Theme keine Blöcke für diesen Seitentyp enthält.

Was passiert, wenn du das Theme wechselst?

Deine Abschnitte und deren Inhalte gehören zum Seitenlayout, nicht zum Theme, sodass sie beim Wechsel des Themes nicht verschwinden. Das neue Theme muss den Block jedoch kennen, um ihn anzeigen zu können:

• Ist der Block im neuen Theme nicht vorhanden, wird der Inhalt des Abschnitts nicht angezeigt. In Montana erscheint stattdessen eine deutliche Meldung auf der Seite, dass der Abschnitt fehlt. Die Meldung ist auch für Ihre Kunden sichtbar, daher sollte sie umgehend behoben werden.
• Ist der Block vorhanden, jedoch mit anderen Feldern, bleibt der Inhalt erhalten. Die Felder, die das neue Theme nicht kennt, werden einfach nicht verwendet. Wenn du beispielsweise von Delaware zu Montana wechselst, muss die Produktauswahl in einer Produktliste neu vorgenommen werden, da Delaware ein Tag speichert, während Montana konkrete Produkte, Kategorien oder Landingpages speichert.
• Wenn du zum alten Theme zurückwechselst, ist alles wie zuvor.

Überprüfe daher deine Seiteneinstellungen und sieh sie dir direkt nach einem Theme-Wechsel in der Vorschau an.

Eigene Themes und Themes aus dem Theme-Shop

Wenn du ein eigenes Theme in deinem Shop hast, werden die Blöcke von dort geladen. Das Gleiche gilt für ein Theme aus dem Theme-Shop. Die Reihenfolge ist: zuerst dein eigenes Theme, dann ein Theme aus dem Theme-Shop und schließlich eines der Standard-Themes von Shoporama. Wenn du einen neuen Block in deinem eigenen Theme haben möchtest, ist das eine Aufgabe für deinen Theme-Entwickler. Siehe auch: Welche Themes gibt es bei Shoporama?

Split Blocks: Blöcke über und unter dem Inhalt

Wenn dein Theme Split Blocks unterstützt, kannst du Blöcke in zwei Zonen platzieren: oberhalb und unterhalb des Hauptinhalts der Seite. Das bietet mehr Flexibilität beim Layout. Du kannst beispielsweise ein Hero-Banner über der Produktliste und Empfehlungen darunter platzieren.

Wenn „Split Blocks“ aktiviert ist, zeigt der Seiten-Designer zwei separate Listen an, zwischen denen der „Hauptinhalt der Seite“ visuell markiert ist. Du kannst Blöcke frei zwischen den beiden Zonen verschieben.

Vorschau-Link: Entwürfe mit Kollegen und Kunden teilen

Wenn du an einer neuen Version eines Seitenlayouts arbeitest, musst du das Ergebnis möglicherweise einem Kollegen oder Kunden zeigen, bevor du es live schaltest. Das kannst du mit dem Vorschau-Link tun: einem teilbaren Link, der dein Layout im Shop anzeigt, auch wenn dieser offline ist.

So funktioniert es:

1. Suche das Layout in der Seiten-Designer-Übersicht oder öffne es zur Bearbeitung.
2. Klicke auf das Augensymbol in der Liste oder auf die Schaltfläche „Vorschau“ oben in der Bearbeitungsansicht. Der Link öffnet den Shop in einem neuen Tab, in dem dein Layout aktiviert ist.
3. Wenn du den Link mit einem Kollegen oder Kunden teilen möchtest, kopiere ihn aus der Adressleiste des neuen Tabs. Du kannst auch mit der rechten Maustaste auf das Augensymbol in der Übersicht klicken und die Linkadresse kopieren.

Vorschau-Links werden weder von Google noch von anderen Suchmaschinen indexiert, sodass du sie bedenkenlos teilen kannst, ohne dass sie in den Suchergebnissen erscheinen.

Der Link ist so lange gültig, bis die Seitenkonfiguration gelöscht wird. Soll ein geteilter Link zurückgezogen werden, z. B. weil er an jemanden gesendet wurde, der keinen Zugriff mehr haben soll, schreibe bitte an support@shoporama.dk, dann setzen wir ihn für dich zurück.

Mobil und Desktop: So verhalten sich deine Bereiche

Du erstellst ein einziges Layout, und dasselbe Layout wird auf allen Bildschirmen angezeigt. Es gibt keine separate Mobilversion, die du extra bearbeiten musst. Stattdessen sind die Blöcke responsiv: Sie passen die Anzahl der Spalten automatisch an und stapeln den Inhalt untereinander, wenn der Bildschirm schmaler wird. Hier erfährst du, was in Montana tatsächlich passiert, damit du weißt, womit du beim Erstellen rechnen kannst.

Die Anzahl der Spalten ändert sich mit der Bildschirmbreite

Die meisten Rasterblöcke arbeiten mit drei Stufen: Smartphone, Tablet ab ca. 768 Pixeln und Computer ab ca. 1024 Pixeln.

• Produktliste: 2 Produkte pro Zeile auf dem Smartphone, 3 auf dem Tablet und 4 auf dem Computer.
• Produktkarussell und Kategoriekarussell. 2 sichtbare Elemente auf dem Smartphone, 3 ab ca. 640 Pixel und 4 bis 6 auf großen Bildschirmen. Auf dem Smartphone wischt man mit dem Finger durch sie hindurch.
• Kategorieliste. Hängt von der Ansicht ab: Große Bilder ergeben 1 pro Zeile auf dem Smartphone, mittlere Bilder 2, kleine Bilder 3 und Miniaturansichten ganze 5.
• Bildergalerie. Das Feld „Spalten“ kommt erst ab dem Tablet zum Tragen. Auf dem Smartphone werden unabhängig von Ihrer Auswahl immer 2 Spalten angezeigt, es sei denn, Sie wählen 1 Spalte in voller Breite.
• Werte/USPs. 1 pro Zeile auf dem Smartphone, 2 ab ca. 640 Pixel und die von Ihnen gewählte Anzahl pro Zeile erst ab ca. 1024 Pixel.
• Blogliste. 1 pro Zeile auf dem Smartphone, 2 auf dem Tablet und die von Ihnen gewählte Anzahl pro Zeile auf dem Computer.

Zweispaltige Blöcke werden gestapelt, und die Reihenfolge spielt eine Rolle

• Text und Bild. Auf dem Smartphone werden die beiden Spalten übereinander angeordnet. Wenn Sie „Bildplatzierung: Links“ wählen, steht das Bild oben und der Text darunter. Wenn Sie „Rechts“ wählen, erscheint der Text zuerst und das Bild darunter. Wenn Sie einen wichtigen Punkt haben, der auf dem Smartphone zuerst gelesen werden soll, wählen Sie „Rechts“.
• Produktblock. Hier steht das Produktbild auf dem Smartphone immer ganz oben, unabhängig davon, ob Sie die Bildplatzierung „Links“ oder „Rechts“ gewählt haben. Die Einstellung gilt erst ab dem Tablet.
• Zweispaltiger Text, Kategorie-Feature, Produkt-Feature und Newsletter mit geteiltem Bild. Auf kleinen Bildschirmen werden alle Elemente in einer Spalte angezeigt. Die Feature-Blöcke und der Newsletter wechseln erst ab einer Breite von ca. 1024 Pixeln in zwei Spalten, also erst auf dem Computer.
• Verteilungen wie 60/40 oder 33/66 gelten erst ab Tablet-Größe. Auf dem Smartphone nehmen beide Teile die volle Breite ein.

Blöcke, bei denen du selbst mobil denken musst

• Großes Banner. Die Höhe wählst du zwischen „Klein“ (40 % der Bildschirmhöhe), „Mittel“ (60 %) oder „Groß“ (gesamte Bildschirmhöhe). Wenn du „Groß“ wählst, füllt das Banner den gesamten Bildschirm des Smartphones aus, und alles andere liegt unterhalb der Falz. Das kann genau das sein, was du willst, aber sei dir dessen bewusst.
• Die Überschriftengröße im großen Banner gibt es gerade deshalb, weil lange Überschriften auf schmalen Bildschirmen unschön umgebrochen werden. Verringere die Größe auf „Klein“, wenn deine Überschrift viel Platz einnimmt.
• Kategorie-Funktion. Die Anzahl der Kategoriebilder neben dem Text ist auf allen Bildschirmen gleich. Wenn du „Miniatur“ wählst, erhältst du 5 kleine Bilder nebeneinander, auch auf einem Smartphone. Wähle „Große Bilder“, wenn bei dir der Mobilbereich am wichtigsten ist.
• Textbanner. Die Schriftgrößen „Extra groß“ und „Riesig“ nehmen auf einem Smartphone viel Platz ein. Halte den Kampagnentext kurz.
• Bilder. Das Theme liefert die Bilder automatisch im WebP-Format und in verschiedenen Größen, sodass ein Smartphone eine kleinere Datei lädt als ein Computer. Du musst dennoch ein scharfes Bild in guter Auflösung hochladen. Mehr dazu findest du unter „Optimierung von Bildern für Mobilgeräte“.

So überprüfst du das Ergebnis

1. Öffne den Vorschau-Link auf deinem eigenen Smartphone. Das ist der realistischste Test, und du kannst dich im Shop umsehen, während die Vorschau aktiv ist.
2. Alternativ kannst du das Browserfenster auf dem Computer schmaler ziehen und beobachten, wie sich die Abschnitte dabei ändern.
3. Wenn du einen Split-Test für das Seitenlayout durchführst, kannst du in den Statistiken nach „Mobil“, „Tablet“ oder „Computer“ filtern und sehen, ob eine Variante auf dem einen Bildschirm besser abschneidet als auf dem anderen. Mehr dazu findest du unter „So erstellst und führst du einen Split-Test durch“.

Für Entwickler

In Montana wird jeder Abschnitt in ein `section`-Element mit dem Attribut `data-section` eingeschlossen, dessen Wert die ID des Blocks ist, z. B. `data-section="hero"`. Dies bietet eine zuverlässige Möglichkeit, einen bestimmten Abschnittstyp bei bestimmten Bildschirmbreiten über das eigene Stylesheet des Shops auszublenden oder anzupassen, ohne das eigentliche Theme zu verändern. Mehr dazu findest du unter „Eigenes Stylesheet (Custom CSS)“.

Häufig gestellte Fragen

Kann ich ein separates Layout für die Startseite erstellen?

Ja. Die Startseite ist die Kategorie, die als Startseitenkategorie markiert ist. Der schnellste Weg ist die Karte „Startseite“ in der Seiten-Designer-Übersicht: Klicke auf „Layout erstellen“, dann wird eine Kategoriekonfiguration erstellt, die an deine Startseitenkategorie gebunden ist. Diese Konfiguration wird nur auf der Startseite verwendet, während Ihre allgemeine Kategoriekonfiguration auf allen anderen Kategorieseiten angewendet wird.

Gibt es in Sidedesigner eine 404-Seite?

Nein. Die 404-Seite ist kein unterstützter Seitentyp in Page Builder. Sie wird über dein Theme gesteuert. Wenn du das Erscheinungsbild der 404-Seite ändern möchtest, musst du die Vorlagen des Themes anpassen oder deinen Theme-Entwickler fragen.

Aus welchen Blöcken kann ich wählen?

Das hängt von Ihrem Theme ab, und die Blöcke haben nicht in allen Themes denselben Namen. Delaware, DelawareDK und Montana verfügen unter anderem über „Hero“ (in Montana „Großes Banner“), „Banner“, „Text“, „Text mit Bild“, „Produktliste“, „Produkt-Slider“ (in Montana „Produkt-Karussell“), „Kategorieliste“, einen Bildraster-Block („Image Grid“ in Delaware und DelawareDK, „Bildergalerie“ in Montana), eine Blogliste, einen USP-Block („Value Propositions“ in Delaware, „Wertversprechen“ in DelawareDK und „Werte/USPs“ in Montana), einen Newsletter-Block sowie einen Block für freien HTML-Code. Trustpilot ist in Delaware und DelawareDK verfügbar, während Textbanner sowie Leerzeichen & Trennzeichen in Montana und MontanaB2B zu finden sind. Öffnen Sie eine Konfiguration und klicken Sie auf den Reiter „Module“ am rechten Rand, um die vollständige Liste für Ihr Theme anzuzeigen.

Sehen meine Seiten aus dem Seiten-Designer auch auf Mobilgeräten gut aus?

Ja. Die Standardblöcke in Delaware, DelawareDK und Montana sind vollständig responsiv und passen sich automatisch an mobile Bildschirme an. Hero-Bilder werden verkleinert, Spalten werden untereinander gestapelt und Produkt-Slider werden zu wischbaren Karussells. Verwende komprimierte Bilder, damit die Seite auch bei mobiler Datennutzung schnell lädt.

Wie viele spezifische Konfigurationen kann ich erstellen?

Es gibt keine Obergrenze. Du kannst so viele spezifische Konfigurationen erstellen, wie du möchtest. Jede Konfiguration kann einem oder mehreren spezifischen Produkten, Kategorien, Landingpages, statischen Seiten oder Blogbeiträgen zugeordnet werden.

Beeinflussen viele „Sidedesigner“-Blöcke die Seitengeschwindigkeit?

Die Ausgabe des Seiten-Designers wird zwischengespeichert, sodass die Anzeige selbst schnell erfolgt. Was die Geschwindigkeit in der Regel beeinflusst, ist die Anzahl der Bilder und Videos auf der Seite. Verwende komprimierte Bilder und „Lazy Loading“, wo immer dies möglich ist.

Kann ich einen Block zwischen zwei Layouts verschieben?

Nein, Blöcke sind an das Layout gebunden, in dem sie erstellt wurden. Du kannst jedoch einen Block innerhalb desselben Layouts duplizieren und den Inhalt manuell in ein anderes Layout kopieren.

Kann ich während der Bearbeitung sehen, wie die Seite aussieht?

Ja. Du kannst oben in der Bearbeitungsansicht auf die Schaltfläche „Vorschau“ klicken. Daraufhin öffnet sich ein Vorschau-Link zum Shop in einem neuen Tab. Die Reihenfolge der Abschnitte wird automatisch gespeichert, wenn du sie verschiebst, aber Text, Bilder und die übrigen Felder werden erst gespeichert, wenn du auf „Speichern“ klickst. Aktualisiere anschließend den Vorschau-Tab, um das Ergebnis zu sehen. Auch wenn die Einrichtung offline ist, kannst du sie über den Vorschau-Link ansehen und den Link mit Kollegen oder Kunden teilen.

Kann ich den Checkout mit dem Seiten-Designer gestalten?

Ja, sofern Ihr Theme dies unterstützt. Jeder Schritt im Checkout (Adressseite, Versandseite, Bestätigungsseite, Zahlungsseite und Seite „Vielen Dank für Ihre Bestellung“) ist ein fester Seitentyp, dem Sie beispielsweise einen USP-Block, einen Textblock oder einen Block mit freiem Code mit zusätzlichen Sicherheitshinweisen hinzufügen können. Montana und MontanaB2B unterstützen alle Schritte des Bestellvorgangs, während Delaware und DelawareDK nur die Seite „Vielen Dank für Ihre Bestellung“ unterstützen. Alaska2 unterstützt die Adressseite, die Versandseite und die Zahlungsseite, jedoch weder die Bestätigungsseite noch die Seite „Vielen Dank für Ihre Bestellung“. Die Checkout-Felder selbst werden vom Theme gesteuert, nicht von den Blöcken.

Was ist der Unterschied zwischen einem „dynamischen“ und einem „festen“ Seitentyp?

Es gibt viele dynamische Seitentypen (Kategorie, Produkt, Landingpage, statische Seite, Blogbeitrag), sodass Sie sowohl eine allgemeine als auch mehrere spezifische Konfigurationen haben können. Feste Seiten (Warenkorb, Checkout-Schritte, Bestellseite, Anmeldung usw.) gibt es nur jeweils eine pro Shop, sodass sie nur ein Layout haben können.

Ich kann den Block nicht finden, den mein Kollege in seinem Shop hat. Warum?

Weil die Blöcke aus dem Theme stammen und nicht aus dem Seiten-Designer. Sie verwenden wahrscheinlich zwei verschiedene Themes. Öffne eine Seitenkonfiguration und klicke auf den Reiter „Module“ am rechten Rand – dann siehst du genau die Blöcke, über die dein Shop verfügt. Fehlt dir ein bestimmter Block, hast du zwei Möglichkeiten: Entweder wechselst du das Theme oder du lässt einen Entwickler den Block in dein eigenes Theme integrieren.

Kann ich ein Layout für Mobilgeräte und ein anderes für den Computer erstellen?

Nein. Ein Seitenlayout gilt für alle Geräte, und die Blöcke passen sich automatisch an die Bildschirmbreite an. Wenn du die Darstellung für Mobilgeräte optimieren möchtest, arbeitest du an der Reihenfolge der Abschnitte, der Höhe des großen Banners, der Größe der Überschriften und daran, wie viel Inhalt vor dem Wichtigsten angezeigt wird. Wenn du einen Split-Test durchführst, kannst du anschließend in den Statistiken sehen, ob eine Variante auf dem Handy besser abschneidet als auf dem Computer.

Was passiert mit meinen Abschnitten, wenn ich das Theme wechsle?

Sie bleiben erhalten. Abschnitte und Inhalte werden in der Seiteneinrichtung gespeichert und nicht im Theme. Das neue Theme zeigt jedoch nur die Blöcke an, die es selbst kennt; Felder, die es nicht kennt, werden nicht verwendet. Überprüfe daher deine Seitenlayouts und sieh sie dir direkt nach einem Theme-Wechsel in der Vorschau an. Wenn etwas falsch aussieht, kannst du zum alten Theme zurückwechseln, und dann ist alles wieder wie zuvor.

Das Modul-Panel ist auf der Seite, die ich gerade erstellt habe, leer. Stimmt da etwas nicht?

Nein. Das bedeutet, dass dein Theme keine Blöcke für genau diesen Seitentyp enthält. Der Seiten-Designer zeigt beim Erstellen einer Seite immer alle festen Seitentypen an, aber das Theme entscheidet, ob etwas hinzugefügt werden kann. Das zeigt sich am häufigsten bei den Checkout-Schritten, die nicht alle Themes unterstützen. Lösche die Konfiguration erneut oder wähle einen Seitentyp, den dein Theme unterstützt.

Wenn du Fragen zum Seiten-Designer hast, kannst du dich gerne unter support@shoporama.dk an uns wenden.