3.3 Marketing Email
Let’s create a marketing email template. I’m going to make this one about a product I call “Magni”—it’s a mega dropdown menu I plan on releasing soon.
The goal for this is simple: I want a short introduction, key features, a screenshot of the product, and some kind of “Buy” button which links to the page on CodeCanyon where I intend to sell this. Let’s begin.
1.Introduction2 lessons, 03:30
2.Getting Started with Foundation for Emails5 lessons, 35:24
3.Let’s Create Some Emails4 lessons, 25:53
4.Conclusion1 lesson, 00:56
3.3 Marketing Email
Let's create a marketing email template and the goal for this is very simple. It's about selling a product that I call Magnie, it's a mega drop down menu that I plan on releasing soon. And the structure is pretty simple. I want a small introduction, I want key features, a screenshot of the product and some kind of buy button that's gonna link to the code canion where I will hopefully sell this. So let's begin simply again with a spacer. With a size of 30 and then we'll continue with our typical layout of wrapper, container, row and columns where I'm gonna add my logo all right. Next we're gonna have some features, so I'm gonna add another row here and some columns. Now in here, I have a spacer, I have a heading 1 for the title, a paragraph for like a subtitle, another spacer, and then an image that shows a screenshot of my app. So currently, it looks like this, pretty good. Now below this, I want to have Some features, organized in columns. So I'm gonna add a row after this, and I'm gonna use the same column structure that I did in the previous video. So basically, we have two columns. 6 on large, 12 on small, with the class of custom-list to make the text a little bit smaller. And I'm just adding an h5 and a paragraph to each as a feature title and a small description. So I'm gonna duplicate this row and add two more features. All right, so let's see how that looks. That looks pretty good. The only thing that I don't like is how the text kind of clashes here. So what I'm gonna do is add, let's see where is it? Row, columns I wanna add this class to these columns called custom-features. And then I'm going to my apps css. And I'm gonna say custom-features. I'm gonna target the child columns, and then table th. And I'm gonna set a padding of 0 ad 1m. So just a lateral padding. So now, we should have some nice padding here. But we do not. Okay, why is that? .custom-features .columns, sorry. All right, so now we have some extra padding here. That looks good. Finally let's add a section here that will contain a title and a button that will get us to the sale page. And to do that I'm gonna add a wrapper with a class of main-content and I'm gonna center an h4 and a button. And that gives us this layout. Finally, let's add our footer. And for a footer, I'm simply gonna add another row here, and it's the footer that I used in my previous email. Let's have a look. All right, maybe add a spacer here before this footer. So, size 30 spacer there, refresh and it's all good. Let's do a quick test. Let's resize this to see if everything looks good apart from here the icons and logo but it seems to working in order. All right and that's it for the marketing email. The next one, the last one actually on the list is a newsletter email, so we'll cover that in the next lesson.