Content Editor
Introduction
With the Content Editor, you can create unique content pages for your online store in no time at all. In this guide, we explain the Content Editor step by step and finally how to assign the created page in the menu.
Create page
In the store administration under Content -> Pages, you can create a new page or edit an existing one.
Content Editor interface
You are now in the Content Editor interface.
| Functions | Explanation |
|---|---|
| Responsive Design (1) | Change the view to see how your page looks for mobile devices. However, you can only partially edit the views independently. For example, you can change the size of an image in the mobile view, but the old size is still displayed in the desktop view. However, you cannot adjust the position of the image for each view. |
| Link (2) | By clicking on the pen you can adjust the link of the page. If you click directly on the link, you will be taken to the page in the online store. |
| Undo/Redo (3) | With these arrows you have the option of undoing or redoing recent actions. |
| Show help lines (4) | The help lines help you to find your way around. |
| Preview (5) | In the preview, you can view your page (including changes that have not yet been saved) from the customer’s perspective. |
| Publish (6) | The page you have created is automatically saved. When you are ready, you can publish the page here. |
Elements
On the right-hand side you will find the elements that can be conveniently placed using drag & drop. There are 3 elements.
Templates
Templates are ready-made elements with images and text that serve as inspiration.
Layouts
Layouts provide you with a rough structure.
Contents
You can drag the content directly into the layouts or templates. There is one content each for buttons, image, title, text and video.
So first create your structure from the templates or layouts and then you can fill them with content.
Element settings
Click on an element to open the element settings on the right. Depending on where you click, other options will open. In the element settings, you can define the box width, adjust the background or define the alignment.
Box / Layout
You can define the background for each box. To do this, simply click on the background. The element settings will then open on the right. In addition to a transparent background, you have the option of selecting an image, a video or a color.
You can also make settings for the smaller box (layout). Click on the background of the layout, now you can make the following settings.
Format title
The structure of the title is not only important for the appearance, but also for search engine optimization (SEO).
Please ensure that there is only one H1 heading (title 1) per page!
You can set the title in the font size:
Button
You also have various setting options when clicking on the button. Define the destination of the button, its size, background, etc. here.
Image / Video
Click on the image or on the video, the editing mask will also open here on the right. Upload the desired image by clicking on the icon in the image.
Now the Asset Manager opens, with the help of this wizard you can upload the images or select them directly from the product images.
Click on the video element to edit the following settings. You can upload videos from Youtube or Vimeo. Insert the link to the video or the video ID below.
Quick editing
In addition to the element settings, you can also edit the content directly on the box. By clicking on the desired content, you can reposition, duplicate or delete the box. You can also adjust the format of the text right here.
Assign menu
As soon as you have completed the page, you can now assign it to a menu. Under Contents -> Menu you will find the newly created page under “Newest pages”. You can now select the page, select the desired menu in the drop-down menu and add the page.
You assign the fixed pages such as terms and conditions, start page etc. directly in their editing. Go to Contents -> Pages and edit the terms and conditions, for example.
New features from v10
From version 10 of the PepperShop, there are various new features in the Content Editor. The extended functions of the Content Editor help you to create useful content and personalized brand experiences quickly and easily.
In addition to the extended asset manager with product images as well as payment and logistics icons, in which the webp image format, loon videos, animated GIFs e.g. for cinemagraphs can now also be uploaded, there are some great new features:
Make texts and images fly
Now you can add effects to your texts and images.
Select the desired text and open the “Effect settings”. Simply define from which direction (top, bottom, left, right) the element should be displayed.
Embed your own code
HTML and JS source texts are now integrated directly in the content editor. Integration takes place via a new content element.
This is simply dragged onto the page of the Content Editor. For example, sections of Google Maps, Google reviews, social media feeds or catalogs can be integrated.
Depending on the widget to be integrated, the third-party provider immediately offers a copyable embed code or you can create a widget code using a widget configurator.
A little tip: With “elfsight” you can easily generate widget codes such as Social Feed.
https://go.elfsight.io/click?pid=828&offer_id=3&l=1677843061
“Thank you very much” page
Would you like to point something out to your customers or tell them something after their purchase?
The order completion page of the order process is now a standard page and can be easily customized in the content editor. Incl. integration of dynamic elements via “embed own code”, which offers completely new possibilities.
Flexible footer
The footer, the end of the page of your online store, is also a standard page for newly installed PepperShops that can be edited in the content editor. The new footer is designed to be simple and clear to make navigation more user-friendly.
If you update an existing store, the footer will of course be retained and will not be overwritten.