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 auf die ausgewählte 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 besteht aus festen Seiten, für die es pro Shop nur ein Layout geben kann:

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

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

So erstellen Sie ein Seitenlayout

1. Gehe zu Shop » Design » Seiten-Designer.
2. Klicken Sie auf „Neu erstellen“.
3. Wähle aus, für welchen Seitentyp das Layout gelten soll.
4. Bei dynamischen Seitentypen (Kategorie, Produkt, Landingpage, Statische Seite, Blogbeitrag) kannst du wählen, ob das Layout für alle Seiten dieses Typs oder nur für bestimmte Seiten gelten soll. Für statische Seiten kann es nur ein Layout pro Shop geben.
5. Gib der Konfiguration gegebenenfalls einen Namen, damit du sie in der Liste wiedererkennen kannst.
6. Speichern Sie die Einstellung und fügen Sie nun Blöcke hinzu.

So gestaltest 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 direkt in der Kategorie). Weitere Informationen findest du unter „Einrichtung der Startseite“.
2. Gehe zum Seiten-Designer und klicke auf „Neu erstellen“.
3. Wähle den Seitentyp „Kategorie (inkl. Startseite)“ aus.
4. Wähle „Spezifische Seiten “ und verknüpfe deine Startseitenkategorie.
5. Füge die Blöcke hinzu, aus denen die Startseite bestehen soll, z. B. einen Hero-Bereich, einen Produkt-Slider, Wertversprechen und eine Blog-Liste.

Die spezifische Konfiguration wird nun auf der Startseite angewendet, während für Ihre übrigen Kategorien die allgemeine Kategoriekonfiguration (oder die Standardeinstellung des Themes) gilt.

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. 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. „Folgen“-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.
• Blogliste. Zeige die neuesten Blogbeiträge an.
• Trustpilot. Trustpilot-Bewertungs-Widget.
• Wertversprechen. Heben Sie Ihre Alleinstellungsmerkmale hervor, z. B. kostenlosen Versand oder schnelle Lieferung.
• Schaltfläche. Call-to-Action-Schaltfläche mit Link.
• HTML. Reines HTML für volle Kontrolle über den Inhalt.

Wenn Sie ein anderes Theme verwenden, kann die Liste anders aussehen. Klicken Sie in einem Layout auf „Block hinzufügen“, um zu sehen, welche Blöcke Ihr Theme tatsächlich unterstützt.

Drag & Drop

Du kannst die Reihenfolge deiner Blöcke ganz einfach ändern, indem du sie nach oben oder unten ziehst. Fasse die Überschrift des Blocks an und ziehe sie 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. Zu den typischen Optionen gehören:

• Text und Überschriften. Schreiben Sie 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ügen Sie URLs und Schaltflächentexte hinzu.
• Wiederholbare Elemente. Bei 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 Bereiche des Seiten-Designers (Produktliste, Produkt-Slider und Produkt-Feature) über ein Feld namens „Product Selector“. Dieses Feld dient dazu, anzugeben, welche Produkte in dem jeweiligen Bereich 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 „Newest Products“, „Popular Products“ oder „Most Sold Products“ als Produkttyp auswählst, musst du das Feld „Product Selector“ nicht ausfüllen. Die Produkte werden automatisch abgerufen.

Was muss ich in das Feld eingeben?

Das hängt vom ausgewählten Produkttyp ab:

• Nach Kategorie-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. 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

Bei dynamischen Seitentypen gibt es zwei Möglichkeiten, den Seiten-Designer zu verwenden:

• 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 gleichzeitig 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 farbcodierten Badge gekennzeichnet.
• 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 wie die Einträge.

In Montanas Produktliste und im Produktslider kannst du Produkte aus mehreren Quellen kombinieren (handverlesene Produkte, Kategorien und Landingpages). Das System entfernt automatisch Duplikate.

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

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

