Live Editor interface

The Live Editor is Creative Elements' real-time, drag-and-drop workspace for building and customizing your PrestaShop content visually. You can add elements, adjust their settings, arrange your layout, and preview the result directly on the page without writing code.

The interface is divided into two primary areas: the Sidebar Panel on the left and the Canvas on the right. Together, they provide the tools you need to build, navigate, preview, and save your design.

1

2

3

4

5

Sidebar panel

Canvas

Sidebar Panel

Located on the left, the Sidebar Panel is the main control center of the Live Editor. Its content changes depending on what you are doing: you can browse widgets, edit the selected element, access editor-wide settings, navigate your page structure, review changes, and save your work.

• Top Bar: The Top Bar provides access to the main editor menu and the Widgets Panel. Use the menu to access editor-wide options and settings, while the Widgets Panel button returns you to the list of available elements.
• Widget Selection: Browse or search the available widgets and drag them onto the Canvas. The panel includes separate Elements and Global views, and widgets are organized into categories to make them easier to find.
• Bottom Bar: The Bottom Bar provides quick access to Settings, language and shop context where available, Navigator, History, Responsive Mode, Preview Changes, and the save or publish controls. The save options also let you save a draft or save the current design as a template.

When you select a widget, container, section, or other editable element, the Sidebar Panel switches from the widget library to that element's controls. Depending on the element, these controls are organized into tabs such as Content, Style, and Advanced, allowing you to configure the selected element while seeing the result on the Canvas.

Canvas

The Canvas is the main visual workspace on the right. It displays a live representation of the page and is where you build the layout by adding, selecting, moving, and arranging elements.

• Page Layout: This is your live working area. Select an element on the page to edit its settings in the Sidebar Panel, or drag elements to rearrange the structure. Changes made in the panel are reflected on the Canvas as you work.
• Add New Section: Add new content from an available insertion point. Click the plus icon to create a new layout, or use the folder icon to insert a saved design from the Template Library.

Explore the Live Editor Components

Use the articles in this category to learn more about each part of the Live Editor, from finding and configuring widgets in the Sidebar Panel to building and managing your layout directly on the Canvas.