与国外客户打交道,避免不了邮件的往来,尤其是节假日,可能要发一点祝贺等邮件,祝贺一下圣诞快乐或者新年快乐的,普通的邮件可能便是一段笔墨的祝福,或者直接在邮件客户端插入一张图片

不过你有没有想过把邮件做的更好看一点呢?像下图这样:

如果你也想做成这样的邮件,那么这篇文章你就不要错过了,接下来就随着我一步一步如何制作一个这样的邮件吧!

html邮件模板节日10分钟带你制造一封英俊的营销邮件 jQuery

如何制作俊秀的邮件

俊秀的邮件不仅在排版布局上吸引用户的点击,而且还能表示你的分歧凡响,增加你的品牌影象。

我订阅了很多国外的博客邮件,个中印象最深刻的便是Shopify的邮件

这是shopify日常的博文邮件,险些每天都在推送,相对付其他普通的邮件的话,我更乐意看这种邮件中的文章。

这种邮件呢有个专业术语,叫HTML邮件,那什么是HTML呢?

HTML是Hyper Text Markup Language的简写,翻译成中文便是超文本措辞,普通来说便是能让图片、笔墨和视频排版好看的措辞,常日它长这个样子:

第一次看有可能密集恐怖症会产生发火!

难道做一个俊秀的邮件必须要打仗这些天书似的HTML吗?

当然不用,这里我找到了完备避免手工制作HTML邮件的方法,那便是可视化编辑制作HTML邮件。

可视化编辑看到字面意思我们就知道,只需拖拽编辑。

我们只用拖拽对应的元素到编辑器中即可实现想要的效果,比如要插入图片,拖一张图片元素进来,要添加一个按钮,拖一个按钮元素进来。

可视化编辑是未来制作网页和邮件的大趋势,这种方法只要你会移动鼠标就能制作内容的方法,当然能极大的提高你的办公效率。

那么有什么工具能够可视化编辑HTML邮件呢?不焦急,打起精神来,接下来我将带领你一步一步的实操。

如何探求好用的在线工具

当我想找新的利用工具的时候,会利用英文去谷歌搜索,由于国外的邮件利用场景毕竟会更多一点,选择的余地也会更多一点。

不过在搜索的时候我碰着了一个难题,可视化编辑的英文是什么?

没紧要,我们利用最大略描述法,我们要找的是邮件编辑器,邮件编辑器英文我会,便是email builder,ok,那就在谷歌里面输入入best email builder的时候,不焦急回车,我们查看下拉框看看有没有什么惊喜,果真找到了一个核心关键词best drag and drop email builder-最好的拖拽邮件编辑器,这个词和可视化邮件编辑器的意思基本同等了,搜之。

通过这个搜索方法我们能快速定位自己想要找的工具,先输入大略的描述单词,然后不才拉框中探求更详细的描述,由于谷歌会不才拉框中推送环球公民最关心的问题!
⬇️

通过上面的方法我们找到了一大堆的邮件编辑工具,以下是我搜集到的网址,当然你也可以试试,大概能找到更多惊喜:

•beefree.io/bee-free•stripo.email/templates•freeemaileditor.com•mosaico.io•chamaileon.io•litmus.com/email-builder

经由多轮筛选测试,我选择了beefree.io来制作HTML邮件。

最好用的在线HTML邮件编辑器

beefree.io/templates/ 的官网见告我,它们目前有200+个邮件模板,当我看到这些模板时,口水都流了一地,而当我知道大部分都不用注册免费利用的时候,赶紧点开一个邮件查看起来:⬇️

制作邮件贺卡的主题是圣诞节,以是我选择了一个干系的主题,点开看之:⬇️

##编辑邮件 这款圣诞主题的邮件里面有个bling bling的彩灯,看起来节日气氛就不错,就选它了,初步剖析素材,我须要准备5张图片,包括:

•logo一张•主产品一张•其他产品三张

上图的第3部分我暂时不须要,就删除了,那么剩下的紧张便是图片与文案的准备了,先来看看图片如何设置。

首先我来更换一下主产品图,由于主产品图片要一张PNG,PNG格式的图片背景必须是透明色,以是我要扣一下图。

这时我选择在线抠图工具remove.bg,只需上传一张图片即可完成抠图,建议纯色底抠图更干净。
⬇️

嗯,抠的完美!

回到beefree,在左边点击选中主图,然后右侧涌现的Change image点击一下:⬇️

然后点击一个文件夹进入,接着点击Upload,即可上传刚才抠好的图片,末了点击图片insert即可。
⬇️

点击植入之后可以在右侧调度图片大小,位置,都是很方便的,drag&drop 很NICE!
⬇️