Wenn Ihr Theme Split Blocks unterstützt, können Sie Blöcke in zwei Zonen platzieren: oberhalb und unterhalb des Hauptinhalts der Seite. Das sorgt für mehr Flexibilität beim Layout. Sie können beispielsweise ein Hero-Banner über der Produktliste und Empfehlungen darunter platzieren.

Wenn Split Blocks aktiv sind, 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 einem Vorschau-Link tun: einem teilbaren Link, der dein Layout im Shop anzeigt, auch wenn dieser offline ist.

So funktioniert es:

1. Suchen Sie das Layout in der Seiten-Designer-Übersicht oder öffnen Sie 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, kannst du ihn aus der Adressleiste kopieren oder den Reiter „Einstellungen“ nutzen, wo er als Feld angezeigt wird, das du ganz einfach kopieren kannst.

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

Wenn ein Link zurückgezogen werden soll, z. B. weil er an jemanden weitergegeben wurde, der keinen Zugriff mehr haben soll, kannst du neben dem URL-Feld auf „Neuer Link“ klicken. Der alte Link wird sofort deaktiviert und ein neuer generiert.

Häufig gestellte Fragen

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

Ja. Die Startseite ist die Kategorie, die als Startseitenkategorie markiert ist. Erstelle eine Seiten-Designer-Konfiguration vom Typ „Kategorie“, wähle „bestimmte Seiten“ aus und ordne deine Startseitenkategorie zu. Dann wird diese Konfiguration nur auf der Startseite angewendet, während deine allgemeine Kategoriekonfiguration auf allen anderen Kategorieseiten zum Einsatz kommt.

Gibt es im Seiten-Designer eine 404-Seite?

Nein. Die 404-Seite ist kein unterstützter Seitentyp im Seiten-Designer. 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. Delaware, DelawareDK und Montana bieten unter anderem „Hero“, „Banner“, „Text“, „Text mit Bild“, „Produktliste“, „Produkt-Slider“, „Kategorieliste“, „Bildraster“, „Blogliste“, „Trustpilot“, „Value Propositions“, „Schaltfläche“ und einen HTML-Block für freien Code. Klicke in einer Konfiguration auf „Block hinzufügen“, um die vollständige Liste für dein 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 das eigentliche Rendern 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. Klicken Sie oben in der Bearbeitungsansicht auf die Schaltfläche „Vorschau“ – daraufhin öffnet sich ein Vorschau-Link zum Shop in einem neuen Tab. Der Seitendesigner speichert Änderungen automatisch, sodass Sie nach jeder Änderung lediglich den Vorschau-Tab aktualisieren müssen, um das Ergebnis zu sehen. Auch wenn das Layout offline ist, kannst du es über den Vorschau-Link ansehen – und du kannst den Link mit Kollegen oder Kunden teilen.

Kann ich den Checkout mit dem Seiten-Designer gestalten?

Ja. Jeder Schritt im Checkout (Adressseite, Versandseite, Bestätigungsseite, Zahlungsseite und Seite „Vielen Dank für Ihre Bestellung“) ist ein fester Seitentyp, dem Sie beispielsweise Trustpilot-Widgets, Wertversprechen, Infoboxen und einen HTML-Block mit zusätzlichen Vertrauenssignalen hinzufügen können. Die Checkout-Felder selbst werden jedoch vom Theme gesteuert, nicht von den Blöcken.

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

Dynamische Seitentypen (Kategorie, Produkt, Landingpage, Statische Seite, Blogbeitrag) gibt es in großer Zahl, sodass du sowohl eine allgemeine als auch mehrere spezifische Konfigurationen haben kannst. Feste Seiten (Warenkorb, Checkout-Schritte, Bestellseite, Anmeldung usw.) gibt es nur jeweils eine pro Shop, sodass sie nur ein Layout haben können.

Wenn Sie Fragen zum Seitendesigner haben, können Sie sich gerne unter support@shoporama.dk an uns wenden.