整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
时在我们的收件箱里面,经常会收到很多精美的HTML邮件,上面有文字,图片,图文并茂,点击图片按钮可以直接跳转到所要导流的页面,有的邮件下面还有Social的Logo,比如Facebook,twitter,点击按钮就会跳转所对应的页面。
比如上面截取了一些HTML的邮箱格式,这种HTML的EDM营销感觉非常的酷,比纯文本的邮件更有丰富多彩,也更能传达出更多的内容跟素材,也更吸引抓住用户的眼球。图片下面直接可以设置链接,也方便用户直接点击进入,避免二次流失。
今天就给大家介绍一款在线制作HTML邮件的工具,其实操作也是非常的简单,可以直接在网站内的系统模板修改，替换成自己的素材和链接,也可以自己去设置图文排版。
这款工具就是Topol,一款专门在线制作HTML邮件的工具,非常容易操作跟上手
网址为https://app.topol.io
刚开始制作时建议直接使用网址内的模板去替换自己产品的素材,文案跟链接,因为网址里面提供了几十套制作非常精美的HTML邮件,我们先来看看。
大家可以根据自己的喜爱,去选择喜欢的模板直接点击进去去后台编辑,替换自己的元素,接下来来看看如何替换跟编辑：
比如就以下面这个手环的HTML邮件为模板,因为上面的图文信息真的非常非常丰富,有产品图片,购买按钮,产品Slogan,产品功能介绍以及社媒链接等，展示元素非常充足。
打开后台页面是这样的,首先先熟悉下下方左侧红色方框内的意思,其实也都是非常好理解的, 就是我们想要在右侧HTML邮件模板中需要什么元素,直接把红色方框内的按钮拖过去,比如需要放置文案，就把TEXT按钮,拖过去,如果是放置图片,GIF或者视频,就把对应的按钮拖到需要放置的展示位置就可以。
Sturecture按钮就是你想要图片或者文案的格式,直接拖过去就可以,知道这些意思之后,接下来我们看看如何操作。
第一,先选择你想要排列的Structure,比如选择2个横排并列,直接拖2个并列的结构过去，如下所示：
第二,就是要思考你想要展示的元素是什么,是文案还是图片,把想要展示的形式直接拖到上图2个方框里面,比如我们选择图片
然后选择2个我们自己产品的图片放上去,如下图所示,为了节省时间,文案部分就不做修改,修改方式跟图片是一样的,只需要把图片的文案替换成我们自己的就可以。
然后图片下面有个Check whole collection按钮，可以删去这个按钮,也可以点击保留按钮,可以在按钮下面放上自己的产品链接以及显示在按钮上的文案, 还可以调整按钮显示的验收,尺寸大小,字体验收等等非常详细的信息,建议大家可以都去尝试下。
下面就是产品功能的一些展示,可以把下面的主要展示功能替换为自己产品的功能以及图片，文案等,操作方法跟上面那个一样。
接下来就是产品橱窗展示以及购物按钮添加,以及一些物流等相关信息,可以把下面的产品展示图片替换成自己的以及链接。
在接下来就是一些社交媒体的展示,直接点击下面的按钮然后在对应的社交媒体输入对应的链接,当用户点击的时候就会跳转到对应的页面。
加好这些之后,就可以预览下效果怎么样，可以Preview在PC跟移动端,哪里有不合适的可以直接调整下，如果觉得一切都ok的可以发送到自己的邮箱预览,尤其是导流的链接,点击下是否能跳转到所要导流的页面。
然后你的邮箱就会收到你自己亲手做的HTML精美的邮件,因为我这个主要做演示作用,有很多没有调整所以做的比较难看,大家可以好好设计一下,做出非常精美的HTML邮件,从而做好EDM营销，吸引用户点击邮箱,从而提高转化。
如果你的邮箱收到自己做的HTML邮件,检查之后没有问题,就可以转发给用户,可以是做B2C的用户，也可以是外贸B端用来发开发信的用户。
还有一个方法发送HTML邮件,就是比较复杂一些,做好HTML邮件之后点击保存按钮,然后获取HTML源代码，然后复制源代码去转换。
比如常见的QQ邮箱,网易邮箱都可以转化,以QQ邮箱为例,点击格式--然后复制粘贴HTML源代码--点击可视化编辑按钮就可以啦，如下图所示
Topol工具真的非常方便制作HTML图文并茂邮件,且操作方法也非常简单,功能也非常繁多,建议大家可以好好去研究下，做好EDM营销，不仅仅对B端,C端用户,对开发红人,联系海外科技媒体编辑同样适用。
这篇文章写的也比较简单,主要是讲一些重要的步骤,如何设计非常有吸引力的HTML需要小伙伴在下面好好去尝试下。
作一封邮件和制作web页面还是有很大不同的。当不同的浏览器都在不断向标准靠近的同时，大多数邮件客户端却止步不前，甚至有一些是在退步的。在2007年，Microsoft 将 Outlook 的渲染引擎从 IE 转换成 Word的渲染方式，而一些基于web的邮件客户端，像Gmail和Hotmail，则增加了一些怪异的模式，还有Lotus Notes的一些技巧。
根据我的经验来看，我们解决这些问题的关键是要关注下面三件事情。首先，保持简单，你的邮件设计的越复杂，你的邮件在某个受欢迎的、不支持标准的客户端上“抽风”的可能性就越大。其次，你需要将你的编码技巧退步十年，这通常意味着我们要使用嵌套的表格，将CSS写成内联的形式等。最后，你需要对你的设计进行规律性的测试。
因为诸如Gmail和Outlook 2007 无法支持浮动(float)、外边距(margin)、内填充（padding）,你需要使用表格来作为你的邮件的框架。虽然表格嵌套的方法被广泛支持，但是在对单元格的宽度、外边距和内填充的处理方法并不一致。为了达到最优的效果，当制作表格结构时，请记住下面的技巧。
1、为每个单元格设置宽度，而不是表格
当你把表格宽度、td 宽度、td的填充和CSS的填充写到一封邮件时，你看到的结果可能是每个邮件客户端它们看上去都不一样。最可靠的方法是我们将为表格的每个单元格(th,td)设置宽度，而不是表格(table)本身。如下：
永远别指望邮件客户端能够计算出你没有指定宽度的单元格的宽度。它绝对不会。同时也要避免使用基于百分比的宽度，像 Outlook 2007 这样的客户端从来不考虑这种宽度方式，特别是这些嵌套的表格。像素级视觉，如果你想对每个单元格做填充，可以使用表单的单元格填属性或者用CSS的内填充，但是不要这两种一起使用。
2、嵌套迷思
表格的嵌套相对于设置左右浮动和外边距(margin)或者表单单元格填充的方法更加稳固。如果你能使用这种表格嵌套的方法达到相同的效果，这将会给你在那些蹩脚的（buggier）邮件终端上面获得最好的结果。
3、使用一个容器表单来设置 body 背景色彩
很多邮件客户端会忽略掉在CSS中或者<body>标签中设置的背景色。针对这种情况，将你的整封邮件用一个宽度为100%的表单包起来，并且为其设置背景色。如下：
你可以使用同样的方案在背景图片的设置上，需要记住的是某些邮件客户端是不支持背景图片的，这样你就需要设置一个背景颜色作为备份方案。
4、在单元格中避免使用多余的空格（whitespace）
尽最大可能，避免<td>标签中出现空格。某些邮件客户端（Yahoo!或者Hotmail）可能会在某些场景下，对单元格的上面或者下面增加额外的填充，把你的设计破坏掉。
当某些邮件设计师尽他们最大的努力去避免使用CSS时，他们又会去依赖梦魇般的<font>标签，但实际情况是很多的CSS属性是被大部分邮件客户端支持的。请查看下面的跨邮件终端的综合CSS支持列表list of CSS support，从中你也能发现一些安全的属性和一些应该被避免使用的属性。
1、将css写成内联(inline)的样式
Gmail就是这方面的罪魁祸首。CSS被从<head>和<body>中剥离，我们别无选择的会将样式写成内联的形式。一个好消息是你可以完全自动化的完成转化。像Premailer提供意见点击的方式完成这一过程。我强烈建议你将此步骤作为你构建活动的最后一步，你就能感受到这个CSS的所有益处。
2、避免使用字体的简写和十六进制计数法
一部分邮箱客户端会放弃对简写的css字体属性的解析。比如，绝对不要将你的字体样式设置成下面的样子。如下：
相反，我们应该写成下面的形式：
谈到字体这个话题，我最近也在不同的邮件客户端测试引用字体（@font-face）。结果是凄凉的，这些浏览器安全的字体在邮件中使用还是遥遥无期。
当我们用CSS来声明颜色属性时，有些邮件客户端并不支持简写的16进制的颜色值，比如 color:#f60; 我们需要将其补充完整 color:#ff6600;。为了达到最优的效果，我们需要使用常规写法。
像前面提到的单元格的间距，段落的间距也无法做到所有客户端的一致。我看到过设计师使用两个<br>或者用DIV写上内联(inline)的外边距(margin)样式弥补这个短板，但是我最近的测试显示大多数情况下对段落的支持都还是比充足的（有一段时间 Yahoo! 根本不支持段落标签）。
最好的实践方法是对每个段落通过内联(inline)的方法设置外边距(margin)，像下面这样：
再次提示，在你构建邮件的时候通过在head标签中增加样式，然后通过Premailer将他们转化成每个段落的内联样式。
如果你的设计对高度是很敏感的或者需要像素级别的完美，我强烈建议你不要将所有的段落写到一起，而是将文本的格式化工作放到表单的单元格中来做。你可能会需要使用到表单的嵌套或者单元格填充(cellpadding)/CSS 来达到期望的样子。下面就是一个例子：
某些邮件客户端将会用他们的默认样式覆盖你的链接色，你可以通过两部来防止其发生。第一，针对每一个链接设置一个内联的（inline）的颜色：
接下来，增加一个冗余的 span 标签在 a 标签中。
也许这些方案看上去比较过激，如果这个颜色对你的设计很重要，这个多余的 span 标签是你达到一致表现的最好解决方案。
很重要的一件需要牢记在心中的关于图片的事情是你的订阅者可能看不到你的图片。如果你有这方面的准备，你就会保持你的内容简单，并且重要的内容不通过图片的形式来展示。
在这个思想的指导下，在使用HTML邮件的过程中，下面有一些基本的要领需要牢记：
1、避免占位图片
虽然使用占位图片和嵌套表格的方式在10年前很流行，许多邮件客户端已经将其排除作为一种可靠的技术。很多客户端会使用一个相同尺寸的空占位来替换图片，另外一些会将所有的图片移除。大多数邮件客户端会给图片赋予默认的图片区块，这将导致订阅者的第一感觉很差。坚持将单元格赋予固定的宽度，让其在没有图片的时候版式不会乱掉。
2、将图片定义尺寸
如果你没有给每个图片设置尺寸，当图片没有被下载时，有些客户端会自己发明一个他们自己的尺寸，你的版式就乱掉了。同时，确保你的所有图片在被用到邮件中前，都被赋予了正确的尺寸。某些客户端会忽略你代码中设置的尺寸，而去使用真实的图片尺寸。
3、避免使用 PNG 图片
Lotus Notes 6 和 7 并不支持 8位（8-bit）和24位（24-bit）的 PNG 图片，所以需要使用GIF或者JPG格式的图片，即使这会增加而外的图片大小。
4、为背景图片提供备份的颜色
Outlook 2007 不支持背景图片(aside from this hack to get full page background images working)。如果你想在你的设计中使用背景图像，提供一个背景色作为备份支持方案。这样就能同时解决图片被屏蔽和Outlook 2007的问题。
5、不要忘记标注替代文本（alt text）
缺少标准的支持意味着邮件客户端对语义化和访问性良好的HTML邮件的破坏性是很大的。即使这样，从图片可能被屏蔽角度看，提供替代文本也是很重要的。这样即使图片在默认状态下被限制，大多数邮件客户端也能显示提供的文本来替代。另外还需要技术的是某些客户端，比如 Outlook 2007, Hotmail 和 Apple Mail 在图片被屏蔽的时候，并不提供替代文本（alt text）.
6、针对 Hotmail 使用显示hack
令人费解的是，Windows Live Hotmail 对每个图片增加了几个像素的填充。一个变通的方案就是使用下面的显示属性来解决这个问题。
这样就能移除掉Hotmail的填充值，但是你也可能会给其它客户端埋下隐患。
7、避免使用浮动属性（float）
Outlook 2007 和早期版本的 Notes 并不支持浮动属性（float）。在邮件中我们可以使用对齐属性在针对图像标签做到浮动图片的目的。
如果你在 Yahoo！的邮件中发现图片的怪异表现，增加 align="top" 可能能够解决你遇到的问题。
由于缺少 Javascript 或者其他对象标签（object tag）的支持，视频邮件最大的程度就是gif动画（如果你认为那是视频的话）。尽管如此，我最近做的一些关于用html5 videio 标签的测试结果，还是让人感觉不错。
HTML 5的标签目前在一部分邮件终端是无法运行的，包括 Apple Mail,Entourage 2008, MobileMe 和 iPhone.作为如果视频不被支持的补救方法，你可以提供稳定的备选内容，比如gif 动画或者一个可以点击到浏览器播放视频的图片。
当然，你是否需要将视频添加到你的邮件里面，那就是另外一个议题了，如果你的答案是肯定的，你可以使用这些代码案例。
移动端有机胺的情况近期显得比较杂乱了，随着iPhone,Android的发明和Palm和RIM的改进，认为移动端电子邮件终端不重要的年代一去不复返了。
为了给移动端订阅用户良好的体现，我们在编码的过程中也有几个关键点需要牢记心中。
1、保持宽度小于600像素
受限于邮件客户端的视窗，这条规则来移动视窗到来之前的年代就很重要。事实上，iphone 的视窗是320像素，Droid是480像素，Blackberry大概360像素。坚持最大600像素宽的设计，能够让你的邮件缩小到上面提到的设备上面依然可读。这个尺寸在桌面端和web端的预览效果也很好。
2、注意文本尺寸的自动调整
作为一个好的特性，基于webkit邮件客户端(比如 iPhone, Pre 和 Android) 能够自动调整文本的大小来提高阅读性。如果你的测试结果表明这项特点给你带来的好处是破外了你的设计，你可以通过下面的属性禁用：
虽然近几年邮件客户端对标准的支持并没有取得长足的进步，但是某些邮件客户端的改变却从未停止（有好有坏），基于 web 的客户端，如 Yahoo!、hotmail 和 Gmail 在这方面乏善可陈。我看到过无数次可行的设计方案被停止支持，没有任何解释。
基于这个原因，你也要对你的邮件设计保持规律的测试。我发现每个月进行一些快速的测试的小技巧，特别基于web的客户端。好的消息是经过几次设计和测试，你将会从这些杂乱无章中找到规律。一些潜在的陷阱将变的可以预计，一个对邮箱友好的设计模型也会在你心中成型。
本文参考“新浪UED”：创建坚如磐石的HTML邮件
果你要开拓海外市场，EDM电子邮件营销是整个营销战略中一项必不可少的营销方案。
相比于国内用户喜欢用QQ、微信、钉钉这些即时通讯工具，进行交流和沟通，电子邮件依然是很多海外用户的首选。
虽然电子邮件是个非常古老的交流工具，但是邮件推广依然有非常高的营销价值，使用的好可以为你带来高额的回报。
目前市场上的大多数电子邮件服务提供商都会有一个用于创建电子邮件活动的电子邮件编辑器，但很少有人提供电子邮件营销人员真正需要的东西。
一般的邮件编辑器除了文字就是图片，想要设计一款精美的富有个性化的邮件简直是难于登天，更不用说让用户有打开邮件的欲望。
不过，还好有可视化无需代码的拖放式HTML邮件模板制作工具，帮助邮件营销人员创造精美的邮件。
与那些老古董相比，在线拖放式邮件编辑器有大量设计好的精美的邮件营销模板，通过简单的拖放式编辑器，就可以立即对其进行编辑和定制，定制属于自己的个性化邮件。
Chamaileon因其用户友好的电子邮件设计编辑器和强大的图像编辑功能，成为很多企业级用户的首选。
Chamaileon提供了一个来自Pexels的免费图片库，你也可以添加自己的电子邮件通讯图片，进行定制和修改。
Chamaileon界面干净整洁，自身包含了一些精美的响应式电子邮件设计模板，用户也可以自定义创作自己的邮件模板。
除了可以对邮件进行定制和使用外，它还具有实时协作的功能，这对于电子邮件营销团队来说非常的友好。
Chamaileon有100多个响应式模板和1000多种内置小工具，可以导入自定义的HTML代码，和丰富的电子邮件内容管理工具，支持苹果和安卓移动设备，可以在所有版本的Outlook上工作。
虽然功能很强大，不过Chamaileon收费比较昂贵，最低价格300美元/月，比较适合大企业和大品牌的公司使用。
Postcards是Designmodo推出的在线产品之一，是一个非常容易使用的推广邮件构建工具。
Postcards有一个简单的界面，可以让你从头开始创建完全相应的、精美的、符合当前审美潮流的电子邮件模板。
Postcards有100多个预先设计好的电子邮件模块和900种谷歌字体，可以快速的设计出符合各行业需求的营销邮件模板。
Postcards支持团队协作，团队成员之间可以相互合作管理不同的版本，并将结果导入到流行的电子邮件服务提供商中。
Postcards价格比较实惠，可以免费使用，付费版本最低17美元/月。
BEE是一个免费的电子邮件设计软件，可以让你创建简单的电子邮件模板，然后将其导出到你最喜欢的电子邮件服务提供商中。
你不需要任何编码技巧，就可以在几分钟内创建一个响应式的电子邮件模板，还提供了一种在Gmail中发送HTML邮件的简单方法。
BEE的电子邮件模板库配备了各种专业设计的模板供你定制，你可以在其中添加网络特定元素，如表格、视频和脚本，或者嵌入你自己的调查工具创建有个性化外观的邮件。
通过BEE专业设计好的模板，可以在一个包含HTML和图片的ZIP文件中导出，并在自己的电子邮件营销软件中使用它。
付费的高级专业版本，还可以获得更多复杂的模板，和直接与电子邮件营销软件连接的插件，如MailChimp、SendGrid、HubSpot等等。
价格方面，注册完就可以免费使用，自由职业者需要付费15美元/月，团队版本需要30美元/月。
Stripo是一个免费的电子邮件模板生成器，无需HTML或CSS经验就能轻松使用，拥有丰富的模板，可以在几分钟内就可以制作出高级的电子邮件模板。
Stripo具有拖放和HTML编辑模式，可以在编辑器内建立互动的电子邮件元素，如图片翻转效果、CSS动画按钮和倒计时器等功能，还提供了一个嵌入式的照片编辑器，用于建立电子邮件横幅。
该服务是多语言的，所以可以从英语改成他们的其他7种语言选择（德语、西班牙语、法语等）。
Stripo为其用户提供了一个内容模块库，用于存储最常用的电子邮件元素和组件，有超过600多个免费的HTML电子邮件模板，还可以按类型、电子商务、行业或季节进行分类，帮助用户快速找到适合自己的edm邮件模板。
通过API，Stripo的电子邮件模板可以导出到60多个电子邮件服务商，你也可以将模板设计导出为HTML，并使用它从你选择的任何其他电子邮件营销工具发送你的电子邮件活动。
在向收件人发送电子邮件之前，你可以将其下载为PDF格式，以获得客户或同事的认可；有大约100种不同的测试环境，让其在嵌入的电子邮件测试工具中测试电子邮件。
Stripo可以免费使用，付费商业版本最低价格为12.50美元/月。
Mailchimp是世界上最著名的电子邮件营销自动化平台，由Ben Chestnut、Mark Armstrong和Dan Kurzius于2001年创立，从事邮件营销的工作人员大概都听说过或者用过，这是一款非常出名的外贸邮件群发软件。
Mailchimp主要针对中小型企业，是一个强大的一体化外贸邮件营销平台，不仅拖放式电子邮件生成器，还提供了一个由100多个现成设计组成的庞大的电子邮件模板库。
你可以选择一个预先编码的电子邮件模板，或者从头开始创建一个电子邮件模板，虽然它在元素和区块方面不是很灵活，但Mailchimp允许用户创建漂亮的响应式邮件。
它的新模板生成器让你可以直接在内容块上编辑你的元素。此外，它的内容工作区间对编辑和管理你的图片和文件特别有帮助。
作为一个edm邮件营销工具，Mailchimp还为用户提供了一些额外的功能，如自动化，以便及时地开展edm邮件群发活动，还有针对不同电子邮件客户端设计的测试工具。
Mailchimp可以免费使用，付费功能每月15美元起。
作为免费的海外邮件群发工具，Moosend使你能够创建、自动化和发送你的电子邮件营销活动。
对于精通技术的用户来说，你可以在编辑电子邮箱模板时，查看并复制HTML代码，或者通过Moosend的代码视图下载一个JSON文件。
Moosend有一个现成的模板库，你可以选择已有的edm营销邮件模板开始设计，或者通过拖放栏目和结构元素从头设计一个视觉上令人惊叹的电子邮件。
如果你需要一个快速的视觉效果，Moosend提供了一个与图片库、社交媒体平台、Google Drive等整合的图片采集器。
Moosend有一个有用的 "保存 "功能，你可以用它来保存你编辑过的电子邮件模板，以供将来使用，还可以添加倒计时功能，个性化你的电子邮件，以及添加条件块来创建动态内容活动。
Moosend可以免费使用，专业版每月10美元起，企业版可以和销售人员自定义价格。
http://TOPOL.io被描述为 "为每个设备创建漂亮的电子邮件拖放编辑器”。
Topol使用拖放功能创建电子邮件html模板，用户不必是图形设计师、HTML程序员或电子邮件渲染方面的专家，你可以快速、简单、直观、有趣的创建电子邮件模板。
你可以将Topol编辑器整合到你自己的应用程序、CRM（客户关系管理）或任何其他营销平台，甚至是Outlook上
Topol有150多个精美的、易于使用的模板，可重复使用的自定义块和自定义HTML代码，而且创建的模板可以下载为.zip文件，或导出到任何现有的Topol账户。
Topol可以在14天内免费试用，如果想要使用付费专业版，可以按每月10美元的价格升级到他们的月度会员计划。
Unlayer Studio是一个免费的电子邮件模板制作工具，具有简单、易掌握的特点，有很多现代的、专业的电子邮件模板可供选择。
它有一个免费的图片库和现成的模板，可以创建具有相关内容的电子邮件，用户可以从100多个基础套件模板中选择任何一个，然后按自己认为合适的方式编辑模板。
Unlayer提供了一个模板管理器，你能够用一个独特的ID来创建和编辑你的模板。另外，你也可以在自己的服务器上保存模板，只需切换到JSON标签，然后保存到你的数据库即可。
只需点击几下就可以下载你创建HTML模板，不需要编码技能就可以创建自定义模板，可以按照各种邮件主题轻松找到需要编辑的电子邮件模板。
Unlayer studio的设计师会与ActiveCampaign、Constant contact、MailChimp等电子邮件服务提供商合作，如果你想将其与Gmail整合，该软件还能让你安装免费的Chrome扩展。
Mosaico是一个开源的电子邮件模板html构建器，可以帮助用户快速有效地创建电子邮件通讯。
Mosaico在其平台上不提供任何预先设计的电子邮件模板，但你能够以你认为合适的方式来使用它，提供两种布局：versafix-1和versafluid。
通过这种独特的基于点击的设计布局，你可以添加或删除区块，非常的灵活，还可以按原样导出自己的图片，并编辑邮件内容。
你可以预览你的邮件，发送测试邮件或简单地保存你的模板，虽然是个免费工具，同样提供相应的社区技术支持。
以上就是一些常用的在线拖放式电子邮件编辑器，可以帮助你更加快速的定制自己的专属电子邮件模板。
这些电子邮件构建器有高质量的响应式电子邮件模板、对各种设备有良好的兼容性、有精美的图片和媒体库，和一些电子邮件服务商也可以完美的兼容。
如果你是一个完全的电子邮件营销新手，而且不懂HTML代码，也不用担心，这些工具可以很好的帮助你完成想要的各种效果，使你的电子邮件营销效果更加完美。
*请认真填写需求信息，我们会在24小时内与您取得联系。
