整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

使用拉易网生成图文并茂的HTML邮件(一)

这几天有好几个身边的朋友很惊讶地问我怎样制作出一些精美的图文并茂的邮件,所以我决定从今天起一连几天抽空编写出一套教程,分享给有同样需求的小伙伴。

图文并茂的邮件的优点有哪些?

吸引力强,具有强大的视觉冲击力,增加用户的存留时间。

有效地引用导户点击链接。因为图片和按钮都可以增加跳转链接,从而更有效地引导用户点击链接,跳转到自己的网站。

更有效地提高转化率,对于普通的文本邮件更有效地吸引用户,提高潜在客户到真实客户的转化率。

什么行业适用于图文并茂的HTML邮件?

适用于HTML邮件的行业非常多,如:旅游、美食、地产、外贸、电商、推销、广告、保险…几乎包含各行各业,只要涉及广告与营销的,都适合适用HTML邮件发送。

废话不多说,看看接下来这几天分享的这个例子,我选择了一个较为复杂的页面进行分析讲解,如果大家都会做这个例子,那么90%的HTML邮件制作都难不倒你们了。虽然官方案例中也有这个例子,但我的做法跟它不一样。先上图:

相信熟悉微信的小伙伴看起来比较眼熟,这是微信发送的商户资料审核通过的通知,这就是一封图文并茂的HTML邮件。我教大家怎样通过不写代码,直接使用拖拽应用来生成一份这样的HTML邮件。

好今天就抽空写到这里,准备吃早餐上班,今晚或明天就真正地开始我们的制作之旅。

————————————————

版权声明:本文为CSDN博主「^_^秀」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/winner_xiu/article/details/99670227

件制作不同于其他的页面制作,所以有些规范您还是得考虑的。

1.模板编码语言选择

模板编码设定与使用的发送软件有关,一般来说,utf-8为较常用的选择,错误 的编码会造成用户浏览的时候出现乱码。

2.对于HTML格式邮件的要求

包括空格在内,邮件标题的字符最好控制在35个字符。 文件大小(HTML和图片)最好控制在500KB以下。 电子邮件推荐宽度为850像素以内。鉴于现的浏览器普遍偏大,可根据设计的显 示效果自定义宽度,建议不要超过750像素。 不推荐使用最新的HTML版本,因为目前常用的浏览器有些是不支持最新的HTML 标签的,为了给用户更好的浏览效果,采用“老版本”HTML3.2、HTML4.0即可。

EDM table布局规范

1.不要使用div,使用table定位

Div+css是近几年新兴的web2.0定位方式,这种 方式不适合在邮件模板切割中使用,不同邮件客 户端或在线浏览器对css模型解释不尽相同,甚 至部分ISP会直接屏蔽部分css样式,造成错位或 布局混乱等问题。

2.使用table布局时,不可重复多次colspan

不要使用单一table重复多次colspan,可能会被 邮件客户端判断为结构过于复杂,归类为垃圾邮 件;同时也容易被打乱布局而影响用户浏览。

<table> <tr>

<td><table> <tr>

<td> </td>

<td> </td> </tr>

</table></td> </tr>

<tr>

<td><table> <tr>

<td> </td> <td> </td> <td> </td>

</tr> </table></td>

</tr> <tr>

<td><table> <tr>

<td> </td>

<td> </td> </tr>

</table></td> </tr>

</table>

EDM | 图片样式与背景图片颜色使用规范

1.模板尽量不要使用背景图片

背景图片在某些邮件客户端或web界面(如 Gmail、OutLook) 中默认不显示,所以模板最好不要使用背景图片,建议使用 背景颜色。但邮件中是可以使用背景颜色的,大部分的邮件 客户端都是支持的。

2.每张图都要指定width宽度

每张图都要指定width宽度、height高度,在图片被拦截的时 候,不会因图片大小无法读 取而被打乱布局。

3.每张图都要指定alt属性

每张图都要指定alt属性,可以在图片被拦截的时候显示图片 的内容;这样客户打开邮件在没有点击下载图片的时候先是 可以看到文字的表述,知道此封邮件大概的内容,而提升用 户对此封邮件的体验,从而提高邮件的点击率并非像上图中 ,显示为空白,给用户带来不必要的困扰。

图片样式与文本链接规范

1. 图片链接不要使用<map>标签,因为部分邮件运营商 会屏蔽<map>标签,而导致图片无法点击。

2. 请使用英文字符对图片名称命名,不要使用中文、非法 字符来命名图片,否则会导致图片无法显示。

3. 在切割模板的时候,要注意限制图片的大小和数量,不要为 了效果使图片过大,会使邮件接收者打开过于缓慢,甚至直 接关闭邮件。

4.纯图片邮件图片于图片之前出现断行 ,目前很多公司的邮件都是使用大图片切图这种不规则的 ,经常出现下面的问题

解决方法:

<img src=http: // blog.54575.com/logo.gif” width=297′′ height=160′′ alt=”情人节特供” style="display:block;" />。

在每张图片后添加 style="display:block;" 此CSS即可。

EDM | CSS样式规范

1.不要使用外部样式表引用,将样式表 写入模板内部,因为大部分的ISP会 屏蔽css样式表 如:

2.padding和margin标签

table中,某些邮件客户端或web界面 (如Gmail), 对浮动的标签(padding 、margin等)支持很差,所以尽量不 要使用。

3.尽量不要使用<h2>、<ul>、<li>、 <p>、<ol>等有默认样式的标签。 防止style不被ISP正确解析时页面布 局混乱。

EDM | 动画与互动元素的规范

1. 可以使用简单的gif动画来表达某些需要明显突出的要素,但要控制gif文件的大 小,不要影响整封邮件的下载浏览速度; 但gif动画在OutLook 里是失效的。

2. 不要使用Flash、Java、Javascript、Frames,I-Frames、ActiveX、dynamic HTML等,前些年邮件病毒泛滥,大部分邮件运营商都已经屏蔽了这些元素

们在日常工作中,经常需要把整理好的表格,复制粘贴到邮件的正文中,那么怎样通过UiPath来实现带有表格内容的邮件正文。

本次内容所要用到的Activities有:

  1. ReadRange---获取数据源
  2. Assign---拼接html格式
  3. ReadTextFile---读取html数据模板
  4. For Each Row---填入数据
  5. Send OutlookMail Message---发送邮件

下面是整个流程的实现过程:

现在开始介绍每一个步骤的详细设定

第一步:通过ReadRange来读取我们需要发送邮件的正文内容的数据,输出OutPut,我们定义为DataTable类型,命名为DT。这里的ReadRange,我使用的是WorkBook中的activities。

第二步:拼接html格式

head的内容:"<html><body><table border="+"1"+" cellspacing="+""+"><tr><td>姓名</td><td>身份证</td> <td>出生年</td><td>年龄</td></tr>"

tail的内容:"</tr></table></body></html>"

第三步:读取temp模板,来用填写数据。

temp模板的内容为:{0}:填写姓名,{1}:身份证,{2}:出生年,{3}:年龄

第四步:通过for each row来将所有数据的填入,并拼接成html格式

body:body+string.Format(temp,row[0].ToString(),row[1].ToString(),row[2].ToString(),row[3].ToString())

第五步:通过Send OutlookMail Message来发送邮件,

outlook的格式选择如下:

最后我们来看看实现之后,我的邮件收到的效果

好了,上面就是我们如何发送带有表格正文的邮件,通过拼接html来实现的。

如果大家在实现的过程中有任何疑问,可以扫描下方二维码,一起讨论,共同学习