Configure the mobile view in the Email Designer configure-the-mobile-view

Transcript

In this video, I will explain how you can customize your email’s mobile view in the Email designer. You can fine tune the response of design of an email by separately editing all style options for mobile display. We are currently in the desktop mode. To access the dedicated mobile view, select the switch to mobile view button on the top right. The mobile version of the email is displayed. By default it contains all the components and styles that you’d find in the desktop view. But you can also see that the response of design has been applied. You can now independently edit all style settings and the changes will only apply to the mobile view of your content. So let’s make some changes. I will start by changing the padding of this image, because I would like to add a background color to make it stick out a bit more.

I will also change the color of the text to blue, as well as the text alignment.

Let’s take a look.

So you can see on the desktop view these changes have not applied. So let’s make some changes here.

I will also add some padding, I’ll add more padding than we have in the mobile view. I’ll change the background color to red and I will also change the text color to red.

I would also like to change this button color to red.

There we go, let’s see what happened.

You can see any specific changes to styles that we made in the mobile aren’t affected by the changes we made to the desktop view. But the modifications to the styles we didn’t customize for the mobile view are reflected here as well.

If I remove a style change, for example, I remove the background color, you will see the desktop style is now reapplied to the element.

I can now go back and I have to start from scratch where we go and add the color.

The only exception that we have is changes to inline styles. So for example, on this image if I change the width to let’s say 50 percent, this change, style change, will also apply to the desktop view. If I make the change here it will apply to the mobile view as well.

Any other changes to the structure or the content of the email such as text edits, uploading a new image or adding a new component is also applied across both views. So for example if I change this image and crop it in my mobile view, here we go.

I will have the same effect here in my desktop view.

If I change the text, it will be here as well.

If I change that, and then let’s see what happens. I am changing the text, this text now qualifies as a new unmodified elements so the standard red style is applied. Change this to bold and change it blue, for example.

And then you can see the text has been added, the structure has been added, but the style has not pulled through from the mobile view so you can adapt the styles independently if you make changes to the content and the design, such as text edits, uploading of a new image, adding a new component et cetera, this will also be applied to the standard view.