Hostinger Reach 邮件模板手动编辑教程
Hostinger Reach 中的编辑模式（Edit Mode）是一个可视化编辑器，用于手动修改邮件模板：点击任意文本、按钮或图片区块，即可编辑其内容、样式和布局。编辑模式还允许你插入新的板块（Section），并设置整份模板的全局样式，而无需使用 AI 重新生成设计。
如果你只想修改模板的某一部分而不重新生成整个设计，可以在聊天中使用针对特定板块的 AI 编辑功能。点击 Build with AI（使用 AI 构建），在提示窗口中选择 Edit section with AI（使用 AI 编辑板块）图标，然后在预览中选择你要更新的板块。接着，描述你希望 AI 所做的更改。模板的其余部分将保持不变。
何时使用编辑模式
在以下情况下使用编辑模式：
- 你已经拥有一个由 AI 生成的模板。
- 你想做一些小的修改（例如更新文本、链接或格式）。
- 你更喜欢使用可视化编辑器，而不是继续在 AI 聊天中操作。
进入编辑模式
要开始编辑你的 AI 生成邮件模板：
- 在 AI 聊天模式下，点击左上角的 Edit（编辑）按钮。
- 选择编辑模式后，点击模板中你想要编辑的任意元素——例如文本区块、按钮或图片。
这将打开该元素的编辑工具栏，你可以在其中自定义其内容和外观。
模板侧边栏中的编辑控件
当你在编辑模式中点击某个区块时，侧边栏会显示该区块类型的编辑选项。控件按如下方式组织：
• 文本区块：字体、大小、颜色、对齐方式、内边距和布局选项。 • 按钮区块：文本、背景颜色、圆角、内边距、宽度、高度和对齐方式。 • 图片区块：更换图片、添加链接、调整大小、圆角、外边距和图片填充选项。
控件按类别分组，并显示在可折叠的区域中。不常用的选项默认处于折叠状态——点击区域标题即可展开。这样可以让侧边栏专注于每种区块类型最相关的设置。
除了编辑单个区块之外，你还可以在一个面板中设置应用于整个模板的样式。在侧边栏中打开 Template styles（模板样式），即可实时预览标题、正文文本和按钮样式，并调整：
- 字体——标题与正文文本及按钮可分别使用不同的字体系列
- 颜色——模板背景、文本、按钮颜色、按钮文字、链接颜色和按钮边框
- 按钮边框宽度（px）
- 按钮圆角
该面板打开时已预先填充了模板当前使用的样式，因此你是在真实起点的基础上进行调整，而不是从零开始。这让你能够更快地为模板更换整体外观以匹配你的品牌，因为你不再需要逐个更新每个板块和元素。
所有区块类型都遵循一致的布局：主要内容选项在顶部，布局/间距选项在下方。
编辑文本区块
当你选中一个文本区块时，会看到多个自定义选项。你可以：
- 点击整个文本区块，对其整体应用更改，或者
- 用鼠标高亮选中特定文本，仅编辑所选部分。
可用的文本工具
- 字体——从经过优化的字体中进行选择，这些字体专为在不同邮件服务商之间保持一致显示而设计。
- 字体大小——调整文本大小，以适应你的设计和布局。
- 格式——应用粗体、斜体或下划线样式。
- 对齐方式——将文本左对齐、居中或右对齐。
- 列表——将文本格式化为项目符号列表、编号列表或短横线列表。
- 表情符号——在文本中插入表情符号。
颜色和背景
- 文本颜色——更改文本的颜色。
- 背景颜色——添加或修改文本背后的背景颜色。 这两种颜色更改都可以应用于整个文本区块或仅应用于选中的文本。
添加链接
你可以将任何一段文本变成可点击的超链接：
- 选中你想要添加链接的文本。
- 点击 Add link（添加链接） 并输入你的 URL。
默认情况下，链接会显示下划线以提示可点击——但如果你想要不同的外观，也可以调整其样式。
个性化
你可以通过插入收件人的特定信息（如名字、姓氏或电子邮箱）来让你的邮件更具个性化。 当你发送营销活动时，每个联系人都会自动看到属于自己的个性化信息。
欲详细了解个性化功能的运作方式，请参阅 Hostinger Reach：个性化你的邮件模板。
文本区块的布局选项
你可以使用以下布局设置来调整每个文本区块的整体结构和间距：
- 宽度和高度——控制文本区域的形状和位置。
- 内边距——在区块内为文本添加或减少周围空间。
- 圆角——使文本区块的边缘变圆，在应用了背景颜色时尤其明显。
这些选项可帮助你对齐内容，并创建间距均衡、视觉美观的布局。
编辑按钮
在编辑模式中，邮件模板中的按钮可以完全自定义，以匹配你的品牌和设计。
当你点击一个按钮时，你可以：
- 编辑按钮文字——直接在按钮中输入文字，或使用文本编辑器工具栏应用基本格式（粗体、斜体、下划线、对齐方式）。
- 更改按钮颜色——在 Colors（颜色） 部分下，调整背景颜色和边框颜色以匹配你的营销活动风格。颜色更改会立即生效，因此你可以实时预览你的设计。
- 调整布局和大小——在 Layout（布局） 部分下，自定义按钮的：
- 圆角——定义按钮边缘的圆润或方正程度。数值越高，按钮越圆。
- 内边距——控制按钮文字周围的空间大小。
- 边框宽度——以像素为单位设置按钮边框的粗细。
- 文字和外边距——控制按钮本身的间距。
- 宽度和高度——设置按钮的尺寸，以适应你的邮件布局。
- 水平对齐——在邮件布局中定位按钮（左、居中、右）。更改对齐方式会更新按钮在邮件模板中的位置。
编辑图片
邮件模板中的图片也可以在编辑模式中直接自定义。当你点击一张图片时，会出现三个主要编辑选项：Change Image（更换图片）、Add Link（添加链接） 和 Layout（布局）。
更换图片
点击 Change Image（更换图片） 可替换或更新模板中的图片。你有以下几种选择：
- 生成图片——描述你想要的图片，AI 会为你生成。你可以选择性地选择风格（写实、插画、扁平设计、3D 渲染、极简）、布局（横幅、横向、纵向、方形），并附加参考图片。每次生成会返回 4 个变体供你挑选。
- 上传你自己的图片——从你的设备中选择文件。
- 从已上传的图片中选择——挑选你之前在营销活动中使用过的图片。
- 免费图片——通过输入相关关键词搜索免版税照片。
- 链接图片——粘贴公开的图片 URL，直接从网络加载图片。
链接的图片必须可公开访问。通常你可以右键点击图片并选择**复制图片地址（Copy Image Address）**来获取图片链接。
选定图片后，它会自动显示在你的模板中。你生成的图片也会保存到你的图片库的 Generated（已生成）分类下，方便你以后重复使用，无需重新生成。
添加链接
使用 Add Link（添加链接） 可以将图片变成可点击的元素。当收件人在邮件中点击图片时，他们将被重定向到你指定的链接（例如你的网站或产品页面）。
布局选项
在 Layout（布局） 下，你可以微调图片在邮件中的显示效果：
- 用鼠标调整大小——点击图片，然后从四条边中的任意一条拖动以调整其大小。
- 宽度和高度——调整图片的大小和比例。
- 圆角——使图片边缘变圆。
- 外边距——在图片周围添加空白空间。
- 水平对齐——对齐图片（左、居中、右）。
- 垂直对齐——对齐图片（顶部、中部、底部）。
- 图片填充——选择图片填充指定区域的方式：
- Contain（包含）——使整张图片完整显示在区域内；可能会留出空白。
- Cover（覆盖）——缩放并裁剪图片以填满整个区域。
- Fill（填充）——拉伸图片以占据全部空间（可能会略有变形）。
- None（无）——按原始大小显示图片，不进行缩放或裁剪。
这些设置可帮助你在视觉吸引力与不同设备上的布局一致性之间达到完美平衡。
插入新板块功能
编辑模式中的一项强大功能是 Insert Section（插入板块）。
当你将鼠标悬停在邮件现有板块之间时，会出现加号（+）图标。点击 + 即可通过两种方式添加新板块：
使用 AI 添加板块
- 输入简短的提示，例如“添加一条客户评价”、“插入一个产品网格”或“创建一个项目符号列表”。
- AI 会即时生成一个与你的品牌风格和设计相符的板块，使你的模板保持专业和统一。
添加预构建板块
手动插入现成的元素，包括：
- 文本——点击文本区块可在侧边栏中打开其设置：
- 字体、字体大小、格式（粗体、斜体、下划线）和对齐方式。
- 列表样式（项目符号、编号或短横线）和表情符号插入。
- 文本颜色和背景颜色，可应用于整个文本区块或仅选中的文本。
- 添加链接，将选中的文本变成可点击的超链接。
- 个性化，插入收件人的详细信息，如名字、姓氏或电子邮箱。
- 布局：宽度、高度、内边距和圆角。外边距可使用 Small（小）、Medium（中）或 Large（大）预设，也可以按每条边单独设置——当 Apply to all sides（应用于所有边）开启时，左右边距与上下边距保持同步；关闭后即可独立设置四条边。
- 按钮——点击按钮可在侧边栏中打开其设置：
- 按钮文字，可直接编辑，也可使用基本格式（粗体、斜体、下划线、对齐方式）。
- 颜色：文字颜色、背景颜色和边框颜色。
- 样式：内边距、边框宽度（px）和圆角。
- 添加链接，用于设置按钮指向的位置。
- 布局：宽度、高度、水平对齐和外边距——当 Apply to all sides（应用于所有边）开启时，左右边距与上下边距保持同步；关闭后即可独立设置四条边。
- 图片——点击图片可在侧边栏中打开其设置：
- 更换图片：使用 AI 生成图片（可选择风格、布局和参考图片，返回 4 个变体）、上传自己的图片、从之前上传的图片中选择、搜索免费图片或链接公开图片 URL。
- 图片填充：Contain、Cover、Fill 或 None。
- 添加链接，使图片可点击。
- 对齐方式：水平和垂直。
- 样式：圆角。
- 布局：宽度、高度和外边距——当 Apply to all sides（应用于所有边）开启时，左右边距与上下边距保持同步；关闭后即可独立设置四条边。也可以直接在模板中拖动图片的角点或边缘控制柄来调整图片大小。
- 视频——点击视频可在侧边栏中打开其设置：
- 视频链接：粘贴 YouTube 或 Vimeo 链接以添加或替换视频。更改链接也会替换缩略图。
- 对齐方式：水平和垂直。
- 颜色：背景颜色和边框颜色。
- 样式：边框宽度（px）和圆角。
- 布局：宽度、高度和外边距——当 Apply to all sides（应用于所有边）开启时，左右边距与上下边距保持同步；关闭后即可独立设置四条边。
- 标题（3 种标题版本）——标题使用与文本区块相同的侧边栏控件（字体、格式、对齐、颜色、个性化、布局），3 种版本分别使用不同的默认大小和字重。
- 间隔（Spacer）（小、中、大）——在板块之间添加垂直空白空间。插入时选择尺寸；间隔元素没有其他侧边栏设置。
- 分割线（Divider）——分割线元素支持颜色、粗细和间距设置。点击模板中的分割线即可在侧边栏中打开这些设置：
- 线条颜色：使用十六进制值设置分割线的颜色。
- 粗细：选择 1、2、4 或 8 像素。
- 间距：选择 Small（小）、Medium（中）或 Large（大）预设，或选择自定义选项来单独设置上、下、左、右的值。当 Apply to all sides（应用于所有边）开启时，左右间距与上下间距保持同步；关闭后即可独立设置四条边。
- 布局（Layout）——添加列行或预定义布局。Add section（添加板块） 窗口中的 Layout（布局）类别包含六个选项：
- 2 列和 3 列——添加一个包含两列或三列的空行。
- 图文组合——在文字旁边添加图片。
- 两列图文——添加两列，每列包含一张图片和文字。
- 文本加 3 张图片——在三张图片组成的一行上方添加文本区块。
- 三列图文——添加三列，每列包含一张图片和文字。
插入 2 列或 3 列布局后，点击列内的加号（+）图标并选择你要添加的元素。多列布局在移动设备屏幕上会垂直堆叠。
我们建议使用 AI Insert Section（AI 插入板块）选项，以更快地创建符合品牌风格的设计。
编辑模式的更多功能
删除 / 复制 / 重新排序板块
点击任意板块即可看到以下选项：
撤销 / 重做
使用撤销（Undo） 和重做（Redo） 小箭头来撤销或重新应用你最近的更改。
保存更改
编辑完成后，请务必点击 Save Changes（保存更改）。 在发送测试邮件、返回 AI 聊天继续使用 AI 编辑或继续创建营销活动之前，必须先保存。
版本历史
回到 AI 聊天界面，你可以使用 Version history（版本历史） 按钮来还原你的更改，包括手动保存的更改和 AI 所做的更改。
一旦你在编辑模式中保存了更改，你的 Hostinger Reach 邮件模板就可以进行测试、使用 AI 进一步优化，或用于营销活动。