Seitengestalter

Mit Page Designer erstellen Sie Ihr eigenes Seitenlayout, indem Sie Inhaltsblöcke hinzufügen, verschieben und konfigurieren. Sie können einzigartige Layouts für Ihre Titelseite, Kategorieseiten, Produktseiten, Landing Pages, Checkout und viele weitere Seitentypen erstellen. Und das alles, ohne zu programmieren.

Wo kann ich Page Designer finden?

Sie finden den Seiten-Designer unter Konto " Online-Shop " Seiten-Designer in Ihrer Shoporama-Verwaltung. Hier können Sie neue Seiten erstellen oder bestehende Seiten bearbeiten.

Welche Arten von Seiten unterstützt der Page Designer?

Page Designer unterstützt zwei Gruppen von Seitentypen. Die erste Gruppe sind dynamische Seiten, bei denen Sie wählen können, ob die Einstellungen für alle Seiten des Typs oder nur für ausgewählte Seiten gelten sollen:

• Kategorie (einschließlich der Titelseite). Das Layout aller Kategorieseiten und der Titelseite. Die Startseite ist die Kategorie, die als Kategorie für die Startseite markiert ist. Wenn Sie also ein bestimmtes Layout für die Startseite wünschen, erstellen Sie eine spezielle Kategorieeinrichtung, die auf die ausgewählte Kategorie verweist.
• Produkt. Das Layout der Produktseiten.
• Landing Page. Das Layout der Landing Pages.
• Statische Seite. Das Layout von statischen Seiten, wie z.B. Über uns und Allgemeine Geschäftsbedingungen.
• Blog-Beiträge. Das Layout von Blogeinträgen.

Die zweite Gruppe sind feste Seiten, bei denen es nur ein Layout pro Shop geben kann:

• Die Suchseite
• Der Warenkorb
• Adressseite (in der Kaufabwicklung)
• Versandseite (in der Kasse)
• Autorisierungsseite (in der Kaufabwicklung)
• Die Zahlungsseite
• Seite "Danke für die Bestellung
• Händlerseite
• Bestellseite
• Rückgabe-Center
• Login-Seite
• Bestellungen des Benutzers
• Wunschzettel des Benutzers

Wenn Ihr Thema benutzerdefinierte Themen-Tags (wiederverwendbare Inhalts-Slots) definiert, können Sie auch Seiten-Designer-Setups für diese erstellen. Sie erscheinen in einer separaten Gruppe, wenn sie erstellt werden.

Wie man eine Seite einrichtet

1. Gehen Sie zu Konto " Online Shop " Seiten-Designer.
2. Klicken Sie auf Neu erstellen.
3. Wählen Sie den Seitentyp aus, für den die Einrichtung gelten soll.
4. Bei dynamischen Seitentypen (Kategorie, Produkt, Landing Page, Static Page, Blog Post) können Sie wählen, ob die Einrichtung für alle Seiten dieses Typs oder nur für bestimmte Seiten gelten soll. Für feste Seiten kann es nur ein Layout pro Shop geben.
5. Optional können Sie der Einrichtung einen Namen geben, damit Sie sie in der Liste wiedererkennen können.
6. Speichern Sie und fügen Sie Blöcke hinzu.

So bauen Sie die Startseite auf

Die Titelseite ist eine reguläre Kategorie, die als Titelseitenkategorie gekennzeichnet ist. Wenn Sie der Titelseite ein besonderes Aussehen geben möchten, gehen Sie wie folgt vor:

1. Vergewissern Sie sich, dass Sie eine Kategorie als Titelseitenkategorie gekennzeichnet haben (dies geschieht in der Kategorie selbst). Weitere Informationen finden Sie unter Einrichten der Startseite.
2. Gehen Sie zum Seitendesigner und klicken Sie auf Neu erstellen.
3. Wählen Sie den Seitentyp Kategorie (einschließlich Titelseite).
4. Wählen Sie Spezifische Seiten und weisen Sie die Kategorie Ihrer Titelseite zu.
5. Fügen Sie die Blöcke hinzu, aus denen sich die Startseite zusammensetzt, z. B. eine Hero-Sektion, einen Produkt-Slider, Wertangebote und eine Blog-Liste.

Die spezifische Einrichtung wird nun auf der Titelseite verwendet, während Ihre anderen Kategorien mit der allgemeinen Kategorieeinrichtung (oder dem Theme-Standard) arbeiten.

Verfügbare Blocktypen

Die verfügbaren Blocktypen hängen von Ihrem Thema ab. Hier sind die in Delaware, DelawareDK und Montana am häufigsten verwendeten:

