Once you get the details of the font, enter the header text in the header area of the template, and include the font details too. In my example, my header text HTML is as follow:. That is where you define your background color, font family, font size as well as letter spacing. Try to fill the text space with suitable letter spacing and font size; make sure it does not break your template. Now you need to repeat the same process for every text in your template. Make sure all text images are transformed into web fonts and avoid unnecessary images in HTML.
You can also download the final template here for your reference. Register a free account with Dropbox, and then install the app to your PC or Mac so you can skip the uploading process over the Web. Let the app do the uploading for you.
The email template you created was saved in a folder. Paste this link to your web browser, then open it as a web page. Your newsletter now appears as your email content. Enter the subject and email address and send out your first email newsletter!
Since Dropbox has no longer provide Public folder feature for Dropbox user who registered after 1st August , you may try Site44 , an app that turns Dropbox folders into websites. Visit Site44 and sign in with Dropbox to get started.
Allow Site44 connects with your Dropbox account. In "Use a site In this case, I am using " mynewsletter " as my folder name. After that, accept the terms of use to proceed. Copy newsletter. As long as the newsletter HTML folder is still saved in your Dopbox Public folder, your recipient will be able to view your newsletter correctly, but once you remove the folder, the link will be broken, and the recipient will only be able to view the text.
If you have other ways, do share with the rest of our readers. Please enable JavaScript in your browser to enjoy a better experience. Email template You can be as creative as you like with your email template, but bear in mind, with more creative elements included, there will be more work in slicing each element. You can connect with customers through helpful tips and information. You can even boost your social following or traffic to your site.
Just remember, good email campaigns are tailored to your needs as well as to the needs of your users. A good email newsletter is not an update of company news. It offers readers exclusive information they could not get anywhere else and then calls on them to click, buy or subscribe.
To do that, your newsletter format should be simple and easy to read, yet attention-grabbing. When it comes to email newsletter design and layout, there are some best practices to follow. Design your newsletter with a width of around to px and make sure the important information is within the top to px.
Open up Photoshop and create a new document with a width of px, a height of px and a resolution of 72dpi. Be sure the color mode is RGB.
For this newsletter example, I filled the background layer with a light gray. Then I created a container px wide to house the main content. I filled it with white and positioned it in the center of the document.
I added this notice to the top of the newsletter using the Myriad Pro font , 10pt size:. Email not displaying correctly? View it in your browser. Some email clients might not download images by default. To improve accessibility, always include a link to view the email newsletter in a web browser.
The goal is to keep interested readers up-to-date with the latest goings on through a weekly bundle. Since the branding on my blog has already been established, choosing the fonts, color, and graphics of my newsletter is easy. The above image is the header of the blog, which I also created in Photoshop. I start by opening up the psd of the blog header and copying the mascot over into the email newsletter template. From there, I grab the name and slogan and copy them into the email newsletter template, as well.
With some minor revisions to the text, the newsletter looks like this:. Again, borrowing the design attributes already laid out in my blog, The Pet Anthology, I create the heading using Museo Sans , drag and drop the main image and copy in the article text.
A dotted border placed underneath will separate each article field. I then duplicate the first entry twice and move them down to fill out the rest of the spots for this newsletter. Using guides , I insert the remaining two entries and erase the duplicated content.
I want to include an area for social network and RSS icons, and I want to let the subscriber share the newsletter with friends. I start by creating a rectangle px wide and include a call to action that encourages subscribers to follow us.
I use the appropriate social network icons, changing the colors to reflect my branding. Keeping in mind the usability of email newsletters I decide to keep things simple. To wrap things up, I create the footer, which will allow subscribers to get in contact with me or to unsubscribe from the newsletter.
You also have to keep in mind two very important aspects regarding sending emails:. With this in mind, it is important to code the majority of the email with HTML. By clicking the button, you confirm that you have familiarised yourself with information about the processing of personal data. Terms of Service. Preparing the newsletter template in Photoshop.
They are not necessary; however they will make your tasks easier. It is best to choose UTF-8 code. After saving it in the desired folder, you can now see the template and HTML code.
0コメント