Design email content from scratch

Welcome! In this video, you will learn how to design email content from scratch using the email designer in Adobe Campaign. You will learn how to navigate the email designer, structure and design an email, personalize your email, and then preview and test your email. Let’s get started! To access the email designer when you’re in a delivery, you can either click on the Edit Email Body button here on the right, or when you click on the preview window, the Open Email Designer button. You have four options to create an email. You can either design your email from scratch, code your own with HTML, import an existing HTML file, or you can select the template to get you started, either from the sample templates provided by Adobe, or you can create your own template specific to your brand. But today, we’re going to design from scratch. So this is the email designer. Central to the email designer is the canvas. This is where you will build your email, and we’re going to get started by dragging and dropping the first structure component onto the canvas. This enables us to set up the body. I will start by adding the preheader, and then I can set up the style. So let me change the background color to Frescoppa Orange. So that’s the brand we’re working with, a coffee company. There we go. That looks good. Next, I’ll change the viewport color to white. Now, I could change the font if I wanted to. I’ll just leave it as it is. But let me change the width to 650 pixels. We could add margins if we wanted to. I’m going to leave that. So we’ve been defining the body. Now you have the structure component, so you can set up the style and the settings for the structure component. You can define if it’s a header or footer, or if it’s shown on the desktop only or the mobile devices. We’re going to set it as a header. And now I’m going to add an image. I’m going to add our logo. So I can either browse for the logo or import the media. And if I click on that image, you can see now I’m in the image settings. Here again, browsing, which is the select an asset or import media. And you can also set the styles for this image. So I’m going to select an asset. This will open Adobe Asset Essentials. And now I have my assets that I have available for our brand. Let me choose our logo. Can of course also search for the logo. So first, let me add a URL. I can add an alternative text, image title, etc. Normally a good practice to do that. So here the logo is a bit big. Let me make it a tiny bit, well, quite a lot smaller. There, that looks better. Alignment is fine. We’re good to go. Okay. Next, I want to add a three column structure. I’m going to add a text here. Now let’s format heading three. I will center align. I do not want it in bold. So let’s remove that. And let’s change the color. Get into the Frisco, orange. There we go. Now let me change the background color of the column. Okay, let me change it to white. Okay, now let me just copy this twice because we need two more texts. And drag and drop it over into the other column. Let’s speed this up a bit. And then I need to just change the background colors of the columns again. There we go. And now I just need to change the text. So let’s add a link. Up here you can click on the link sign. Let me copy and paste. There we go. We have the label coffee. Now let me change the color. I do not want it to look like a link. And then settings. No underline. That’s great, except for that I chose the wrong color. So let me just change it back to orange. Now that we have a couple of style elements and structures, let me show you how to navigate between those. So here you see you have the body. You click on it, the structure one with one column and one component. And if I click on that on the right, you see the settings tabs open up. So that’s a very quick way of navigating. But now let’s add another element. And here I would like to again add an image. This time I’m going to simply select an image from the asset selector. So I’m going to drag and drop it into the structure. Now let’s add some more text. So there’s a newsletter after all. Now let’s add some text. And magically the formatting. I’m fast forwarding a bit. Some margins. And the background color for the column. And let’s add some personalization.

So click on to the text where you want to add personalization and then into the add personalization. This is the personalization editor. We’re going to add recipient data. In this case, I will add the first name. Just click on plus once you’ve found it. I’m going to put the comma in the personalization field. Here we go. Now let’s jump a couple of steps ahead. And you can see I’ve added some content, changed the title and added a button. Now let’s take a look at the links. So here you can see the list of links that are available, including the link that we added to the button or that was added to the button. And you can see if the tracking is enabled and which label they’re on. The link on the logo. So I will add the label logo and then the tracking type. You can see if it’s tracked, opt out, if it’s a mirror page, etc. So let me save this. Now let me show you two more content types. I’ll add another column, which will be my footer. Now we have social media content type. And here you have Facebook, you have Twitter, which you should probably change to X. You can swap the logo, Instagram, and you can add any other social media accounts. And then let me show you. Of course, every email needs to have an unsubscription link. So let me create this and let me show you how you can quickly do this by personalizing. And in this case, we’re going to personalize on content blocks. And here we have the unsubscription link, which is basically a text block, a content block that gets added to the email. Now that our email is done, let’s simulate the content and see what it’s going to look like. Now, to do that, we first need to add some test profiles. You can do that by clicking the button here. And now we have a list of test profiles. I’ll just choose the first one, Aaron McDonald. And you can see the email has been personalized. Aaron, sip into blissful moments. That’s great. Now let’s see what our text block looks like. There we go. Next, let’s look at the personalized mobile view. So that looks fine as well. And if you have a contract with litmus, you have the button up there, render email. Litmus allows you to test what your email will look like in your customers inboxes. Then you can test the deliverability by clicking on the test button up there. You can send test emails to a set of test profiles. Just add as many as you would like. Send the test email. And once the emails have been sent, you can take a look at the test email log, where you can see the deliverability data, how many have been targeted, delivered, delivery rate opens and clicks. And we have one more option. By clicking on the eye, you can see how your email will render on the different devices and platforms. That you see listed here. Once you’re satisfied with the results and how your email renders, click save and close and you are done. Now you know how to navigate the email designer, how to create an email from scratch, add personalization and preview and test your email. Thank you for watching.