Content Editor
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.
Oberfläche Content Editor
Nun befinden Sie sich in der Oberfläche des Content Editors.
| 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.
Layouts
Layouts geben Ihnen eine grobe Struktur vor.
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.
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.
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.
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:
Button
Auch beim Klick auf den Button erhalten Sie diverse Einstellungsmöglichkeiten. Definieren Sie hier den Zielort des Button, dessen Grösse, Hintergrund etc.
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.
Nun öffnet sich der Asset Manager, mit Hilfe dieses Assistenten können Sie die Bilder hochladen oder direkt aus den Produkte-Bildern auswählen.
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.
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.
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.
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.
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.
Beispiele und Inspiration
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/
- Sie können Ihre Frage auch im PepperShop Forum suchen oder stellen. https://www.peppershop.com/forum/
- Gerne stehen wir Ihnen auch per Mail oder Telefon zur Verfügung (CHF 185./h) support@glarotech.ch oder +41 71 923 08 58