Create content with the Email Designer

In this video, we are going to learn how to create an email using the email designer. We would be creating emails from scratch by leveraging assets from the AEM Asset Essentials Library. We will see how this editorial is used to build quickly a responsive email. And finally, we will also talk about the option of creating an email from a template.

So, let’s go into the message where I will click into the email designer. And the first thing I’m going to see is this screen where I’ve multiple options to create my email and I will design from scratch. The first thing you need to do here is to select one of the structural components to start building the layout of email. When you do that, you have access to some body level properties. So, this is where you will define your Preheader. So, this is a text that will be displayed next to your subject line to really welcome users to open this email, then you can define some high-level settings. So, let’s say the background color, I put some gray over here, my email, I want it to be really white and I can also set some width.

So, let’s say for example, 650 pixels for this here.

I can always find that my body level setting just by going into the preview and selecting, you know, each of the items that I need.

So, once I do that, I will start dropping other layouts. Let’s say my other of my email would be a three-column layout and I will be starting creating some content here. Let me start dropping an image here, maybe some texts to build my menu. And with that, I would just go into, you know, browsing my assets. So here I really tapping into AEM Asset Essentials, and I’m going to search for my image here with my keyword. So, this is going to pull all the images and I have my logo here that I can insert. So, when I do that, then I want to just edit my text with some styling on this text to center it for example, put as an H3 heading, then I want to, not put it in bold.

Okay, so I have my styling here. I can just start duplicating it and moving it around. I remove this text in here, okay.

Now, one thing I might want to do is to add some margins of patterns, more precisely. So, I can do that, but just by selecting the structure and then the columns. And I can start adding some padding here to each of my coat column based on exactly what I need. So, let’s say here, we do, you know, 20 pixels.

And with that, my other is done.

So, I just continue showing just a few options on editing my email to use images. I also have another way of doing it. I can directly go into the asset picker here, and this will open my assets selector within the rail through here. And I can just drag and drop these assets into my email to create my email very, very quick.

Also, I can start leveraging some of these other components. So, let’s say for example, text component, and let’s do some quick editing here. So again, here, if I want, you know, to do at the column level, I can add some padding on each column in order to make sure my margins listed and okay.

Here, let’s say, I want to add some space in between this text and this button. where, I can add a divider. The divider can have a line or no line, and it can also have this big size. So, let’s go for this.

I can also add more styles to this button. So, let’s say I want to go for a different border. I don’t want any radius and I want to contain a color.

No, actually not this one. Let’s just put the background color for the button. So, I have my red button here. But this way I can quickly build an email. Another capability I wanted to show is to use the social component. So here you have the ability to quickly add every social network that you need, and you can define your links over here. So, this is also very useful. And the last option I wanted to show in terms of pure editing is the usage of the HTML component. So, this is a component that is very useful when you want to quickly bring in a design without creating each of the section individually, like I did here through here. And you could directly edit the HTML code. And the first time you’ll creating your email, if you already have your HTML, the site, but you can do is that you can select specific sections of story email. So, for example, here, I will go with, this section div. I will just paste it here. And when I do this, it will validate my and it will directly add my section here. So, this allows to bring in imaginary emails where you bring in these sections very quickly just by pacing HTML. So, we’ve seen basically how to edit an email from scratch with this editor. Now I’m going to touch into how we make sure this email is responsive. And to do that, we can switch to the mobile view. So, we see that you’re the email behaves correctly. It’s responsive. But what I want to show you is that you do have some additional capabilities for mobile specifically. The first thing you can do is when you set it, you know, a structure, you have the ability to say, if you want to stack the columns, or if you want to keep it like the desktop. So here, for example, for better readability, we’ll go with this option. Also, another ability that we have is to select the whole section. And we can say, if we want to show it on all device, or if we want to show it only on desktop, or only on mobile. For example, here, I would say show only on desktop, which means this will be done here, but in the desktop view, it will be shown. Also, every style options you can really define that here. So for example, you know, if the margins are different for the mobile view, you can really go here and adjust that specifically for demo value, because you want the image to be bigger here, going with them button. And that won’t affect the desktop.

So, with that, we’ve seen how to edit a responsive email. The last thing I wanted to show is that you’re also able to go into change your design and you can change your template, and you have the ability to select one of these out of the box template to avoid starting from scratch. And this way we can kick stop the creation of your email and use the exact same feature that I showed previously without having to start really from scratch. So, we’ve seen how we create email from scratch, by using different features of the email editor. We’ve seen how we can leverage assets from the AEM Assets Essentially Library, both in the rail view, but also in the model view. We’ve seen how to build a responsive email and how the editor really helps you to do that. And finally, we’ve also seen out to create emails from a template. - -