• Held. Großer Heldenabschnitt mit Überschrift, Beschreibung, Schaltfläche und Hintergrundbild.
• Banner. Bilder im Karussell-/Slider-Format.
• Text. Freier Textblock mit Überschrift und Formatierung.
• Text mit Bild. Zwei Spalten mit Text auf einer Seite und Bild auf der anderen.
• Zweispaltiger Text. In zwei Spalten unterteilter Text.
• Produktliste. Zeigen Sie Produkte aus einer Kategorie, einer Landing Page oder basierend auf der Beliebtheit/dem neuesten Produkt.
• Produkt-Schieberegler. Produkte im Karussellformat.
• Kategorie-Liste. Zeigen Sie Produktkategorien an.
• Kategorie-Schieberegler. Kategorien im Karussellformat.
• Bild-Gitter. Raster mit Bildern und optionalen Links.
• Blog-Liste. Zeigt die letzten Blog-Einträge.
• Trustpilot. Widget für Trustpilot-Bewertungen.
• Wertvorstellungen. Heben Sie Ihre USPs hervor, wie z.B. kostenloser Versand oder schnelle Lieferung.
• Schaltfläche. Call-to-Action-Button mit Link.
• ReinesHTML für volle Kontrolle über den Inhalt.

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

Ziehen und Ablegen

Sie können die Reihenfolge Ihrer Blöcke ganz einfach ändern, indem Sie sie nach oben oder unten ziehen. Greifen Sie die Kopfzeile des Blocks und ziehen Sie ihn an die gewünschte Position. Die Reihenfolge wird automatisch gespeichert.

Sie können Blöcke auch zusammenklappen, um eine bessere Übersicht zu erhalten, wenn Sie viele Blöcke auf einer Seite haben.

Konfiguration der Blöcke

Jeder Block hat je nach Typ seine eigenen Einstellungen. Typische Optionen sind:

• Text und Überschriften. Schreiben Sie direkt in einem Texteditor.
• Bilder. Laden Sie Bilder direkt von Ihrem Computer hoch.
• Hintergrundvideo. Laden Sie ein MP4/WebM-Video hoch oder wählen Sie es aus, z. B. als Hintergrund in einem Hero-Banner. Das Video wird automatisch, geräuschlos und in einer Schleife auf allen Geräten abgespielt.
• Produktauswahl. Wählen Sie bestimmte Produkte, Kategorien oder Landing Pages aus.
• Links und Schaltflächen. Fügen Sie URLs und Schaltflächentexte hinzu.
• Wiederholbare Elemente. Einige Blöcke (z.B. Banner) erlauben es Ihnen, mehrere Elemente im selben Block hinzuzufügen.

Sie können jedem Block einen eigenen Namen geben, um ihn in der Übersicht leichter zu finden.

Produktselektor in Delaware/DelawareDK

In Delaware und DelawareDK gibt es in mehreren Abschnitten des Page Designers (Produktliste, Produktslider und Produktmerkmal) ein Feld namens Produktselektor. Dieses Feld wird verwendet, um festzulegen , welche Produkte in dem Abschnitt angezeigt werden sollen.

So verwenden Sie den Produktselektor

1. Wählen Sie zunächst einen Produkttyp aus dem Dropdown-Menü aus, zum Beispiel "Nach Kategorie-Tag", "Nach Landing Page-Tag" oder "Nach Produkt-IDs".
2. Füllen Sie dann das Feld "Produktauswahl" mit dem entsprechenden Wert aus (siehe unten).

Wenn Sie "Neueste Produkte", "Beliebte Produkte" oder "Meistverkaufte Produkte" als Produkttyp auswählen, müssen Sie das Feld Produktauswahl nicht ausfüllen. Die Produkte werden automatisch abgerufen.

Was soll ich in das Feld schreiben?

Das hängt von der gewählten Produktart ab:

• Nach Kategorie-Tag. Geben Sie den Kategorie-Tag ein. Sie finden den Tag, indem Sie die Kategorie im Adminbereich unter dem Feld "Tag" bearbeiten. Beispiel: Sommerangebot
• Nach Landing Page Tag. Geben Sie den Landing Page Tag ein. Sie können den Tag finden, indem Sie die Landing Page im Admin-Bereich bearbeiten. Beispiel: Nachrichten
• Nach Produkt-IDs. Geben Sie die Produkt-IDs getrennt durch Kommas ein. Sie können die ID eines Produkts in der Produktliste oder in der URL finden, wenn Sie das Produkt bearbeiten. Beispiel: 123.456.789

