Content Editor

Einleitung

Mit dem Content Editor erstellen Sie im Handumdrehen einzigartige Inhaltsseiten für Ihren Onlineshop. Inhaltsseiten sind Seiten wie ‚Über uns‘, ‚Kontakt‘ oder ‚AGB‘ – also Seiten, die keine Produkte zeigen, sondern wichtige Zusatzinformationen für Kundinnen und Kunden bereitstellen. In dieser Anleitung erklären wir Ihnen Schritt für Schritt den Content Editor und zuletzt die Zuordnung der erstellten Seite im Menü.

Seite erstellen

In der Shopadministration unter “Inhalte” → “Seiten” können Sie neue Seiten für Ihren Shop anlegen oder bereits vorhandene Seiten bearbeiten.

Mögliche Anwendungen:

• Erstellen Sie eigene Inhalte wie z. B. “Über uns”, “Kontakt”, “Versandinformationen” oder individuelle Landingpages.
• Bearbeiten Sie bestehende Seiten wie die “Startseite”, “AGB”, “Datenschutzerklärung” oder den “Footer”.

So funktionierts:

1. Wählen Sie im Menü “Neue Seite erstellen”, um eine komplett neue Seite anzulegen.
2. Alternativ klicken Sie auf eine bestehende Seite in der Liste, um deren Inhalte zu bearbeiten.
3. Verwenden Sie den integrierten Content Editor, um Texte, Links, Bilder oder HTML-Code einzufügen.
4. Speichern Sie Ihre Änderungen, damit die Seite im Shop veröffentlicht wird.

Oberfläche Content Editor

Um eine Seite zu bearbeiten, klicken Sie im Bereich “Inhalte” → “Seiten” auf das “Stiftsymbol (“Inhalte bearbeiten“) neben der gewünschten Seite. Dadurch öffnet sich der Content Editor, in dem Sie Inhalte flexibel anpassen können.

Elemente

Auf der rechten Seite finden Sie die Elemente, die bequem per Drag & Drop platziert werden können. Es gibt 3 Elemente.

Vorlagen

Vorlage sind vorkonfigurierte Inhaltsblöcke, die aus Text- und Bildelementen bestehen. Sie dienen als Gestaltungshilfe und können als Inspiration oder direkt zur Übernahme in Ihre Seite verwendet werden.

Die Vorlagen ermöglichen es Ihnen, ohne viel Aufwand ansprechende Layouts zu erstellen – etwa für Produktpräsentationen, Angebotsabschnitte oder Infoboxen. Nach dem Einfügen können Sie die Inhalte individuell anpassen, etwa durch das Ersetzen von Texten oder das Hochladen eigener Bilder.

Layouts

Layouts bieten Ihnen eine vordefinierte Struktur, um Inhalte auf Ihrer Seite geordnet und übersichtlich anzuordnen.

Sie dienen als Grundgerüst, das beispielsweise festlegt, ob Inhalte nebeneinander (z. B. in Spalten) oder untereinander dargestellt werden.

Nach dem Einfügen eines Layouts können Sie es mit beliebigen Inhaltselementen wie Text, Bildern, Buttons oder HTML-Modulen befüllen. Die Struktur hilft dabei, das Seitenlayout konsistent und ansprechend zu gestalten – insbesondere bei umfangreicheren Seiten.

Inhalte

Im Content Editor können Sie Inhalte wie Texte, Bilder, Buttons oder Videos direkt in zuvor eingefügte Layouts oder Vorlagen einfügen.

So gehen Sie vor:

1. Erstellen Sie zuerst die gewünschte Struktur auf Ihrer Seite – entweder durch:
   • Layouts (z. B. ein- oder mehrspaltige Abschnitte) oder
   • Vorlagen, die bereits fertige Bild-Text-Kombinationen enthalten.
2. Fügen Sie anschliessend Inhalte hinzu. Folgende Inhaltsblöcke stehen Ihnen zur Verfügung:
   • Titel – für Überschriften oder Abschnittstitel
   • Text – für Fliesstexte und Beschreibungen
   • Bild – zur Darstellung von Produkten, Logos oder Hintergründen
   • Video – zur Einbindung von externen Videoinhalten (z. B. YouTube)
   • Button – für verlinkte Schaltflächen, z. B. „Jetzt kaufen“ oder „Mehr erfahren“
3. Ziehen Sie den gewünschten Inhalt an die passende Stelle innerhalb des Layouts oder der Vorlage.

Element-Einstellungen

Mit einem Klick auf ein Element öffnet sich rechts jeweils die Element-Einstellungen. Je nach Ort, wo Sie darauf klicken, öffnen sich andere Optionen. In den Element-Einstellungen können Sie die Box Breite bestimmen, den Hintergrund anpassen oder die Ausrichtung bestimmen.

Box / Layout

Im Content Editor von 21.Shop können Sie für jede einzelne Box bzw. Layout-Spalte individuelle Hintergründe festlegen.

