3.2 Welcome Email
The welcome email might be sent to anyone who subscribes to my website and should contain references to the most important things it offers. A menu can also be added to provide links to those pages. Let’s go ahead and build it.
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.2 Welcome Email
The welcome email should be sent to people who subscribe to my website and should contain links relevant to the most important areas of my website. A menu can also be added to provide those links, so let's go ahead and build it. Now, I'm gonna start off with a spacer this time. I'm gonna set the size to 30 and then I'm gonna start with a wrapper, a container with row and columns. And then I'm gonna add another spacer, and I'm gonna add my logo, again, in the center. All right, looks good so far. Next, I'm gonna add another row with some columns, and inside, I'm gonna start with a menu that's gonna show four links. I'm also gonna place the menu in the center. So we have center, menu with the class of show-for-large, and show-for-large basically means only show this element for large screens. Hide it for the small screens. We have four items, portfolio, courses and tutorials, blog, and about, all right. After this, let's go with another spacer. And I also want to only show this for large screens. And then, I'm gonna add a wrapper with a class of main content. And inside this wrapper, I'm gonna have a title, an introductory paragraph, and some columns. So let's start with the title and a paragraph, and that gets us right here. And then I'm gonna add a large spacer with a size of 60 and then inside another row. And the columns, I'm gonna have them split in two, or split the page in two. 6 columns for large screens, 12 columns for small screens. And inside I'm gonna have a title, a paragraph and a link, something like this. Now, notice I added the class of custom-list to these, because I want the paragraph text to be a little smaller. Currently, it looks something like this. So I want this, and this to be just a tad smaller. So for that, I'm gonna go into my app. And I'm gonna add the styles right here. So custom list paragraph, font size 85%. All right, that is better. Then, I'm gonna add another row with another two sections. So, Our layout currently looks like this. We have links for WordPress Themes, Courses, Freebies, and Blog posts. Finally, I want to add my footer, which contains my social media info and my address. That's really simple to do. Simply add another row. A menu for the links, just like we did in the previous email, let's base our end some paragraphs. And the resulting email looks something like this. Now, if I'm gonna resize this, you'll notice that on small screens My menu is gone. Please disregard the bigger images. So the menu is gone and also these columns are now stacked. One On top of the other, and that's the welcome email. Next on the list is a marketing email which can be used to promote and sell even a product. That's coming up in the next lesson.