Allgemeine vs. spezifische Setups

Für dynamische Seitentypen gibt es zwei Möglichkeiten, den Page Designer zu verwenden:

• Allgemeine Einrichtung. Gilt für alle Seiten eines bestimmten Typs. Zum Beispiel eine Einrichtung für alle Kategorieseiten.
• Spezifische Einrichtung. Gilt nur für ausgewählte Seiten. Zum Beispiel eine spezifische Einrichtung für eine bestimmte Landing Page oder für die Kategorie der Startseite.

Spezifische Einstellungen haben Vorrang. Wenn ein Produkt eine eigene Einrichtung hat, wird diese anstelle der allgemeinen Einrichtung für die Produktseite verwendet.

Intelligentere Felder im Montana-Thema

Das Montana-Thema verwendet die neuesten Page Designer-Feldtypen, die die Auswahl von Inhalten erleichtern:

• Produktsuche. Sie können mehrere Produkte auf einmal suchen und auswählen. Sie erscheinen als Tags, die Sie leicht hinzufügen und entfernen können.
• Kategorie-Suche. Wählen Sie Kategorien aus und lassen Sie sich automatisch Produkte aus diesen Kategorien anzeigen.
• Landing Page-Suche. Wählen Sie Landing Pages aus und lassen Sie sich deren Produkte anzeigen.
• Intelligentes Link-Feld. Suchen Sie in Produkten, Kategorien, Landing Pages, statischen Seiten und Blogbeiträgen. Jedes Ergebnis wird mit einem farbcodierten Badge gekennzeichnet.
• Video-Feld. Laden Sie ein Hintergrundvideo hoch oder wählen Sie es direkt im Abschnitt aus, z. B. für das Hero-Banner. Unterstützt MP4 und WebM und verwendet ein Bild im gleichen Abschnitt wie die Einträge.

In der Produktliste und dem Produkt-Schieberegler von Montana können Sie Produkte aus verschiedenen Quellen (handverlesene Produkte, Kategorien und Landing Pages) kombinieren. Das System entfernt automatisch Duplikate.

Lesen Sie mehr in unserem Blogbeitrag: Intelligentere Feldtypen im Page Designer.

Geteilte Blöcke: Blöcke oberhalb und unterhalb des Inhalts

Wenn Ihr Thema geteilte Blöcke unterstützt, können Sie Blöcke in zwei Zonen platzieren: über und unter dem Hauptinhalt der Seite. Dadurch erhalten Sie mehr Flexibilität beim Layout. So können Sie zum Beispiel ein Hero-Banner über der Produktliste und Empfehlungen darunter platzieren.

Wenn geteilte Blöcke aktiv sind, zeigt Page Designer zwei getrennte Listen mit einer visuellen Markierung des "Hauptseiteninhalts" dazwischen an. Sie können Blöcke frei zwischen den beiden Zonen verschieben.

Vorschaulink: Entwürfe mit Kollegen und Kunden teilen

Wenn Sie an einer neuen Version eines Seitenaufbaus arbeiten, möchten Sie das Ergebnis vielleicht einem Kollegen oder Kunden zeigen, bevor Sie es in Betrieb nehmen. Dies können Sie mit dem Vorschaulink tun: ein Link, den Sie mit anderen teilen können und der Ihre Seite im Shop zeigt, auch wenn sie offline ist.

Und so funktioniert's:

1. Suchen Sie das Setup in der Übersicht des Seitendesigners oder öffnen Sie es zur Bearbeitung.
2. Klicken Sie auf das Augensymbol in der Liste oder auf die Schaltfläche Vorschau am oberen Rand der Bearbeitungsansicht. Der Link öffnet den Shop in einer neuen Registerkarte, in der Ihre Einstellungen aktiviert sind.
3. Wenn Sie den Link mit einem Kollegen oder Kunden teilen möchten, können Sie ihn aus der Adressleiste kopieren oder die Registerkarte Einstellungen verwenden, wo er als Feld erscheint, das Sie einfach kopieren können.

Vorschaulinks werden nicht von Google oder anderen Suchmaschinen indiziert, so dass Sie sie gefahrlos weitergeben können, ohne dass sie in den Suchergebnissen auftauchen.

Wenn ein Link zurückgezogen werden muss, z. B. weil er an jemanden weitergegeben wurde, der keinen Zugriff mehr haben sollte, können Sie neben dem URL-Feld auf Neuer Link klicken. Der alte Link funktioniert dann sofort nicht mehr und ein neuer wird erstellt.