So passen Sie den Hintergrund an:

1. Klicken Sie auf den Hintergrundbereich der gewünschten Box oder Layout-Spalte.
2. Rechts öffnet sich automatisch das Einstellungsmenü für das ausgewählte Element.
3. In den Element-Einstellungen haben Sie folgende Optionen zur Auswahl:
   • Transparenter Hintergrund (Standard)
   • Farbiger Hintergrund: Wählen Sie eine Farbe über den Farbwähler aus.
   • Bild als Hintergrund: Laden Sie ein eigenes Bild hoch oder wählen Sie ein bereits vorhandenes aus.
   • Video-Hintergrund: Fügen Sie ein Video hinzu, das im Hintergrund abgespielt wird.

Hinweis zu Layout-Spalten:

Auch für kleinere Einheiten innerhalb eines Layouts – z. B. einzelne Spalten – können Sie diese Hintergrundeinstellungen individuell vornehmen. Klicken Sie dazu einfach direkt auf den jeweiligen Spaltenhintergrund, um die entsprechenden Optionen anzuzeigen.

Titel formatieren

Die Struktur der Titel ist nicht nur für die optische Gestaltung Ihrer Seite entscheidend, sondern auch für eine gute Auffindbarkeit in Suchmaschinen (SEO).

Wichtiger Hinweis zur H1-Überschrift:

• Verwenden Sie “pro Seite nur eine H1-Überschrift (Titel 1)". Diese sollte den “zentralen Inhalt der Seite” beschreiben – z. B. den Seitentitel oder das Hauptthema.
• Weitere Zwischenüberschriften sollten mit “Titel 2 (H2)" oder “Titel 3 (H3)" formatiert werden, um die Inhalte klar zu strukturieren.

So stellen Sie den Titeltyp ein:

• Wenn Sie einen “Textblock” als Titel verwenden, können Sie im “Bearbeitungsmenü des Textes” die “Schriftgrösse bzw. die Formatvorlage” auswählen.
• Wählen Sie dort zwischen den Überschriftstufen “Titel 1 bis Titel 6”, je nach gewünschter Hierarchie.

Button

Wenn Sie im Content Editor auf einen eingefügten “Button” klicken, öffnet sich auf der rechten Seite ein Einstellungsbereich mit verschiedenen Optionen.

Folgende Anpassungen sind möglich:

• Ziel definieren: Legen Sie fest, wohin der Button führen soll – z. B. auf eine bestimmte Shop-Seite, ein Produkt, eine externe URL oder einen Anker innerhalb derselben Seite.
• Grösse festlegen: Wählen Sie zwischen verschiedenen Button-Grössen (z. B. klein, mittel, gross), je nachdem, wie prominent der Button dargestellt werden soll.
• Hintergrundfarbe und Textfarbe: Sie können sowohl die Hintergrundfarbe als auch die Schriftfarbe individuell festlegen, um den Button visuell an Ihr Design anzupassen.
• Text auf dem Button: Bearbeiten Sie direkt im Button den angezeigten Text, z. B. „Jetzt kaufen“, „Mehr erfahren“ oder „Zur Kontaktseite“.
• Ausrichtung: Bestimmen Sie, ob der Button linksbündig, zentriert oder rechtsbündig innerhalb des Abschnitts angezeigt werden soll.

Diese Einstellungen ermöglichen es Ihnen, Buttons funktional und gestalterisch präzise auf Ihre Shopseiten abzustimmen.

Bild / Video

Bild bearbeiten oder hinzufügen:

1. Klicken Sie auf das gewünschte Bildelement innerhalb des Editors.
2. Auf der rechten Seite öffnet sich automatisch die “Bearbeitungsmaske” mit verschiedenen Einstellungen.
3. Um ein neues Bild einzufügen oder ein bestehendes zu ersetzen, öffnen Sie den “Asset Manager”:
   • Klicken Sie im Bildbereich auf die Schaltfläche zum Hochladen.
   • Im Asset Manager können Sie ein neues Bild von Ihrem Gerät hochladen oder ein bereits vorhandenes Bild aus Ihrer Medienbibliothek auswählen.
   • Alternativ haben Sie die Möglichkeit, ein Bild direkt aus Ihren Produktbildern zu übernehmen.

Video bearbeiten oder hinzufügen:

1. Klicken Sie auf das Videoelement, das Sie bearbeiten möchten.
2. In der rechten Bearbeitungsmaske stehen Ihnen verschiedene Optionen zur Verfügung.
3. Sie können Videos von “YouTube” oder “Vimeo” einbinden:
   • Fügen Sie dazu einfach den “Link zum Video” oder die entsprechende “Video-ID” in das vorgesehene Feld ein.

Mit diesen Funktionen binden Sie visuelle Inhalte gezielt und einfach in Ihre Shopseiten ein – ideal zur Produktpräsentation oder für erklärende Inhalte.

Schnellbearbeitung

Neben den Element-Einstellungen haben Sie auch die Möglichkeit, die Inhalte direkt auf der Seite zu bearbeiten.

