Content Editor

Inhaltsverzeichnis

Introduction

With the Content Editor, you can create unique content pages for your online shop in no time at all. In this guide, we will explain the Content Editor step by step and finally show you how to assign the created page in the menu.

Instructional video

In this short video, you will see how to design a possible home page with the Content Editor.

Create a page

In the shop administration under “Contents” → “Pages”, you can create a new page or edit an existing one.

To create a new page, enter the title of the page in the “New page” field at the top left and click “Create”. To work with the Content Editor, select “Content page”.

Content Editor interface

You are now in the Content Editor interface.

Responsive design: Change the view to see how your page looks on mobile devices. However, you can only edit the views independently to a limited extent. For example, you can change the size of an image in the mobile view, but the old size will still be displayed in the desktop view. However, you cannot adjust the position of the image for each view.
Link: Click on the pencil icon to edit the page link. Clicking directly on the link will take you to the page in the online shop.
Undo/Redo: These arrows allow you to undo or redo your last actions.
Show guides: The guides help you find your way around.
Preview: In the preview, you can view your page (including unsaved changes) from the customer’s perspective.
Publish: The page you have created is saved automatically. 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 give you a rough structure.

Content

You can drag the content directly into the layouts or templates. There is one content type each for buttons, images, titles, text and videos.

So first create your structure from the templates or layouts and then you can fill it with content.

Element settings

Clicking on an element opens the element settings on the right. Depending on where you click, different options will open. In the element settings, you can determine the box width, adjust the background or determine the alignment.

Box / Layout

You can determine 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 can select an image, a video or a colour from the drop-down menu.

You can also configure settings for the smaller box (layout). Click on the background of the layout to configure various settings here as well.

Format title

The structure of the titles is not only important for the appearance, but also for search engine optimisation (SEO). Please make sure that there is only one H1 heading (title 1) per page! You can set the titles on the right in the menu under “Font size”.

Button

Clicking on the button also gives you various setting options. Here you can define the destination of the button, its size, background, etc.

Image / Video

Click on the image or video to open the editing mask on the right.

Upload the desired image by clicking on the image icon in the image. The Asset Manager will now open. With the help of this wizard, you can upload images or select them directly from the product images.

Click on the video element to edit the corresponding 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 in the field. By clicking on the desired content, you can reposition, duplicate or delete the box. You can also adjust the format of the text here.

Once you have finished the page, you can now assign it to a menu. Under “Content” → “Menu”, you will find the newly created page under “Latest pages”. Select the page and use the drop-down menu to select the location where you want to display the page. Fixed pages such as “Terms and Conditions”, “Home”, etc. can be assigned directly in their edit mode. To do this, go to “Content” → “Pages” and edit the terms and conditions, for example.

Make text and images fly

To make text or images fly, select the desired text or image and open the “Effect settings”. Define the direction (top, bottom, left, right) from which the element should be displayed.

Embed your own code

HTML and JS source texts are integrated directly into the Content Editor. Integration is done via the content element “</>”.

This is dragged to the Content Editor page. This allows you to embed excerpts from Google Maps, Google reviews, social media feeds or catalogues, for example.

Depending on the widget to be embedded, the third-party provider offers a copyable embed code or you can create a widget code using a widget configurator.

Quick tip: With “elfsight”, you can easily generate widget codes such as social feeds.

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

“Thank you” page

Would you like to point something out to your customers after their purchase or let them know something?

The order completion page of the order process is a standard page and can be designed according to your wishes in the Content Editor. Includes integration of dynamic elements via “embed your own code”, which offers many possibilities.

The footer, the bottom of your online shop, is a standard page that can be edited in the Content Editor. The footer is simple and clearly laid out to make navigation more user-friendly.

Further Help

Do you have questions or need assistance? Do you have special requirements or desire a custom solution for your system? Our support team is happy to help. Support services are charged based on time and material at CHF 195.- / hour. Here is how to reach us:

Email: support@glarotech.ch Phone: +41 (0)71 923 08 58

Opening Hours: Monday – Friday I 8:00 a.m. – 12:00 p.m. I 1:30 p.m. – 5:00 p.m.

Other Useful Pages

FAQ (Frequently Asked Questions)
Modules & Functions
Interfaces