Top bar

This section contains the main navigation controls for the editor. It features the Menu icon for accessing global site settings and the Widgets icon for returning to the element selection panel.

Live Editor - Top bar

Clicking the Menu icon in the top-left corner of the editor opens this global menu. It provides access to site-wide styles, settings, and navigation shortcuts. Click the Back arrow to close the global menu and return to the previous view, which is typically the widgets panel.

Live Editor - Top bar (Menu)

Global style

Theme Style

Access the site-wide design system where you can define default global colors and fonts to ensure a consistent look and feel across your website. To learn more, check our Theme Style here.

Settings

Global Settings

Configure editor-wide settings such as page title or content wrapper selector, and lightbox options that apply to all Creative Elements pages.

• Style
• Lightbox

Default Generic Fonts

Set a fallback generic font family (e.g., sans-serif, serif) to be used site-wide if a chosen custom font fails to load.

Stretched Section Fit To

Specify the CSS selector of your theme's main page container. This ensures that sections set to "Stretched" expand to the correct full width of your site's layout.

Page Title Selector

Enter the CSS selector for your theme's default page title (e.g., .page-header). This allows Creative Elements to hide the theme's title when you choose to do so in the page settings.

Content Wrapper Selector

Provide the CSS selectors for your theme's main content area. This enables the "Full Width" page layout to correctly remove default theme padding and margins for a true blank canvas.

The visual styling options for the lightbox, such as colors and typography, are located in Theme Style > Lightbox.

Image Lightbox

Enable or disable the image lightbox feature across your entire website.

Counter

If enabled, this will display a counter in the lightbox when viewing an image gallery (e.g., "Image 3 of 5").

Fullscreen

Show or hide the button that allows users to view the lightbox image in fullscreen mode.

Zoom

Show or hide the zoom button, allowing users to magnify the image for a closer look.

Title

Select the image metadata (e.g., Title, Caption) to be used as the title text within the lightbox.

Description

Select the image metadata (e.g., Caption, Description) to be used as the description text within the lightbox.

Module Settings

This shortcut takes you directly to the Creative Elements module configuration page within your PrestaShop back-office.

About Creative Elements

Explore our seller page for detailed informations.

More

Preferences

Customize the editor interface to suit your workflow, such as changing the UI theme (light/dark) or configuring the editing handles.

UI Theme

Set the editor's appearance to Light, Dark, or use Auto Detect to automatically sync the theme with your operating system's settings.

Editing Handles

When enabled, this shows visible handles as you hover over an element's edit button, making it easier to adding, deleting or duplicating.

Enable Lightbox In Editor

Allows you to test the image lightbox functionality directly within the editor, without needing to open the live page preview.

Keyboard Shortcuts

Displays a comprehensive popup with a list of available keyboard shortcuts. These shortcuts are divided into "Actions" (like Undo, Redo, Save) and "Go To" commands (like opening Responsive Mode or the Navigator) to help you speed up your design process.

Keyboard Shortcuts

View Page

Opens the current page in a new browser tab, allowing you to see exactly how it looks to your visitors.

Exit to Back Office

Saves your changes and returns you to the PrestaShop back-office dashboard.