特殊把稳,图片下面的alertnate text一定要填写,这个部分当图片无法加载出来时,alertnate text会见告用户该图片讲的是什么⬇️

这一栏属于自我介绍或者公司先容部分,暂时不须要直接删除⬇️

然后依次把剩下的几张产品图片上传,修正标题添加按钮链接等操作 ⬇️

然后把其他的社交链接都加上 ⬇️

这里要特殊把稳,由于我们利用的是免费操作,我们只能下载zip压缩包到本地 ⬇️

如果你已经购买付费版,那么无需接下来的操作,付费版可以直接转化为html或者导入mailchimp edm系统中直接发送邮件。

beefree的价格是约15美金,价格适中,长期制作的话建议购买付费版。

免费版的额外操作

由于没有利用付费套餐,我们只能下载一个压缩包,在解压之后可以看到两个文件:

我们点击这个.html结尾的文件,即可在浏览器中看到我们的邮件主题了:⬇️

但是这个邮件只能在自己的电脑上看到,该如何将弄到邮件里面去呢?

接着操作!
以下手腕比较hacker,请仔细操作。

压缩文件夹中的图片

想要把文件弄到在线的邮件里面,首先我们要做的便是把图片上传到在线。
想了半天,图片该当放到在线哪里呢?我总结了一下,你可以把图片上传到:

•网站后台媒体库•mailchimp媒体库•其他图床

那么我就示范一下图片上传到自己的网站后台吧,不过在上传图片之前我建议大家将图片进行无损压缩一下。

电脑本地的图片都在image文件夹中⬇️

这里的图片格式有gif/jpg/png,jpg和png我们可以利用tinypng.com进行无损压缩 ⬇️

gif图片比较分外,是一种动态图片,我们也可以利用其余一个在线工具压缩:https://www.iloveimg.com/zh-cn/compress-image/compress-gif 不过gif压缩可能会导致较小的gif变成png,请额外把稳一下。

压缩图片是为了邮件加载速率更快一点

然后我们整理一下压缩过后的图片,千万把稳,图片名称不要变动。

将图片上传至我们的网站后台,这里以wordpress网站演示:⬇️

然后打开图片,复制一下图片的链接:⬇️

图片链接格式一样平常是:

https://keentalking.com/wp-content/uploads/2020/01/Excavator1.jpg

我们删除后面的图片名称,只保留前面的部分,后面要用到:

https://keentalking.com/wp-content/uploads/2020/01/利用subline text批量更换图片链接

这里用到的最好一个工具是subline text,官网是sublimetext.com/3,这是一款代码编辑工具,我们利用它来批量更换HTML文件中的图片链接。

首先下载subline text,官网下载的有个人免费版,安装好之后打开html文件:⬇️

然后用快捷键ctrl+f或者command+f

1.打开查找2.下方搜索框内输入"images/"3.点击find All ⬇️

这时候你会创造所有包含"images/"的选项全部选中了:⬇️

接着按一下键盘上的左方向键⬅️,选中的笔墨变成了光标,然后按几下键盘的右方向键➡️,移动光标到"images/"后面,点击Delete键,向前全部删除"images/" 。
提及来比较繁芜,但做起来很大略,请看动图操作演示 ⬇️

末了一步,粘贴我们之前的链接

https://keentalking.com/wp-content/uploads/2020/01/

我们创造所有的图片链接都换成了自己的官网图片链接 ⬇️

点击快捷键ctrl+s或command+s保存。

验证图片是否更换成功

我们验证一下这些图片是否都更换成功了。

这里我推举利用qq邮箱来检测一下。

打开qq邮箱,写信创建一个空缺邮件,然后点击“格式”,涌现的工具栏中点击"</>"

全选subline text中的所有代码:

并粘贴到qq邮箱空缺邮件处,粘贴完毕点击返回可视化编辑:⬇️

涌现完全的HTML即表示成功!
⬇️

接下来发送给自己的事情邮箱,然后转发给用户等等都是得心应手啦!
或者你可以直接把代码放入mailchimp等EDM发信系统也是可以的。

吐血总结

写完这篇文章我创造一个至理名言:免费才是最贵的。

如果我购买了15美金的月套餐,那么这篇文章的一半就能截稿了!

当然做好一封高点击的营销邮件,还是须要在文案高下点功夫,比如标题、描述、CalltoAction都要仔细撰写,由于篇幅限定本节不做过多谈论,往后文章补上。

以上是我总结的快速高效制作一个俊秀的营销邮件,文章比较长,可能有点疏漏,如果有什么问题,可以点击阅读全文到我的博客评论留言。

我是Keen,一个专注分享外贸增长技能的外贸增长官,欢迎关注转发