Mail Studio官方版

Mail Studio简介

Mail Studio可以帮助用户在电脑上设计互动回复邮件，方便用户直接在网页上使用邮件，在应用程序中附加邮件，在媒体软件中使用邮件。软件提供了很多设计内容，可以自定义邮件页面的内容，使用组件快速设计页面布局，添加各种交互方案，编辑主题，编辑元素，添加新元素，编辑CSS和HTML。Mail Studio您可以设计各种类型的电子邮件，也可以为outlook设计交互式电子邮件，为创建响应性电子邮件设计提供了许多工具和组件！

Mail Studio软件功能

Mail Studio可以帮助你设计出随处可见、反应灵敏的漂亮邮件。这些是它能做什么的一些亮点。

一、设计

1.视觉编辑

拖放，直观地建立美丽的电子邮件。通过易于使用的用户界面为桌面和移动设备设计，并使Mail Studio处理所有代码和跨设备兼容性。

2.组件库

该应用程序附带了丰富的组件库，从标题和段落到动态组件(如Navbars和手风琴)。你甚至可以自己创造。

3.漂亮的模板

开始使用我们的回复邮件模板。它们看起来很棒，可以在任何地方工作。它还支持创建自己的模板。

4.响应迅速且兼容

您在Mail Studio中创建的设计兼容从iOS Mail到Outlook 2007的所有内容。默认情况下，它们也可以响应和适应任何屏幕尺寸。

5.电子邮件预览

通过电子邮件发送设计，您可以在真实设备上快速预览设计或与团队共享。

6.矢量图标

从大量易于自定义的SVG图标中进行选择。导出时，它们可以自动转换为巴布亚新几内亚，以获得更大的兼容性。

4.网络字体

Mail Studio的谷歌字体集成为你提供了1000多个系列，可以为你的邮件设计增添趣味。如果这还不够，还可以导入自定义字体。

第二，扩张

1.高级CSS编辑器

如果你喜欢写代码，那么你会喜欢Mail Studio的CSS编辑器。您将获得自动完成功能，支持CSS变量(自定义道具)和媒体查询。

2.s支持

该应用程序具有内置的S支持，因此您只需编写代码并使其自动编译，无需任何设置。

3.写HTML

如有必要，可以无限制地将设计的某些部分编辑成HTML代码。

4.命令面板

Mail Studio的命令面板为您提供了一个键盘友好的方法，您几乎可以在应用程序中做任何事情，从导航项目到使用类似emmet的语法插入组件。

5.外部编辑

您可以链接Visual Studio代码、升华文本、IntelliJ、Vim和其他编辑器，并将您的代码与Mail Studio同步。

6.快捷键

应用程序支持大量的键盘快捷键，让你可以做更多的事情，少碰鼠标。

三.合作

1.云存储

您可以从本地硬盘保存和打开设计，并完全脱机工作。如果你愿意，你也可以将设计存储在云中，对其进行安全备份，并提供给整个团队。

2.自定义模板

将电子邮件设计转换为“新建设计”对话框中可用的模板，您的团队可以访问这些模板。

3.团队组成

与您的团队共享常用的设计，并一起构建UI组件库。

4.ESP集成

连接Mail Studio到MailChimp、活动监视器和Sendgd等电子邮件服务提供商，每次保存时自动上传您的设计。

Mail Studio软件特色

Mail Studio窗口分为几个功能区:

1.调色板–它由工作室和团队选项卡组成。包含您可以拖放到舞台(6)和总览(2)上的所有可用组件。

2.概览面板–它使您能够快速浏览页面上的所有组件。此处的组件可以拖动和重新排序。

3.编辑器面板-包含HTML和样式标签。您可以单击展开它，并将其分成单独的窗口。

4.设计面板-保存设计的所有页面，CSS，S文件和图像。双击时，页面将在舞台(6)和其他资源上打开——在编辑器面板(3)中。

5.外观面板-显示选定组件的选项，并为您提供简单的可视化自定义控件。

6.舞台-这是你看到的页面预览，拖放组件和编辑文本。

Mail Studio使用说明

1.打开MailStudio1.0.0.exe直接安装，等待安装结束。

2.提示软件的设计界面，以及可以打开的引导内容。

3.你可以通过阅读教程来学习如何设计新的电子邮件。

4.您可以单击教程和指南查看教程，单击视频课程查看教程。

Mail Studio教程

布局表格

布局表是一个可以替代响应网格的组件。它仍然由行和列组成，但是没有响应。列总是彼此相邻，并且从不在它们之间流动。如果不小心，小屏幕上可能会显示一个水平移动条。

#基本

从“组件”面板中选择“布局表格”，并将其放在页面上。它可以放在任何组件中。请记住，它的布局表不会缩小。如果太宽，可能会导致小设备上出现水平移动条。

您可以从工具栏向表格中添加其他行和列:

您可以通过“合并”相邻的单元格来实现更复杂的网格。为此，右键单击表格单元格并选择选项...

您可以在这里设置wspan和colspan属，它们决定了单元格将占据的位置。请记住，如果增加colspan中一个单元格的，则需要删除该行中的另一个单元格，以便所有行都包含相同的数字。同样，如果wspan增加，您需要从上面或下面的行中删除一个单元格。

#什么时候用？

