Responsive Mode

Responsive Mode is a fundamental feature of the Live Editor that allows you to preview and customize your page's design for different screen sizes. This ensures your layout looks professional and is fully functional on desktops, tablets, and mobile devices.

How to Access the Responsive Mode

To access the Responsive Mode settings, click the screen icon () located in the bottom-left corner of the editor's bottom bar.

Live Editor - Bottom barLive Editor - Bottom bar

The Responsive Toolbar

The feature provides three main views:

  • Desktop: The default view for designing on standard computer screens.
  • Tablet: Simulates a typical tablet view, usually around 768px wide.
  • Mobile: Simulates a typical smartphone view, usually around 360px wide.

Clicking any of these icons will resize the canvas to that specific preview width, allowing you to make design adjustments for that view.

The Creative Elements Responsive Panel The Creative Elements Responsive Panel

Editing Responsive Parameters

Creative Elements gives you fine-grained control over your design. Many individual settings for widgets, columns, and sections can be adjusted independently for each device. These responsive-aware settings are easily identified by a device icon () next to their name.

A responsive parameter with a device icon. The device icon indicates that this setting can be customized for each view.

How to Adjust a Responsive Setting:

  1. Switch to the desired device view (e.g., Tablet).
  2. Select an element to edit its settings in the sidebar.
  3. Locate a parameter with the device icon next to it (e.g., Columns, Alignment, Padding, Font Size). The icon indicates your current view.
  4. Change the value. This new value will only apply to the current device view and smaller devices, without affecting larger ones.
Tip: You can set a Product Grid to display 6 columns on Desktop, then switch to the Tablet view and change the same setting to 3 columns, and finally switch to Mobile and set it to 2 columns.

Customizing Responsive Breakpoints

Creative Elements allows you to define the exact pixel values that trigger the tablet and mobile layouts. This gives you full control to match your design to your specific theme or target devices.

You can configure these values by navigating to your PrestaShop back-office, Creative Elements > Settings > Style Tab.

Tablet Breakpoint
Set the maximum width (in pixels) for the tablet view. Any screen size below this value will use the tablet styles you've defined. (Default: 1024px)
Mobile Breakpoint
Set the maximum width (in pixels) for the mobile view. Any screen size below this value will use the mobile styles. (Default: 767px)
Settings of Responsive Breakpoints Settings of Responsive Breakpoints
Note: It is recommended to set your breakpoints before you begin designing your site to ensure consistency. Changing them later may require you to readjust existing designs.
© WebshopWorks - Professional PrestaShop Addons