Häufig gestellte Fragen

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

Ja, das können Sie. Die Titelseite ist die Kategorie, die als Titelseitenkategorie gekennzeichnet ist. Erstellen Sie eine Seiten-Designer-Einstellung des Typs Kategorie, wählen Sie "bestimmte Seiten" und weisen Sie Ihre Titelseitenkategorie zu. Dann wird diese Einstellung nur auf der Startseite verwendet und Ihre allgemeine Kategorieeinstellung wird auf allen anderen Kategorieseiten verwendet.

Gibt es eine 404-Seite in Page Designer?

Nein. Die 404-Seite ist kein unterstützter Seitentyp in Page Designer. Sie wird über Ihr Thema gesteuert. Wenn Sie das Aussehen der 404-Seite ändern möchten, müssen Sie die Theme-Vorlagen anpassen oder Ihren Theme-Entwickler fragen.

Aus welchen Blöcken kann ich wählen?

Das hängt von Ihrem Theme ab. Delaware, DelawareDK und Montana verfügen über Hero, Banner, Text, Text mit Bild, Produktliste, Produktschieber, Kategorieliste, Bilderraster, Blogliste, Trustpilot, Wertvorschläge, Button und einen freien HTML-Code-Block. Klicken Sie in einem Setup auf Block hinzufügen, um die vollständige Liste zu sehen, die für Ihr Thema gilt.

Sehen meine Page Designer-Seiten auf dem Handy gut aus?

Ja, das tun sie. Die Standardblöcke in Delaware, DelawareDK und Montana sind vollständig responsive und passen sich automatisch an mobile Bildschirme an. Hero-Bilder werden verkleinert, Spalten werden untereinander gestapelt und Produktschieber werden zu Karussells, über die man streichen kann. Wir verwenden komprimierte Bilder, damit die Website auch auf mobilen Geräten schnell ist.

Wie viele spezifische Setups kann ich haben?

Es gibt keine Obergrenze. Sie können so viele spezifische Setups erstellen, wie Sie möchten. Jedes Setup kann mit einem oder mehreren bestimmten Produkten, Kategorien, Landing Pages, statischen Seiten oder Blogbeiträgen verknüpft werden.

Wirken sich viele Page Designer-Blöcke auf die Seitengeschwindigkeit aus?

Die Ausgabe von Page Designer wird zwischengespeichert, so dass das Rendering selbst schnell ist. Was die Geschwindigkeit in der Regel beeinflusst, ist die Anzahl der Bilder und Videos auf der Seite. Verwenden Sie, wenn möglich, komprimierte Bilder und Lazy Loading.

Kann ich einen Block zwischen zwei Setups verschieben?

Nein, Blöcke sind an das Layout gebunden, in dem sie erstellt wurden. Sie können 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, das können Sie. Sie können oben in der Bearbeitungsansicht auf die Schaltfläche Vorschau klicken, woraufhin sich ein Vorschaulink zum Shop in einer neuen Registerkarte öffnet. Page Designer speichert die Änderungen automatisch, so dass Sie nur die Vorschau nach jeder Änderung aktualisieren müssen, um das Ergebnis zu sehen. Selbst wenn die Einrichtung offline ist, können Sie sie über den Vorschaulink ansehen - und Sie können den Link mit Kollegen oder Kunden teilen.

Kann ich die Kasse mit dem Seitendesigner gestalten?

Ja, das können Sie. Jeder Schritt der Kaufabwicklung (Adressseite, Versandseite, Genehmigungsseite, Zahlungsseite und Dankesseite) ist ein fester Seitentyp, dem Sie Trustpilot-Widgets, Wertvorschläge, Infoboxen und einen HTML-Block mit zusätzlichen Sicherheitssignalen hinzufügen können. Die Checkout-Felder selbst werden jedoch durch das Thema gesteuert, nicht durch die Blöcke.

Was ist der Unterschied zwischen einem "dynamischen" und einem "festen" Seitentyp?

Dynamische Seitentypen (Kategorie, Produkt, Landing Page, Static Page, Blog Post) sind zahlreich, so dass Sie sowohl eine allgemeine Einrichtung als auch mehrere spezifische haben können. Feste Seiten (Warenkorb, Checkout-Schritte, Bestellseite, Login, etc.) sind nur eine pro Shop, so dass sie nur ein Layout haben können.

Wenn Sie Fragen zum Page Designer haben, können Sie uns gerne unter support@shoporama.dk kontaktieren .