Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In the last video, we coded the layout of a multi-column product email using HTML tables. Let's work now on adding content. This is where we left off, a series of nested HTML tables that generally form the structure and the design that we want for our HTML email. The next step is to add copy. The first copy we add are the two little bits of copy at the very top of the email. This is a link to the web page version of the email, if it exists, and a short note to the reader to remind them how you got their email address and how they can unsubscribe.
And the next bit of copy we add are the navigation links. In addition, after the navigation links, we add the heading for Special Occasion Bouquets and Baskets, and we add the tagline, 'Send them that perfect gift to brighten their day'. Within the three-column, two-row product table that we set up, we add each of the images, and we add the name of the product, and we add the price.
If you recall in our original design, the price has a different color from the name of the product. For each product, we need to type in the name of the product, the amount of the product, and we need to put a span around the amount. Once we have the copy for one product, then we repeat that for the other five products. We have a paragraph tag. We have the image. We have the product name, a very simple break tag, a span around the price, and we close the paragraph tag.
And this is the result of adding copy to our HTML table layout. In a later movie, we will tighten up this design further using CSS styles to make this HTML email identical to the original JPEG of our multiproduct email.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.