Layout

Layout controls the site-wide content width, container spacing, widget gaps, page selectors, stretched sections, and responsive breakpoints used by Creative Elements.

These settings provide the structural defaults that pages and templates can inherit before individual elements apply their own layout values.

• Layout
• Breakpoints

Override Theme Container

Enable this option to override the width of the theme's .container element with the Content Width values configured in Creative Elements.

Content Width

Set the default width of the content area. The default desktop value is 1140px.

Available units are px, %, em, rem, vw, and custom values. For px, the available range is 300-1500px in 10px steps.

Container Padding

Set the default internal spacing of Containers. This option is available when the Container feature is active.

The default space is 10px. Available units are px, %, em, rem, vw, and custom values.

Gaps

Set the default horizontal and vertical space between widgets. The default Row and Column values are both 20px.

Available units are px, %, em, rem, vw, and custom values.

Page Title Selector

Enter the CSS selector Creative Elements should use when hiding the page title from the document settings.

The default selector is .page-header.

Page Wrapper Selector

Enter the CSS selectors Creative Elements should use when clearing margin, padding, and max-width from the page content wrapper in document settings.

The default value is #wrapper, #wrapper .container, #content.

Stretched Section Fit To

Enter the selector of the parent element that stretched sections should fit to, for example #primary, .wrapper, or main.

Leave the field empty to stretch sections to the page width.

Breakpoint (px)

Set the pixel value for each active breakpoint.

Each breakpoint is validated relative to the other active breakpoints to keep the responsive ranges in a valid order.

Override Theme Container

Override Theme Container lets Creative Elements control the width of the active theme's .container element.

When enabled, the Content Width values are applied to the theme container for desktop, tablet, and mobile, while the maximum width remains limited to 100%.

Content Width

Content Width defines the default maximum width used by boxed sections and Containers.

The default desktop value is 1140px. It is responsive, so you can set separate values for desktop, tablet, and mobile.

Supported units are px, %, em, rem, vw, and custom values. In px, the available range is 300-1500px.

Container Padding

Container Padding defines the default internal space between a Container's edges and its content. It is available when the Container feature is active.

The control is responsive and supports px, %, em, rem, vw, and custom values. The documented default is 10px.

The setting also respects left-to-right and right-to-left layouts by using logical inline start and end values internally.

Gaps

When Containers are active, the spacing control is labeled Gaps. It defines the default Row and Column space between widgets.

Both values default to 20px. Supported units are px, %, em, rem, vw, and custom values.

Page Title Selector

Page Title Selector tells Creative Elements which theme element represents the page title.

The default selector is .page-header. This is used when you choose to hide the page title from a document's settings.

Page Wrapper Selector

Page Wrapper Selector identifies the theme elements Creative Elements should treat as the main content wrappers.

The default value is:

#wrapper, #wrapper .container, #content

This setting is used by document-level layout options that clear margin, padding, and max-width from the content wrapper.

Stretched Section Fit To

Stretched Section Fit To defines the parent element that stretched sections should use as their available width.

You can enter selectors such as #primary, .wrapper, or main. If the setting is empty, stretched sections fit to the full page width.

Breakpoints

Breakpoints define where responsive styles switch between device ranges. Creative Elements uses them to determine when desktop, tablet, mobile, and any additional responsive values should become active.

Active Breakpoints

Mobile and Tablet are always included and cannot be removed.

If the Additional Custom Breakpoints feature is active, the Active Breakpoints control becomes available and lets you enable additional breakpoint types. If the feature is inactive, only Mobile and Tablet breakpoint controls are shown.

Breakpoint (px)

Each active breakpoint has its own Breakpoint (px) value. These values determine the boundaries used by responsive controls.

Widescreen breakpoint

The Widescreen breakpoint behaves differently from the smaller device breakpoints: its settings apply from the selected pixel value and up.

This makes it useful for designs that need additional styling on very large screens.

Responsive workflow

Global Layout settings provide the responsive foundation for the site, while individual elements can still override their own width, padding, gaps, and responsive values.

Recommended workflow

1. Set the default Content Width for the site.
2. Enable Override Theme Container only if Creative Elements should also control the theme's container width.
3. Configure the default Container Padding.
4. Set the default Gaps between widgets.
5. Check the Page Title Selector with the active PrestaShop theme.
6. Check the Page Wrapper Selector if document layout settings do not affect the expected wrapper.
7. Configure Stretched Section Fit To only when needed.
8. Review the active Breakpoints before creating responsive layouts.
9. After changing breakpoint values, test existing pages across all responsive ranges.