Responsive Mode

Responsive Mode allows you to preview and customize your design for different screen sizes directly in the Creative Elements Live Editor. You can switch between Desktop, Tablet Portrait, and Mobile Portrait views, adjust responsive settings, and check how your layout behaves at different viewport sizes.

Responsive Mode also includes a dedicated toolbar for controlling the preview dimensions, zoom level, and breakpoints.

How to Access Responsive Mode

Click the Responsive Mode icon () in the editor's Bottom Bar to open the responsive preview.

Live Editor - Bottom Bar

When Responsive Mode is activated, the Responsive Toolbar appears at the top of the editor, providing access to device previews and additional display controls.

The Responsive Toolbar

The Responsive Toolbar provides tools for previewing your design at different screen sizes.

Live Editor - Responsive Mode

Device Preview

Use the device icons to switch between the available responsive views:

• Desktop: Preview and edit the base design for larger screens.
• Tablet Portrait: Preview and customize the layout for tablet-sized screens. The default Tablet Portrait breakpoint is 1024px.
• Mobile Portrait: Preview and customize the layout for smaller screens. The default Mobile Portrait breakpoint is 767px.

Live Editor - Device Preview

Click a device icon to switch the Canvas to the corresponding responsive view.

Adjusting the Preview Size

Responsive Mode allows you to adjust the preview dimensions manually, helping you test how your layout behaves at different viewport widths and heights.

On the right side of the Responsive Toolbar, you will find two input fields:

• W - Width: Set the width of the preview in pixels. The entered width must remain within the boundaries of the selected responsive view.
• H - Height: Set the height of the preview in pixels.

Live Editor - Preview Size

How to Change the Preview Dimensions

1. Open Responsive Mode.
2. Select the Tablet Portrait or Mobile Portrait view.
3. Locate the W and H fields in the Responsive Toolbar.
4. Enter the desired width or height in pixels.
5. Review how your design responds to the new preview dimensions.

You can also resize the responsive preview using the available resize handles.

Preview Width Limitations

The preview width must remain within the boundaries of the selected responsive view.

For example, you cannot enter a Desktop-sized width while remaining in Mobile Portrait mode. If the entered width falls outside the allowed range, Creative Elements displays a warning and restores the last valid preview width.

Zooming the Preview

The Responsive Toolbar includes zoom controls that allow you to scale the Canvas without changing its actual viewport dimensions.

This is particularly useful when working with larger layouts or when the available editor space is limited.

• Zoom In: Increase the preview scale to inspect your design more closely.
• Zoom Out: Decrease the preview scale to see more of the page within the available editor space.
• Reset Zoom: Restore the preview scale to 100%.

Live Editor - Zooming the Preview

The current zoom percentage is displayed between the zoom controls. You can adjust the scale between 50% and 200% in increments of 10%.

Editing Responsive Settings

Many settings in Creative Elements can be customized independently for Desktop, Tablet Portrait, and Mobile Portrait. These include layout, spacing, alignment, typography, sizing, and other design properties.

Responsive settings are identified by a device icon next to the control.

Responsive settings can be customized for different device views.

How to Adjust a Responsive Setting

1. Open Responsive Mode and select the device view you want to customize.
2. Select a Container, Section, Column, or Widget on the Canvas.
3. Locate a setting that supports responsive editing, such as Width, Padding, Alignment, or Font Size.
4. Use the device icon next to the setting if you need to switch its responsive context.
5. Adjust the value for the selected device view.
6. Switch between Desktop, Tablet Portrait, and Mobile Portrait to review the result.

Not every setting supports responsive editing. Controls without responsive device options generally apply across all device views.

How Responsive Values Work

Creative Elements uses cascading responsive values. Desktop acts as the base, while Tablet Portrait and Mobile Portrait can define their own values where responsive controls are available.

For example, consider a Container with the following Padding settings:

If a device-specific value is left empty, the control generally uses the applicable value inherited from the larger responsive view.

For example, if a Font Size is set to 24px on Desktop and 20px on Tablet Portrait but no Mobile Portrait value is specified, Mobile generally uses the Tablet value.

Responsive Layout Example

Responsive settings are particularly useful for product grids and other multi-column layouts.

For example, you could configure a Product Grid with different column counts for each device view:

This allows you to display more products per row on larger screens while keeping individual product cards readable on smaller screens.

You can use the same approach for Container Direction, alignment, typography, spacing, sizing, and other responsive controls.

Managing Responsive Breakpoints

Breakpoints define the viewport widths at which Creative Elements applies Tablet Portrait and Mobile Portrait responsive styles.

Click the Manage Breakpoints icon () in the Responsive Toolbar to open the Layout > Breakpoints section of the global settings.

Theme Style - Layout - Breakpoints

Default Breakpoints

Creative Elements provides two responsive breakpoints:

• Tablet Portrait: Default: 1024px.
• Mobile Portrait: Default: 767px.

With the default breakpoint values, the responsive ranges are:

You can customize the Tablet Portrait and Mobile Portrait breakpoint values to suit your website's layout requirements.

Changing Breakpoint Values

To customize the responsive breakpoints:

1. Open Responsive Mode.
2. Click the Manage Breakpoints icon in the Responsive Toolbar.
3. Expand the Breakpoints section under Layout.
4. Enter the desired pixel values for Tablet Portrait and Mobile Portrait.
5. Save your changes.
6. Return to Responsive Mode and review your layout at the updated breakpoint widths.

Preview Size vs. Breakpoints

Although both features involve viewport dimensions, changing the preview size and changing a breakpoint are not the same thing.

Closing Responsive Mode

Click the Close icon () at the right end of the Responsive Toolbar to exit Responsive Mode.

Creative Elements switches back to Desktop and returns to the standard editing view.