3.4 Newsletter Email
The newsletter template is pretty straightforward. A newsletter displays news, hence the name. I want to display the most important news at the top, followed by a secondary item, and then at the bottom a list of tutorials or freebie links. 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.4 Newsletter Email
The newsletter template is pretty straightforward, because a newsletter displays news. Hence, the name. Now, in my case, I wanted to have my logo and the email title at the top, followed by the main news. Then followed by secondary news. And at the bottom, I want a list of recent tutorials or freebies. So we'll begin with some spacers and a link for opening the email in a browser, something like this. And then we're going to move on, we're going to make a wrapper. Container, row, and columns. And in here, we're gonna start with a spacer of size 30. And then my logo and the email title aligned in the center. Now, I've also added a spacer here, size 30, an H1, and a paragraph, both of these being aligned to the center, of course. And so far, we have this. Next up, I want to display the main news. So for that, I'm going to create a row with full width columns. And then, I want to use that main content wrapper which added top and bottom borders. So I'm gonna create a wrapper with a class of main-content. But in my case, I want it to skip the bottom border, so I'm gonna add an extra class no-bb or no bottom border. All right, and inside, I'm gonna have the image of the main news, and I followed that up with a spacer, and them I'm gonna add an h4. And I'm gonna follow that up with another spacer, let me just copy this. Okay, and finally, two paragraphs, one for a description, one for a read more link. And the result is this. All right, so this is the main news, but actually let's get rid of that border first. So we're gonna go into our apps.scss, and we're gonna say main content, or actually no, we don't need this. We can just target the no-bb class and then td with a class of wrapper-inner. And we'll just set border-bottom to none. All right, and that will get rid of that border. Next up, let's add the secondary content. And for that I'm gonna add actually right here, a wrapper with the class of secondary content. And inside I'm gonna have a title, an image and a description paragraph. I also added a spacer between the image and the title. And the image has the class of float-left because I want it on the left side. And I also added a class of custom image, and a height of 100. So here's what we have so far, right. And the reason I added that custom image class is because I wanted to give it a little bit more margin here on the right side. And also, the secondary-content class will define this entire section here. So let's actually start with the secondary content. By the way, there is also a component called a callout that you can use. In my case, I prefer to style this manually. But you can use a callout. It has a few different classes that you can use, a few different colors. So it's a customizable component. But, in my case, secondary content. And I'm also gonna target that wrapper inner table element. What I'm gonna do is set a padding of 30 pixels, and also a background color. Background color, I'm gonna lighten my main background color, which is dark gray, by about 70%. Okay, so that gives me this background here. Let's target the custom-image class. For this, I'm just gonna set a margin-right of about 30 pixels. All right, so that's gonna push the text to the right 30 pixels. All right, next, let's add the list of tutorials and freebies. This is tertiary content that's not that important, so it goes to the very bottom. So in my index newsletter here, I'm gonna create another row and I'm gonna organize this into columns basically. So I'm gonna have columns, let's see small. I wanna go 12 columns on small, 6 columns on large. And also let's give this a class of custom-list. And inside I'm gonna have a title, an h5, plus a list and a ul. So the title should say Tutorials, and the list should have some links with the titles of some of my most recent tutorials. Finally, I'm gonna copy this bit actually, and I'm gonna add Freebies. Now, this content is mostly dummy content really. I don't actually have freebies with these names, but it does not matter. So what have we got so far? We have our main content, secondary content, and our tertiary content. Maybe add a little bit more spacing here between these two rows. So let's add a spacer size 30, let's see. Yep, that looks good. And finally let's add our footer. Now, the only thing that I'm gonna do different with this template compared to the others, is that the footer is gonna be outside of my container. So I'm gonna go right here, and I'm gonna say row, columns, and I'm gonna add the same footer that I had in the previous template. Only right now, it is outside of my main container. All right, so let's give this a try. Let's see how it looks like on smaller screens. Okay, so my image here is gonna resize properly. Tutorials, freebies, all right, not bad. The only thing that I would actually change here is I would add a little bit more spacing between the image and the text on smaller screens. So let's go right here, app.css. Let's go ahead and target that media query. So I'm gonna say @media only screen, and what was it, max I believe, max-width. And we're gonna target that global breakpoint, okay. So what we're gonna do is we're gonna say custom-image. Simply add a margin-bottom of 30 pixels. Okay, so now this pushes the text down by 30 pixels. The rest I think looks pretty good. And with that, we've actually finished building the fourth sample, a newsletter email template. Like I was saying previously, I probably will polish these up a little bit, tamper with the colors, maybe the typography, the spacing, all that stuff. But that's just detailed work. It's CSS, basically. But the base is there, something that I can work with. Something that's compatible with pretty much all of the email clients. And all of this was done really easily with the help of Foundation for Emails. Now, this was the our last lesson of the course. Please join me in the next video for the conclusion. See you there.