Editing the mobile display of your newsletter

The display for a large screen forms the basis of your newsletter. The mobile display is derived from this, and you can customise it further. You can switch between the two using the monitor and phone icons. You will find these icons throughout the editor: under ‘Global design’ and with each individual block.

Configuring the global design per display

Define your global design first before adding, editing or deleting blocks. This is where you set the default settings for all blocks in your newsletter, separately for desktop and mobile.

In step 4, click next to a block in your newsletter and go to Blocks and global design → Global design. Below this, you will find the buttons ‘Outside’, ‘Middle’ and ‘Borders’, with the two icons to the right of the tab.

This is how the two icons work throughout the editor:

• Click the monitor icon for the default display on a (larger) screen.
• Click the phone icon to adjust the display for a smartphone. You will then see the message ‘These settings are for the mobile view’. If you leave a colour code or margin blank, the settings from the desktop display will apply. You cannot specify separate mobile settings for the borders.

Hiding a block on mobile or desktop

You can set which screen size a block is visible on for each block in your newsletter. By default, each block is shown in both displays.

1. On the left, click the ‘Design’ tab.
2. Scroll down and tick ‘Hide this block on desktop’ or ‘Hide this block on mobile’.

These two options work independently of each other: if you hide a block on desktop, it remains visible on mobile. A hidden block appears blurred on the right side of your screen, with the message ‘This block is hidden’.

Differences in the mobile display

When you select the phone icon, a few elements are automatically displayed differently. You can adjust this yourself:

Under the ‘Design’ tab, you can customise the formatting for each display even further using buttons such as ‘Title’, ‘Image’, ‘Box’ and ‘Outside’. For example, this is where you can change the font, colour, size and alignment of the title, text and link text, the margins inside and around the box, and the background colour and borders of a box.

Related articles