Folgende Optionen stehen Ihnen zur Verfügung:

1. Inhalt umplatzieren: Klicken Sie auf den gewünschten Inhalt, um ihn per Drag-and-Drop an eine andere Position zu verschieben.
2. Inhalt duplizieren: Mit einem Klick auf den Inhalt können Sie diesen “duplizieren”, um eine identische Kopie zu erstellen.
3. Inhalt löschen: Wenn Sie einen Inhalt nicht mehr benötigen, können Sie ihn “löschen”, indem Sie auf die entsprechende Option klicken.
4. Textformatierung anpassen: Um den Text direkt zu bearbeiten, klicken Sie auf den Textbereich. Hier können Sie “Schriftgrösse”, “Schriftart”, “Farbe” und andere Formatierungen schnell anpassen.

Menü zuordnen

Nachdem Sie Ihre Seite erstellt haben, können Sie diese einem Menü zuweisen.

1. Gehen Sie zu “Inhalte” → “Menü”. Hier finden Sie die neu erstellte Seite unter dem Abschnitt “Neuste Seiten”.
2. Wählen Sie die Seite aus. Im Drop-down-Menü können Sie nun das “gewünschte Menü” auswählen und die Seite diesem Menü hinzufügen.

Fixe Seiten (z. B. AGB, Startseite) zuordnen:

• Um Seiten wie “AGB” oder “Startseite” einem Menü zuzuordnen, gehen Sie zu “Inhalte“ → “Seiten“.
• Wählen Sie die Seite aus (z. B. die AGB-Seite) und bearbeiten Sie sie.
• Während der Bearbeitung können Sie die Seite direkt dem entsprechenden Menü zuordnen.

Neuerungen ab v10

Ab der Version 10 des PepperShops gibt es im Content Editor diverse Neuerungen. Die erweiterten Funktionen des Content Editors helfen Ihnen, nützliche Inhalte und personalisierte Markenerlebnisse einfach und schnell zu erstellen.

Neben dem erweiterten Asset-Manager mit Prdoukte-Bilder sowie Payment- und Logistik-Icons, in dem nun auch das Webp-Bildformat, Loon-Videos, animated GIFs z.B. für Cinemagraphs hochgeladen werden können, gibt es einige tolle neue Features:

Texte und Bilder fliegen lassen

Jetzt können Sie Ihre Texte und Bilder mit Effekten versehen.

Markieren Sie den gewünschten Text und öffnen Sie die “Effekt-Einstellungen”. Definieren Sie ganz einfach von welcher Richtung (oben, unten, links, rechts) das Element eingeblendet werden sollen.

Eigenen Code einbetten

HTML- und JS-Quelltexte werden nun direkt im Content Editor eingebunden. Die Integration erfolgt über ein neues Inhaltselement.

Dieses wird einfach auf die Seite des Content Editors gezogen. So können beispielsweise Ausschnitte von Google Maps, Google Bewertungen, Social Media Feeds oder Kataloge eingebunden werden.

Je nach einzubindendem Widget bietet der Drittanbieter sofort einen kopierbaren Einbettungscode an oder Sie können mit einem Widget-Konfigurator einen Widget-Code erstellen.

Kleiner Tipp: Mit “elfsight” können Sie ganz einfach Widget Codes generierenen wie z.B. Social Feed.

https://go.elfsight.io/click?pid=828&offer_id=3&l=1677843061

“Herzlichen-Dank”-Seite

Möchten Sie Ihre Kundinnen und Kunden nach dem Kauf auf etwas hinweisen oder ihnen etwas mitteilen?

Die Bestellabschlussseite des Bestellprozesses ist jetzt eine Standardseite und kann im Content Editor ganz einfach nach Ihren Wünschen gestaltet werden. Inkl. Integration von dynamischen Elementen via „eigenen Code einbetten“, was ganz neue Möglichkeiten bietet.

Flexibler Footer

Der Footer, das Seitenende Ihres Onlineshops, ist für neu installierte PepperShops auch eine Standardseite, die im Content Editor bearbeitet werden kann. Der neue Footer ist einfach und übersichtlich gestaltet, um die Navigation benutzerfreundlicher zu machen.

Wenn Sie einen bestehenden Shop aktualisieren, bleibt der Footer selbstverständlich erhalten und wird nicht überschrieben.

Weitere Hilfe

Bei Fragen oder Problemen hilft Ihnen unser Support gerne weiter. Eröffnen Sie dazu ein Support-Ticket:

1. Gehen Sie in das Swiss21 Portal.
2. Klicken Sie oben rechts auf Ihr Profilbild.
3. Klicken Sie auf “Support”.
4. Klicken Sie auf “Support kontaktieren”.
5. Füllen Sie das Formular aus und unser Support meldet sich so bald wie möglich bei Ihnen.

Support Öffnungszeiten: Montag – Freitag I 08:00h – 12:00h I 13:30h – 17:00h