How do I edit the Tablet and Mobile versions of my page?

Responsive Mode in EComposer: customize your page for desktop, tablet, and mobile

With EComposer, you can control exactly how your page looks on desktop, tablet, and mobile. This guide shows you how to preview your design on each device and how to fine-tune it for smaller screens, so every visitor enjoys a polished experience no matter how they browse.

1. Preview your page on different devices

Before making any changes, check how your page currently looks on each screen size. The device switcher in the editor lets you preview desktop, tablet, and mobile layouts in one click.

Most EComposer templates and elements are responsive by default. Still, it is a good habit to preview your page on every device before publishing.

Step 1: Open your page in the EComposer editor. On the top toolbar, find the device switcher. It has three icons: Desktop, Tablet, and Mobile.

EComposer editor toolbar with the device switcher highlighted

Step 2: Click the Tablet icon. The canvas resizes so you can see how your page looks on a tablet screen.

EComposer editor in Tablet mode with the Tablet icon highlighted

Step 3: Click the Mobile icon to check the mobile version. When you are done, click Desktop to return to the default view.

EComposer editor in Mobile mode with the Mobile icon highlighted

2. Customize your design for each device

Here is how responsive editing works: changes you make in Desktop mode apply to all devices, while changes made in Tablet or Mobile mode only apply to that device. This means you can adjust the mobile layout without affecting your desktop design.

Step 1: Select the section or element you want to edit, then open the Design tab in the settings panel. Look for the responsive icon next to a setting, for example Background. This icon means the setting can have a different value on each device.

Step 2: Switch to Mobile (or Tablet) mode using the device switcher. The responsive icon changes to match the selected device, so any adjustment you make now will only affect that device.

Step 3: When you are happy with the result, click Publish on the top toolbar. In the Save template window, click Save to save your changes. If you also want to make the page live, turn on the Publish toggle and click Save & publish.

Save template window with the Publish button, Save and Save & publish highlighted

Note: Only settings with a responsive icon can be customized per device. Settings without this icon always apply to all devices.