Video: Building Pages with the xoContentEditor
From switching it on to the finished page in your shop: the video shows in the demo shop how to add elements, arrange them for desktop and mobile, reuse them as a template and embed third-party widgets. Jump straight to any chapter below.
The video (3:39 min., German audio with English subtitles) walks you through the page builder in eight chapters. AI-generated voice-over.
Chapters and transcript
Click a time to start the video at that point.
Video transcript
0:00 · Introduction
Designed pages built from ready-made elements, without any HTML: That is the xoContentEditor. This video takes you from switching it on to the finished page in your shop.
0:14 · Where do I switch on the xoContentEditor?
The xoContentEditor is available for CMS pages, categories, products, news, FAQ and manufacturers. Above the content field there is a switch, for CMS pages it is called "Content (xoContentEditor)". Switch it on and the page builder takes the place of the text field. The switch applies per language. But be careful: switching it off and saving deletes the layout. The xoContentEditor is an add-on module and included in the XONIC packages from Basic upwards.
0:48 · How is the page builder structured?
A page consists of content blocks. In the back office a block is called "Flexible layout" and has three columns: on the left the structure with the elements, in the middle the fields of the selected element, on the right the preview. The "active" switch hides a block in the shop without deleting it. You add a new block at the top with "Add new element".
1:13 · How do I add an element?
"Add new element" below the structure appends an element, up to 16 per block. In the "Component type" field you choose what it should become, for example a card with image, text and button. There are 22 elements to choose from. The editor then loads the matching input fields: you fill them in, the layout is created automatically.
1:39 · How do I arrange content for desktop and mobile?
You set the arrangement per element on the "Layout & appearance" tab: width, indent and order, separately for desktop and mobile. Under "Visibility" you show an element only on desktop or only on mobile. The widget options apply to the whole block, for example full width, a background colour or a carousel.
2:03 · What does the page look like in the shop?
On the right, the preview shows desktop and mobile side by side. "Pseudo" shows a tile for each element, ideal for checking layout and order, "Live" a reduced short version of the content. You only see your shop's fonts and colours in the shop itself: save the page and open it with "View in shop".
2:28 · How do I reuse a layout?
Save a finished layout as a template: open the template manager in the header bar, "Save" tab, enter a name and leave "Save content too" switched on. On another page, on the "Apply" tab, select the template and then "Replace" or "Insert". This also lets you transfer the layout to another language, because each language has its own page builder. Then save the page.
2:57 · Where do I embed third-party widgets?
You add your own HTML with the "Code / Custom HTML" element, for example an iframe embed. The editor removes script code when saving. All the details and answers to frequently asked questions are in the "xoContentEditor" guide on xonic-solutions.de. And if you need help: our support team in Chemnitz is there for you.
