Content Editor

Inhaltsverzeichnis

Einleitung

Mit dem Content Editor erstellen Sie im Handumdrehen einzigartige Inhaltsseiten für Ihren Onlineshop. In dieser Anleitung erklären wir Ihnen Schritt für Schritt den Content Editor und zuletzt die Zuordnung der erstellten Seite im Menü.

Anleitungsvideo

In diesem kurzen Video sehen Sie die Gestaltung einer möglichen Startseite mit dem Content Editor.

Seite erstellen

In der Shopadministration unter Inhalte -> Seiten können Sie eine neue Seite erstellen oder eine bestehende bearbeiten.

Abbildung 1: Seiten

Oberfläche Content Editor

Nun befinden Sie sich in der Oberfläche des Content Editors.

Abbildung 2: Content Editor

Erklärung Nummern
1 Responsive Design Ändern Sie die Ansicht, um zu sehen, wie Ihre Seite für mobile Geräte aussieht. Sie können allerdings die Ansichten nur teils unabhängig bearbeiten. Z.B. können Sie in der Mobile Ansicht die Grösse eines Bildes ändern, in der Desktop Ansicht wird noch die alte Grösse angezeigt. Aber Sie können die Position des Bildes nicht pro Ansicht anpassen.
2 Link Mit einem Klick auf den Stift können Sie den Link der Seite anpassen. Wenn Sie direkt auf den Link klicken, gelangen Sie zur Seite im Onlineshop.
3 Undo/Redo Mit diesen Pfeilen haben Sie die Option, letzte Vorgänge rückgängig zu machen oder wieder zurückzuholen.
4 Hilfslinien anzeigen Die Hilfslinien helfen Ihnen sich zurecht zu finden.
5 Vorschau In der Vorschau können Sie Ihre Seite (auch noch nicht gespeicherte Änderungen) aus Kundensicht ansehen.
6 Veröffentlichen Die von Ihnen erstellte Seite wird automatisch gespeichert. Wenn Sie bereit sind, können Sie die Seite hier veröffentlichen.

Elemente

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

Vorlagen

Vorlagen sind bereits fertige Elemente mit Bild und Text, die als Inspiration dienen.

Abbildung 3: Vorlagen

Layouts

Layouts geben Ihnen eine grobe Struktur vor.

Abbildung 4: Layouts

Inhalte

Die Inhalte können Sie direkt in die Layouts oder auch Vorlagen ziehen. Es gibt je einen Inhalt für Buttons, Bild, Titel, Text und Video.

Erstellen Sie also erst Ihre Struktur aus den Vorlagen oder den Layouts und anschliessend können Sie diese mit den Inhalten befüllen.

Abbildung 5: Inhalte

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

Sie können pro Box den Hintergrund bestimmen. Hierfür müssen Sie einfach auf den Hintergrund klicken. Rechts öffnet sich dann die Element-Einstellungen. Sie haben nebst einem transparenten Hintergrund die Möglichkeit ein Bild, ein Video oder eine Farbe auszuwählen.

Abbildung 6: Box/Layout

Ebenfalls können Sie Einstellungen für die kleinere Box (Layout) vornehmen. Klicken Sie auf den Hintergrund des Layouts, nun können Sie folgende Einstellungen vornehmen.

Abbildung 7: Layout

Titel formatieren

Die Struktur der Titel ist nicht nur für das Aussehen wichtig, sondern auch für die Suchmaschinenoptimierung (SEO).

Bitte achten Sie darauf, dass nur eine H1-Überschrift (Titel 1) pro Seite vorkommt!

Die Titel können Sie bei der Schriftgrösse einstellen:

Abbildung 8: Schriftgrösse

Button

Auch beim Klick auf den Button erhalten Sie diverse Einstellungsmöglichkeiten. Definieren Sie hier den Zielort des Button, dessen Grösse, Hintergrund etc.

Abbildung 9: Button

Bild / Video

Klicken Sie auf das Bild oder auf das Video, auch hier öffnet sich rechts die Bearbeitungsmaske. Laden Sie das gewünschte Bild hoch, indem Sie auf das Icon im Bild klicken.

Abbildung 10: Bild

Nun öffnet sich der Asset Manager, mit Hilfe dieses Assistenten können Sie die Bilder hochladen oder direkt aus den Produkte-Bildern auswählen.

Abbildung 11: Asset Manager

Klicken Sie auf das Video Element, um die folgenden Einstellungen zu bearbeiten. Sie können Videos von Youtube oder Vimeo hochladen. Fügen Sie darunter den Link zum Video oder die Video ID ein.

Abbildung 12: Video

Schnellbearbeitung

Nebst den Element-Einstellungen können Sie die Inhalte auch direkt auf dem Feld bearbeiten. Mit einem Klick auf den gewünschten Inhalt können Sie die Box umplatzieren, duplizieren oder löschen. Auch das Format des Textes können Sie sogleich hier anpassen.

Abbildung 13: Titel anpassen

Menü zuordnen

Sobald Sie die Seite fertiggestellt haben, können Sie diese nun einem Menü zuordnen. Unter Inhalte -> Menü finden Sie die neu erstellte Seite unter “Neuste Seiten”. Sie können die Seite nun anwählen, das gewünschte Menü im Drop Down Menü auswählen und die Seite hinzufügen.

Abbildung 14: Menü

Die fixen Seiten wie AGB, Startseite etc. ordnen Sie direkt in deren Bearbeitung zu. Gehen Sie unter Inhalte -> Seiten und bearbeiten Sie z.B die AGB.

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.

Abbildung 15: Effekte

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.

Abbildung 16: Code

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.

Abbildung 17: Herzlichen Dank

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.

Beispiele und Inspiration

Abbildung 18: Beispiel

Abbildung 19:

Abbildung 20:

Abbildung 21:

Abbildung 22:

Weitere Hilfe

Benötigen Sie weitere Unterstützung? PepperShop stellt Ihnen unterschiedliche Möglichkeiten zur Verfügung.

  • Oft hilft ein Klick in der Administration oben rechts auf das Fragezeichen Icon. Hier erhalten Sie direkt Hilfe zum betroffenen Thema.
  • Diverse Antworten finden Sie in den FAQ. Diese sind ebenfalls in der Shopadministration über Hilfe&News -> Hilfearchiv aufrufbar. Oder über unsere Homepage https://www.peppershop.com/de/services/support/faq/
  • In der PepperShop Academy https://www.peppershop.com/de/services/academy/ können Sie ganz einfach und bequem diverse kostenlose Video-Anleitungen finden.
  • Gerne stehen wir Ihnen auch per Mail oder Telefon zur Verfügung (CHF 195./h) support@glarotech.ch oder +41 71 923 08 58
🌶️
🔥
🌶️