百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

如何制作图文并茂的HTML邮件,做好EDM营销

myzbx 2024-12-02 22:46 17 浏览


有时在我们的收件箱里面,经常会收到很多精美的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需要小伙伴在下面好好去尝试下。

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台

#python##服务器##API##编程##学习#不是所有教程都值得你花时间!这篇实战指南将用5分钟带你解锁Django核心技能,手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

这款Bootstrap半越狱工具终于更新,离上一次更新已相隔很久,现在推出1.2.9版本,主要为内置两点功能进行更新,也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的,建议你更新。注意!...

iOS 16.x Bootstrap 1.2.3 发布,支持运行清理工具

本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的,想体验半越狱的果粉,请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统,适用于ERP、OA系统

今日推荐:SpringBoot整合工作流引擎Acticiti的源码推荐理由:1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南

在SpringCloud中自定义Bootstrap配置需要以下步骤,以确保在应用启动的早期阶段加载自定义配置:1.添加依赖(针对新版本SpringCloud)从SpringCloud2020...

Python使用Dash开发网页应用(三)(python网页开发教程)

PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容,例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用,很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能

OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中,AIPositronAssistant得到了增强,包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

一、结论写在前面论文提出了Mini-Gemini,一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围,发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战

01微服务与分布式什么是分布式?首先,我们对上图提到的部分关键词进行讲解。单体,是指一个进程完成全部的后端处理;水平拆分,是同一个后端多环境部署,他们都处理相同的内容,使用反向代理来均衡负载,这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真

手动挡,也称手动变速器,英文全称为Manualtransmission,简称MT,即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置,改变传动比,从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解

YOLOv5是GlennJocher等人研发,它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型,其参数量依次上升,当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享

今天,给大家介绍50个非常实用的快捷键命令大全,大家伙都是设计师,关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键:正常(Shift+Option+N),正片叠底(Shif...

Pohtoshop中深藏不露的小技巧(科目一考试技巧记忆口诀看完必过)

邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧,可以帮助到大家在设计时减少不必要的麻烦,提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美,可以...

Ganglia监控安装总结(监控安装工作总结)

一、ganglia简介:Ganglia是一个跨平台可扩展的,高性能计算系统下的分布式监控系统,如集群和网格。它是基于分层设计,它使用广泛的技术,如XML数据代表,便携数据传输,RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

AdobeXD的美化栏具有将设计视图美化的功能,它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...