Content management

Design adjustments for mobile clients

Overview

This section outlines the features designed to optimize the mobile readability and responsiveness of your designs. While the editor’s default settings aim for universal usability, you may want to fine-tune some behaviors.

Not every design benefits from the default mobile settings. For example, column stacking (see below) may distort navigation bars or other unique design elements. Therefore, always preview and test your designs on different devices.

Mobile design mode and mobile styles

In the design editor, you can switch between desktop design mode (default) and mobile design mode that shows your design as it would be displayed on a small mobile screen. Mobile mode reduces the editor content area to a fixed value of 320px. This mode features a gray backdrop for better visibility but that is not part of the design. You can toggle between desktop and mobile modes at any time.

Some style settings can have different values for desktop and mobile clients. In mobile design mode, these are marked with the label (Mobile) in the side panel. If you change such a value in mobile mode, the value in desktop mode will not be affected and different values will be used to render the element for each target platform.

Mobile styles are available for these settings:

• Alignment
• Button width
• Padding
• Spacer height
• Text size

Switching between mobile and desktop mode

Prerequisites: You see a design in the editor.

1. In the bottom left of the design area, click on either (mobile) or (desktop).
   → The mode changes. The selected mode is highlighted in blue.

Column stacking

Using multiple columns side by side works well on desktop screens but may be a problem on smaller mobile screens. The column option Stack on mobile controls if columns are displayed on top of each other instead of next to each other on mobile devices.

The option is active by default because it improves readability in most cases. When Stack on mobile is active, there is an additional option Stack order on mobile, which you can use to reverse the stacking order of columns in mobile view.

The default vertical stacking is widely supported by mobile browsers and email clients. It is generally recommended to allow vertical stacking for a more mobile-friendly layout, however, some email clients that lack CSS support will default to the desktop layout.

Hidden Content

You can hide any row or content element on either mobile or desktop clients. If any content is set to hidden in your current design mode, you'll find an eye-shaped icon next to the design mode toggle. This icon serves as a visibility toggle for the editor. When enabled, it allows you to see content that is hidden on the type of device corresponding to your current design mode. Hidden content will appear blurred. To edit hidden content, switch to the design mode where it is visible.

Hiding content

Prerequisites: You see a design in the editor.

1. Select a row or content element.
2. In the side panel, in the section Layout, find the option Hide on.
3. To hide the selected object on mobile devices, click (mobile), to hide it on desktop devices, click (desktop).
   → The visibility changes.

If you hide an object on one platform, it automatically becomes visible on the other platform. To show it on both platforms, click (unhide).

The file manager

Overview

The file manager stores images that can be used in your designs. You can upload images which are then accessible across all designs linked to your account.

With the File Manager, you can:

• Browse, search, and sort your files
• Import new files
• Create folders
• Preview files
• Add files to designs

Opening the file manager

There are two ways to open the file manager:

• In an empty image element, click the Browse button.
• In an image element with an image, click the Change image button in the side panel.

Uploading an image via drag and drop

Prerequisites: You see the file manager.

1. On your local system, open an explorer window.
2. Navigate to the file you want to upload.
3. Put the explorer window and the browser with the file manager next to each other.
4. Drag a file from your computer to the browser and drop it in the list of files.
   → The image is added to your file library.

Uploading an image with the Upload button

Prerequisites: You see the file manager.

1. Above the list of files, click Upload.
2. Navigate to the file you want to upload and click open (or similar, depending on your operating system).
   → The image is added to your image library.

Viewing, finding and previewing files

You can view files in tile view or list view. To switch between views, use the buttons (list) and (tiles) above the list of files. Click the column titles above the list to sort the list (this also works in tile view). To search files in the current folder by file name, use the field search in folder. To see a large preview of an image, hover over an image file and click on (Preview).

Deleting an image

Prerequisites: You see the file manager.

1. If you use list view, place your mouse pointer over the image you want to delete.
   → The button (Delete) is displayed.
2. In the row or tile of the image, click (Delete).
3. Confirm that you want to permanently delete the image.
   → The image is deleted from your library.

Deleting multiple images

Prerequisites: You see the file manager.

1. Checkmark all images you want to delete.
   → The button Delete all appears above the list.
2. Click Delete all.
3. Confirm you want to delete the images.
   → The images are deleted from your library.

Folders

You can create folders to organize your images. Use the button (new Folder) above the list of images to create a folder. Folder names may consist of:

• letters
• numbers
• spaces
• periods
• hyphens
• underscores.

Files cannot be moved between folders, only deleted from a folder.