当你需要精确的列宽，并且整个表格的总宽度不超过320像素时，布局非常有用，所以它总是适合屏幕显示。

如果需要比这更大的表格，Layout Table只能在桌面上显示，在带有“条件可见”选项的小设备上隐藏，并在其位置显示移动设备的优化版本。

#与表格的差异

如果布局表格在HTML标签中浏览这个组件的标签，你会看到它基本上是一个普通的表格。与表格组件的主要区别在于布局表格设置了le = & # 8221演示& # 8221；Genus，向屏幕阅读器指示该表仅用于布局目的，其内容不应逐单元读取。

编辑CSS

Mail Studio通过使用“外观”面板和组件选项，它为您提供了一种完全可视化的电子邮件设计方法。但是，如果需要额外的控制和自定义，可以直接在编辑器面板中编写CSS代码。

任何使用浏览器开发工具的人都会熟悉Mail Studio内置的CSS编辑器。您可以在“样式”选项卡或在“设计”面板中创建的CSS文件中编辑CSS代码。

#样式标签

样式是“样式编辑器”面板中两个未闭合的选项卡之一。它为您提供了设计中与当前选定组件匹配的CSS块列表。这是找出哪些CSS块影响所有文件中的组件和应用程序生成的代码的一种方便的方法。

请注意，应用程序生成的样式(标记为“框架”)已被锁定，用户无法编辑。您可以通过单击块的三点菜单并将其复制到您自己的样式表中来覆盖它们。

# #CSS文件

创建一个新的CSS文件很容易。只需右键单击“样式”选项卡，然后选择新建>:CSS文件菜单

要导入现有的CSS文件，只需将其拖放到应用程序窗口中。它将被解析并添加到您的设计中。

您可以根据需要创建/导入任意多的文件，并将它们组织到文件夹中，以便于管理。

# #CSS文件顺序

使用多个CSS文件时，迟早会遇到需要控制文件优先级的情况。要更改CSS文件的应用程序顺序，请右键单击“样式”组，然后选择“包括顺序”。

您可以根据需要在此处对文件重新排序，然后单击“保存”按钮。这些更改将应用于设计中的所有页面。

笔记

虽然它没有显示在对话框中，但是应用程序生成的框架css文件总是包含在页面的样式表前面。

#可见性

右键单击CSS文件时，可以使用几个选项来控制其可见性。

启用/禁用-使用此选项，您可以禁用样式表，使其不适用于您的任何页面。

可见-这将打开一个对话框，您可以在其中选择样式表应该添加到设计的哪些页面。

#链接外部CSS

可以在Mail Studio中链接外部管理的样式表。只需右键单击样式组并选择链接外部CSS。在对话框中，您可以将L粘贴到外部管理的样式表中，并将其添加到您的设计中。导出时，如果您已经启用了Pcess CSS选项，Mail Studio将获得远程CSS代码和行中它旁边的CSS文件的其余部分。

#编辑CSS

双击一个CSS文件，它将在我们的CSS编辑器中打开进行编辑。单击选择器、css属或值来编辑它。单击输入或制表符移动到下一个规则，然后移动到上一个Shift+制表符。您可以单击规则之间的空格来创建新规则，或者单击css块之间的空格来创建新规则或注释。

添加到“设计”面板的图像和字体将被自动提取，并在适当的时候显示为建议。有完整的撤销/重做历史，请随时尝试！

#选项菜单

当您单击每个CSS块右上角的三个点时，您将看到一个带有选项的菜单。您具有复制、移动和删除的基本功能，以及添加媒体查询和启用/禁用块的选项。

#多项选择

按住Ctrl/Shift(Windows/Linux)或Cmd/Shift(Mac)键的同时单击CSS区块，开始多重选择。这使您能够针对大规模应用程序快速采取行动。

#编写媒体查询

媒体查询是创建响应布局的重要工具。在Mail Studio中，媒体查询逐块分配。为此，请添加查询以从“选项”菜单中进行选择(块右上角的三个点)。

查询将根据阶段的当前宽度预先填充最小宽度或最大宽度。

给出提示

如果你发现我们的CSS编辑器过于严格，可以随时切换到写S代码。

# #CSS变量

Mail Studio使用CSS自定义亏格(在新窗口中打开)(也称为变量)。它们为您提供了一种简单的方法，可以在整个设计中重复使用特定的颜色，并从中心进行更改。我们的一些模板已经重新定义了这些颜色，以便组件面板中的所有内置组件都与模板的样式相匹配。

这是由Mail Studio定义的颜色变量的示例。当然，您可以在样式表中定义新变量和重新定义内置变量。

要使用CSS变量，只需将它们包含在颜色值中。

定义自己的自定义属或覆盖内置属非常简单。您可以通过在css文件中编写以下代码来实现这一点:

兼容性和局限性

得知电子邮件客户端本身不支持CSS变量，你不会感到惊讶。这就是为什么在导出时，一定要打开Pcess CSS选项。启用时，Mail Studio将扫描您的CSS，评估所有变量并将其重写为静态值(例如，color:var(& # 8211；pmary)；颜色:# 123456；)。

在大多数情况下，这种方法效果很好，但有一个限制。这种技术不适用于动态修改的变量(例如，在悬停选择器或媒体查询中重新定义CSS变量)。这些重新定义将是无效的，因为值声明在导出过程中被转换为静态值。