工作室概览
工作室是 MailInApp 的可视化邮件构建器。仪表盘中的每个项目都会在其中打开。
从用途开始
新项目可以从一个用途开始:调研问卷、促销、通讯简报、活动、事务性邮件、仪表盘、班级,或体育队伍,在创建项目时选择。选择一个用途会打开该主题下真实入门模板组成的轮播列表,每一个都是实际渲染的大尺寸预览,而不是效果图。逐个查看并选定一个,画布就会用普通模块搭建的入门布局进行初始化(调研问卷用评分模块,促销用主图和优惠券模块,以此类推)。之后它们和其他任何模块一样,没有任何特殊之处:可以编辑、删除或添加内容。从空白开始会跳过这一步,打开默认的空白画布。
选择器的用法参见快速入门,用途如何影响响应仪表盘参见响应与 Webhook,把自己的模板保存为私有或发布到社区图库的方法参见入门模板与你自己的模板库。
工作空间
- 画布——屏幕中央:你邮件的实时渲染效果。点击任意元素即可选中它;面包屑导航会显示从邮件正文到该元素的路径,其中每一级祖先元素都可点击。
- 左侧面板——四个面板,点击图标可依次打开:插入(模块库——把分区、文本、图片、按钮、分隔线、留白间距等布局模块,以及轮播图、投票、表单、倒计时、测验等互动模块拖到画布上;搜索框可按名称筛选全部内容)、树(邮件的完整结构——重新排列模块顺序、选中嵌套元素(例如轮播图中的某一张幻灯片)、折叠容器、用眼睛图标在不删除模块的情况下将其从输出中隐藏,或双击重命名给自己留个备注;任意容器还带有一个 + 号,可打开一个可搜索的选择器,列出它所接受的确切子元素类型——表单的选择器展开后与插入面板"输入项"分区中的输入变体完全相同——这样无需拖拽即可添加,画布上空容器的"拖放到此处"占位符处也会出现同一个选择器)、数据(数据源与合并标签——连接数据源、选择受众、浏览字段),以及主题(见下方主题设置)。
- 检查器——针对当前选中内容的右侧面板,分为四个标签页:内容(文本、链接,以及投票选项等特定模块字段)、样式(颜色、间距、边框、自定义 CSS)、逻辑(重复绑定、显示条件),以及操作(移动、复制、删除、⧉ 包裹为…——与树面板的 + 号相反的操作:把当前选中内容放入一个新建的分区、分栏、重复或能够合法容纳它的 HTML 元素中,并保持在原位,例如让一个孤立的按钮拥有自己的背景色,或把一个模块变成两栏布局——以及保存为组件,见可复用组件)。标签页上方的搜索框可同时在这四个标签页中筛选字段。
预览模式
画布上方的编辑 / 预览切换开关决定了你所看到的内容:
- 编辑——模块结构,可选中并编辑。
- 预览会针对选定的收件人行解析合并标签、显示条件与重复项,下方还有一个层级选择器:实时预览(收件人最终看到的同一个 React 页面)、已发送邮件——现代客户端与已发送邮件——Outlook 会渲染收件人收件箱将收到的实际编译后 HTML——Outlook 层级会强制走真实 Outlook 客户端所采用的同一套条件注释分支,因此无需拥有 Outlook 也能检查降级效果。深色模式开关会模拟邮件客户端的深色模式将如何渲染实时预览层级。
缩放控件(50%–150%,或适应宽度)可以缩放画布,而不会改变底层设计。
撤销、重做与自动保存
对设计所做的每一次编辑——拖动模块、在字段中输入、更改颜色——都可以用 Ctrl/Cmd+Z 撤销(重做:Shift+Ctrl/Cmd+Z 或 Ctrl/Cmd+Y),即使是在文本字段内部进行的编辑也不例外。快速连续的编辑(输入一句话、拖动滑块)会合并为一个撤销步骤,而不是每次按键都算一步。
工作室会持续自动保存——没有保存按钮,关闭标签页也不会丢失任何内容;项目重新打开时会精确停在你离开时的状态。如果你和团队成员同时打开了同一个项目,第二次保存会显示一条**"已在别处更改"提示,而不会悄悄覆盖第一次保存的内容。刷新页面即可获取最新版本,或使用保存为副本**把你的更改保留为一个新项目。
主题设置
主题面板用于设置若干项目级令牌(品牌色、强调色、文本色、弱化色与背景色,一套字体,以及按钮的默认圆角半径),这样品牌重塑只需一次编辑,不必逐个查找每个模块的颜色字段。颜色字段既可以持有一个令牌引用(在常规颜色输入框旁显示为色板选择器),也可以是它自己的字面颜色值。自带令牌引用的模块——按钮、社交图标、表单/测验的提交按钮——会在你更改令牌时自动重新着色,而你手动设置了字面颜色的模块则会保留原样。未设置主题的项目渲染效果与之前完全一致;该面板只是把品牌颜色显式化,而不再是四处复制粘贴十六进制颜色代码。
素材库
有些字段的存在纯粹是为了容纳一张图片:图片模块、视频/音频模块的封面图、轮播图幻灯片的图片、闪卡的正面/背面图片,以及商品模块的照片。这些字段在检查器中显示为缩略图和一个选择图片…按钮,而不是 URL 输入框。点击它会打开一个网格,展示你账户下已上传的全部素材(不仅限于当前项目),旁边还有一个上传新素材按钮,可上传最大 5MB 的 PNG、JPEG、WebP 或 GIF 文件。选中一张图片后会立即写入该字段,效果和手动输入 URL 一样。这个选择器纯粹是为了方便创作,不会改变模块在邮件、实时预览或画布中的渲染方式。
上传的素材会在你账户下的所有项目间共享:上传一次徽标或产品照片,就可以在选择器出现的任何地方重复使用。完整素材库也可以从仪表盘导航中的素材入口浏览,在那里你可以在不针对任何特定项目的情况下上传、查看和删除素材。删除一个素材只会将其从素材库中移除——已经引用过其 URL 的模块会继续渲染这张图片,直到你自己把它替换为别的内容。
存储空间会计入你套餐的配额(见定价),在设置中与你的其他用量一起以量表形式显示。有些字段接受的是链接而不是图片——例如幻灯片可选的点击跳转链接、视频/音频模块自身的文件 src,以及会议链接的加入 URL。这些字段仍然是普通的 URL 输入框:MailInApp 只存储图片,不存储视频/音频文件或任意网页。
可复用组件
做出了值得再次使用的东西——一个带样式的页眉、一个优惠券区块、一行商品?选中它,打开检查器的操作标签页,点击保存为组件。它会被保存到你的账户下(不仅限于当前项目),此后会出现在每个项目插入面板顶部的我的组件中。拖拽或点击即可插入一份全新、完全独立的副本;可以在同一个列表中重命名或删除已保存的组件。这与预制分区中内置的组合(见互动模块)不同:那些组合是 MailInApp 为所有人提供的,而已保存的组件属于你自己,是基于你自己的设计构建的。
实时预览
工具栏中的实时预览 ↗ 按钮会打开邮件的托管网页版本——一个基于你当前设计渲染出的完全可互动页面。它既是你自己的预览工具,也是收件人邮件客户端无法渲染互动内容时所获得的通用降级方案。该链接经过签名,有效期为 30 天;见实时预览链接。
AI 辅助文案
想不出主题行?点击发送页面主题字段旁的**✨ 建议**。MailInApp 会根据项目名称、它的用途,以及邮件现有文案的简短摘录,起草几个备选项。
建议仅支持点击填充——不会自动写入你的项目。建议请求会计入你账户的月度配额(见定价),该配额在所有项目及编辑这些项目的所有人之间共享。如果需要构建或编辑整封邮件——而不仅仅是一个字段——请见 AI 副驾。
大小预算
Gmail 会裁剪大于约 102KB 的邮件——被裁剪的邮件会丢失其 <style> 代码块,这会悄无声息地禁用所有 CSS 互动效果。工作室会在你构建邮件的过程中持续跟踪其编译后大小与此预算的对比,并在问题出现之前提醒你。更多内容见导出与发送。