> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用拖放功能设计邮件

> 使用 OneSignal 的拖放邮件生成器直观地构建响应式邮件——设置、行、内容区块、个性化和合规链接。

## 概述

OneSignal 拖放邮件生成器让您可以直观地设计响应式邮件,完全按照它们在收件人收件箱中显示的样子呈现——无需编写完整的 HTML。

您可以使用三个核心组件构建邮件:

* **设置** – 应用于整个邮件的全局样式和布局
* **行** – 控制结构和响应性的水平布局容器
* **内容** – 单个区块,如文本、图像、按钮和 HTML

以下部分将介绍每个组件以及构建邮件的推荐顺序。

<Note>
  如果您想要以下功能,请使用拖放邮件生成器:

  * 无需管理完整 HTML 即可直观地设计邮件(HTML 区块可用)
  * 跨活动重复使用行或模板
  * 允许非技术团队成员安全地编辑内容

  如果您需要完整的 HTML 控制、各处的自定义字体或高级深色模式逻辑,请改用 [HTML 编辑器](./design-emails-with-html)。
</Note>

### 推荐构建流程

按照以下顺序可获得最佳结果并减少渲染问题:

1. 在**设置**中配置全局样式
2. 使用**行**添加布局结构
3. 插入**内容**区块
4. 添加个性化和链接
5. 添加取消订阅链接(对于营销邮件)
6. 保存为模板或发送

<Check>
  完成后,您的邮件应该:

  * 宽度不超过 600px
  * 在移动和桌面端清晰呈现
  * 包含必需的合规链接
</Check>

<Warning>
  **导致渲染或可投递性问题的常见错误:**

  * **缺少取消订阅链接** — 营销邮件必须包含此链接。没有取消订阅链接,收件箱提供商更可能将您的邮件标记为垃圾邮件。
  * **邮件宽度超过 600px** — 会导致移动端出现横向滚动,并在许多客户端中破坏布局。
  * **行中的背景图像** — Outlook 和多个移动客户端无法渲染背景图像。请改用图像区块。
  * **无回退字体** — 自定义网络字体仅在少数客户端中加载。始终声明系统字体回退。
  * **图像过大** — 超过 1 MB 的邮件加载缓慢且可能被拦截。单个图像应低于 200 KB。
</Warning>

***

## 设置

设置定义了邮件的基础布局和样式。除非明确覆盖,否则这些值会级联到行和内容区块。

<Frame caption="拖放编辑器中的全局设置面板">
  <img src="https://mintcdn.com/onesignal/RBBmVfkQbMT-0tMb/images/email/email-drag-and-drop-settings.png?fit=max&auto=format&n=RBBmVfkQbMT-0tMb&q=85&s=0a857f7754c6b1031926f2e62b6dde15" alt="Global settings panel in the Drag and Drop Editor" width="2418" height="1652" data-path="images/email/email-drag-and-drop-settings.png" />
</Frame>

| 设计设置     | 描述                              |
| -------- | ------------------------------- |
| 内容区域宽度   | 邮件的宽度(像素)。**推荐:** `600px`。      |
| 内容区域对齐   | 将内容向左或居中对齐。                     |
| 背景颜色     | 内容区域后面的颜色。                      |
| 内容区域背景颜色 | 内容区域内的颜色。                       |
| 默认字体     | 应用于所有文本,除非被覆盖。自定义字体需要 HTML。     |
| 链接颜色     | 所有链接的默认颜色。                      |
| 语言       | 设置 HTML `lang` 属性以提高可访问性。默认为英语。 |

<Note>
  **推荐默认值:** 在设置中配置尽可能多的样式,以确保一致性并减少每个区块的覆盖。
</Note>

***

## 行

行定义邮件的水平布局。每行可以包含一个或多个列,每列可以包含内容区块。

将行拖放到编辑器中以构建您的结构。

<Frame caption="添加行来构建邮件结构">
  <img src="https://mintcdn.com/onesignal/RBBmVfkQbMT-0tMb/images/email/email-drag-and-drop-rows.png?fit=max&auto=format&n=RBBmVfkQbMT-0tMb&q=85&s=77120964b859903fc5b9b14ae94f1c44" alt="Adding rows to structure an email" width="2418" height="1652" data-path="images/email/email-drag-and-drop-rows.png" />
</Frame>

<Note>
  使用行来控制布局和间距。避免依赖单个内容区块进行主要布局决策。
</Note>

### 保存的行

保存的行让您可以跨邮件和模板重复使用页眉、页脚或重复部分。

点击行上的**保存图标**来保存它。

<Frame caption="保存行以供重用">
  <img src="https://mintcdn.com/onesignal/Xl2NHJvxakrK4JbL/images/docs/f4244e8-save-row.png?fit=max&auto=format&n=Xl2NHJvxakrK4JbL&q=85&s=d08bbd071e599b38cceb57a093db8837" alt="Saving a row for reuse" width="1056" height="650" data-path="images/docs/f4244e8-save-row.png" />
</Frame>

从**行 > 保存的行**访问保存的行。

<Frame caption="选择保存的行">
  <img src="https://mintcdn.com/onesignal/4HyuQPBpu-4xjmQC/images/docs/cc85e4fe9192d6917cf8b6e7be2ee3c13473d77cc7719d4bc4e14c26f40e00f8-image.png?fit=max&auto=format&n=4HyuQPBpu-4xjmQC&q=85&s=534a234a40e10750ae07706628f9fecd" alt="Selecting a saved row" width="419" height="705" data-path="images/docs/cc85e4fe9192d6917cf8b6e7be2ee3c13473d77cc7719d4bc4e14c26f40e00f8-image.png" />
</Frame>

保存的行类别:

* **空白** – 空白行模板
* **我保存的行** – 您或您的团队创建的行
* **示例行** – OneSignal 示例

### 行属性

点击行的外边缘来编辑行级设置。

<Note> 如果您在悬停时看到**内容**而不是**行**,说明您选择了内容区块。点击外容器边缘,直到标签显示**行**。 </Note>

| 行属性   | 描述                                  |
| ----- | ----------------------------------- |
| 背景    | 行后面的颜色或图像。**推荐:** 在设置中设置背景颜色以保持一致性。 |
| 边框    | 边框颜色、宽度和样式。                         |
| 布局    | 在移动或桌面端显示或隐藏行。                      |
| 列     | 添加、删除或调整列大小并调整列内边距。                 |
| 删除/复制 | 选择行并使用**删除**或**复制**图标来移除或复制它。       |

<Warning> 避免在行中使用背景图像。邮件客户端支持不一致。如果行仅包含图像,请改用**图像区块**。 </Warning>

***

## 内容

内容区块是收件人看到的实际元素——文本、图像、按钮、分隔符和 HTML。

将内容区块拖到行列中。它会自动适应列宽。

<Frame caption="可用的内容区块">
  <img src="https://mintcdn.com/onesignal/RBBmVfkQbMT-0tMb/images/email/email-drag-and-drop-content.png?fit=max&auto=format&n=RBBmVfkQbMT-0tMb&q=85&s=c4a31c6aa103e112e90519cf6cc0956a" alt="Available content blocks" width="2418" height="1660" data-path="images/email/email-drag-and-drop-content.png" />
</Frame>

<Info>
  **内容区块决策规则:**

  * 使用**文本区块**处理大部分文本。
  * 使用**图像区块**处理视觉元素或自定义字体。
  * 仅在需要高级样式或行为时使用**HTML 区块**。
</Info>

### 自定义字体

拖放编辑器默认支持系统字体。要使用自定义字体,必须使用 HTML 区块。

```html HTML block theme={null}
<!-- Place this into a HTML block at the top of your email -->
<style type="text/css">
  /* Declare Bebas Neue (only loads in clients that support web fonts) */
  @font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/bebasneue/v9/JTUSjIg69CK48gW7PXoo9Wlhzg.ttf') format('truetype');
  }
</style>

<h1 style="font-family:'Bebas Neue', Arial, Helvetica, sans-serif;
           font-size:36px; line-height:1.2; margin:0; text-transform:uppercase;">
  欢迎！
</h1>
<p style="font-family:Arial, Helvetica, sans-serif; font-size:16px; margin:12px 0 0;">
  感谢您的订阅。
</p>
```

<Warning>
  许多邮件客户端(包括 Gmail 和 Windows 版 Outlook)不加载网络字体。正文文本使用系统字体,仅标题使用自定义字体。始终包含回退字体,或使用图像来保证字体效果。
</Warning>

### 图像和视频

您可以将图像直接上传到 OneSignal 仪表板,让您的团队可以重复使用。编辑器支持裁剪、过滤和其他效果。您也可以通过 URL 引用外部托管的图像和视频——确保每个 URL 可公开访问。

#### 邮件推荐图像尺寸

<AccordionGroup>
  <Accordion title="宽高比">
    * 页眉/横幅图像: `3:1` 或 `4:1` (例如 `600×200` 或 `600×150`)
    * 主图像: `16:9` 或 `2:1` (例如 `600×338` 或 `600×300`)
    * 方形图像: `1:1` (例如 `300×300`) — 适用于产品网格
    * 缩略图: `1:1` 或 `4:3`
    * 最大宽度: `600–700px` 是标准(大多数邮件客户端)
    * 为视网膜显示设计 `2x` (例如 `1200px` 宽,显示为 `600px`)
  </Accordion>

  <Accordion title="文件大小">
    * 保持单个图像在 `100–200 KB` 以下
    * 总邮件大小(包括图像)在 `1 MB` 以下
    * 图像越小,加载速度越快,可投递性越好
  </Accordion>

  <Accordion title="文件格式">
    * **JPG** — 最适合照片
    * **PNG** — 最适合图形、标志和带透明度的图像
    * **GIF** — 用于简单动画(保持文件大小小)
    * **WebP** — 在邮件中尚未广泛支持；避免使用
  </Accordion>

  <Accordion title="一般技巧">
    * 始终包含 alt 文本以提高可访问性,以及在图像无法加载时使用
    * 使用内联 CSS 进行样式设置(许多客户端会剥离 `<style>` 标签)
    * 避免背景图像(客户端支持不一致)
    * 跨客户端测试 — Gmail、Outlook 和 Apple Mail 的渲染方式各不相同
    * Outlook 经常忽略图像尺寸,因此在 HTML 中设置 `width` 和 `height` 属性
  </Accordion>
</AccordionGroup>

### 链接

OneSignal 默认启用链接跟踪并支持多链接跟踪。

<Columns cols={2}>
  <Card title="链接" icon="link" href="./links#email">
    配置邮件的链接跟踪、多链接跟踪和点击分析。
  </Card>

  <Card title="深度链接" icon="arrow-up-right-from-square" href="./deep-linking">
    通过邮件链接将收件人路由到应用中的特定页面。
  </Card>
</Columns>

#### 取消订阅链接

所有营销邮件都必须包含取消订阅链接。没有取消订阅链接,收件箱提供商更可能将您的邮件标记为垃圾邮件。当收件人点击 OneSignal 默认取消订阅链接时,其邮件[订阅](./subscriptions)将自动设置为已取消订阅。

使用以下任一方式将 `[unsubscribe_url]` 标签添加到您的邮件中:

<Tabs>
  <Tab title="编辑器（特殊链接）">
    1. 选择您想要转换为取消订阅链接的文本。
    2. 点击工具栏中的链接图标。
    3. 选择**特殊链接 > 取消订阅**。

    <Frame caption="在编辑器中使用特殊链接添加取消订阅链接">
      <img src="https://mintcdn.com/onesignal/RBBmVfkQbMT-0tMb/images/email/email-drag-and-drop-unsubscribe-link.png?fit=max&auto=format&n=RBBmVfkQbMT-0tMb&q=85&s=42c785978dc3142feba1b8de65cc9e62" alt="Adding the unsubscribe link using Special links in the editor" width="1320" height="936" data-path="images/email/email-drag-and-drop-unsubscribe-link.png" />
    </Frame>
  </Tab>

  <Tab title="HTML 区块">
    将以下内容粘贴到 HTML 区块中:

    ```html theme={null}
    <a href="[unsubscribe_url]">Unsubscribe</a>
    ```
  </Tab>
</Tabs>

<Columns cols={2}>
  <Card title="取消订阅链接" icon="link-slash" href="./unsubscribe-links-email-subscriptions">
    合规要求以及 OneSignal 如何处理取消订阅。
  </Card>

  <Card title="自定义取消订阅页面" icon="browser" href="./create-custom-unsubscribe-page">
    用您自己的品牌页面替换默认取消订阅流程。
  </Card>
</Columns>

### HTML 区块

当拖放内容区块无法满足您的需求时,请使用 HTML 区块:

* **深色模式覆盖** — 添加 `prefers-color-scheme` CSS。请参阅下方的[深色模式样式](#dark-mode-styling-with-drag-and-drop)。
* **自定义字体** — 声明带回退字体栈的 `@font-face` 规则。
* **高级布局** — 多列网格、条件内容或 Outlook 特定标记。

<Note>
  邮件不支持 JavaScript。使用内联 CSS — 许多客户端会剥离 `<style>` 标签、类和 ID。
</Note>

### 个性化

使用 Liquid 模板插入订阅者专属内容,如姓名、标签或回退值。示例: `{{ first_name | default: "there" }}`

<Frame caption="使用 Liquid 模板个性化消息">
  <img src="https://mintcdn.com/onesignal/RBBmVfkQbMT-0tMb/images/email/email-drag-and-drop-personalization.png?fit=max&auto=format&n=RBBmVfkQbMT-0tMb&q=85&s=1bf7e704ceb2cdf940ffdfe3939dac44" alt="Using Liquid templating to personalize messages" width="1232" height="670" data-path="images/email/email-drag-and-drop-personalization.png" />
</Frame>

<Columns cols={2}>
  <Card title="消息个性化" icon="user-pen" href="./message-personalization">
    可用的个性化变量及其使用方法。
  </Card>

  <Card title="使用 Liquid 语法" icon="code" href="./using-liquid-syntax">
    条件语句、过滤器、循环和高级 Liquid 模式。
  </Card>
</Columns>

***

## 深色模式

大多数邮件在深色模式下无需更改即可正常渲染。但是,包含品牌颜色、白色背景上的标志或彩色区块的邮件通常需要调整。

### 我是否需要深色模式样式?

如果您的邮件包含以下任何内容,请添加深色模式覆盖:

* **品牌彩色区块** — 饱和色在深色模式下会变得刺眼,影响可读性
* **白色/浅色背景上的标志或图标** — 背景可能反转而图像保持浅色,导致不可见
* **彩色背景上的文字** — 反转的背景可能与未反转的文字颜色冲突
* **行动号召按钮** — 按钮背景可能反转为意外的颜色

如果您的邮件主要是文本且样式极少,默认渲染通常是可接受的。

### 在编辑器中预览深色模式

使用**预览模式**按钮获取深色模式渲染的大致预览。此预览仅为近似值——实际渲染因收件箱提供商而异(请参阅下方的[客户端行为表](#how-email-clients-handle-dark-mode))。

<Frame caption="拖放编辑器中的预览模式">
  <img src="https://mintcdn.com/onesignal/nqVPQMp5bHnJaL0x/images/email/email-drag-and-drop-dark-mode-preview.png?fit=max&auto=format&n=nqVPQMp5bHnJaL0x&q=85&s=8eb1757aa045df0becd6a393522853fe" alt="Preview mode in the Drag and Drop Editor" width="2852" height="1830" data-path="images/email/email-drag-and-drop-dark-mode-preview.png" />
</Frame>

<Frame caption="拖放编辑器中的明暗模式切换">
  <img src="https://mintcdn.com/onesignal/nqVPQMp5bHnJaL0x/images/email/email-drag-and-drop-light-dark-mode-toggle.png?fit=max&auto=format&n=nqVPQMp5bHnJaL0x&q=85&s=c6565bbb0effe970750a159cf234f23e" alt="Light and dark mode toggle in the Drag and Drop Editor" width="2852" height="1830" data-path="images/email/email-drag-and-drop-light-dark-mode-toggle.png" />
</Frame>

### 邮件客户端如何处理深色模式

每个邮件客户端对深色模式的处理方式不同。您无法直接控制此行为,但可以设计在所有模式下都能良好渲染的邮件。

| 客户端                        | 行为                    | 是否支持 `prefers-color-scheme` CSS? |
| -------------------------- | --------------------- | -------------------------------- |
| **Apple Mail** (iOS/macOS) | 完全颜色反转                | 是                                |
| **Gmail** (iOS/Android 应用) | 部分反转 — 更改浅色背景但不更改所有颜色 | 否                                |
| **Gmail** (网页版)            | 无深色模式渲染               | 不适用                              |
| **Outlook** (Windows)      | 使用 Word 渲染引擎完全反转      | 否 — 忽略大多数 CSS 覆盖                 |
| **Outlook** (Mac/iOS)      | 部分反转                  | 是                                |
| **Yahoo Mail**             | 部分反转                  | 否                                |
| **Samsung Mail**           | 完全反转                  | 否                                |

<Warning>
  **需要注意的常见深色模式问题:**

  * **标志消失** — 透明 PNG 上的深色标志在深色背景上会变得不可见。添加白色或浅色轮廓,或使用带内置浅色背景的版本。
  * **文字不可读** — 浅色背景上的深色文字在背景反转后可能仍保持深色。始终将文字颜色覆盖与背景覆盖配对使用。
  * **品牌色冲突** — 在白色背景上效果很好的饱和品牌色在深色背景上会变得刺眼。测试去饱和或柔和的替代色。
  * **按钮不可见** — 品牌色背景上带深色文字的 CTA 按钮在部分反转后可能失去对比度。
</Warning>

**设计技巧:**

* 避免纯白 (`#FFFFFF`) 和纯黑 (`#000000`)。使用近白色和深灰色以减少完全反转客户端的影响。
* 谨慎使用透明 PNG。它们与任何背景都能很好融合,但深色 logo 在透明背景上在深色模式下会变得不可见。为 logo 添加浅色轮廓,或使用带有内置背景的版本。
* 对于包含文字的图像,为深色文字添加白色轮廓以确保可读性。对于深色背景上的白色文字,添加黑色轮廓。

### 使用拖放功能进行深色模式样式设置

如果只有少数元素在深色模式下渲染效果不佳,您可以将它们替换为 HTML 区块,并使用 CSS 类和 `!important` 声明直接覆盖样式。

<Steps>
  <Step title="在邮件顶部添加 HTML 区块">
    将一个 **HTML 区块**拖到邮件的第一行。

    <Frame caption="Adding an HTML block to the top of your email">
      <img src="https://mintcdn.com/onesignal/nqVPQMp5bHnJaL0x/images/email/email-drag-html-block.png?fit=max&auto=format&n=nqVPQMp5bHnJaL0x&q=85&s=b5ddeeb7ed1144655ba0ee92891f059f" alt="Adding an HTML block to the top of your email" width="1299" height="603" data-path="images/email/email-drag-html-block.png" />
    </Frame>
  </Step>

  <Step title="添加深色模式 CSS">
    将以下内容粘贴到 HTML 区块中。`prefers-color-scheme: dark` 媒体查询仅在收件人的邮件客户端处于深色模式时应用样式。

    ```html HTML block theme={null}
    <meta name="color-scheme" content="light dark" />
    <meta name="supported-color-schemes" content="light dark" />
    <style>
      :root {
        color-scheme: light dark;
      }

      @media (prefers-color-scheme: dark) {
        .email-body {
          background-color: #1a1a1a !important;
          color: #f0f0f0 !important;
        }

        .email-header {
          background-color: #2d2d2d !important;
        }

        .email-button {
          background-color: #0a84ff !important;
        }
      }
    </style>
    ```
  </Step>

  <Step title="将有问题的内容替换为 HTML 区块">
    将在深色模式下渲染不正确的内容区块替换为使用上面定义的 CSS 类的 HTML 区块。

    <CodeGroup>
      ```html email-header theme={null}
      <div class="email-header" style="background-color: #f5f5f5; padding: 0; text-align: center;">
        <img src="https://dashboard.onesignal.com/assets/email/your-email-strategy-starts-here.jpg"
             alt="Your email strategy starts here"
             width="600"
             style="display: block; width: 100%; max-width: 600px; height: auto;" />
      </div>
      ```

      ```html email-body theme={null}
      <div class="email-body" style="background-color: #ffffff; color: #333333; padding: 24px; font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5;">
        <p style="margin: 0 0 16px;">Hi {{ first_name | default: 'there' }}!</p>
        <p style="margin: 0 0 16px;">Ready to craft a stunning email? Here's how to get started:</p>
        <ul style="margin: 0 0 16px; padding-left: 20px;">
          <li style="margin-bottom: 8px;"><strong>Drag &amp; drop simplicity:</strong> Add text, images, and buttons to your email.</li>
          <li style="margin-bottom: 8px;"><strong>Build smarter with Saved Rows:</strong> Create reusable headers and footers for consistent branding.</li>
          <li style="margin-bottom: 8px;"><strong>Test &amp; preview:</strong> Verify your email on every device before sending.</li>
        </ul>
      </div>
      ```

      ```html email-button theme={null}
      <div class="email-body" style="background-color: #ffffff; padding: 0 24px 24px; text-align: center;">
        <a class="email-button" href="https://example.com"
           style="background-color: #0066cc; color: #ffffff; padding: 14px 32px;
                  text-decoration: none; border-radius: 4px; display: inline-block;
                  font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold;">
          Get Started
        </a>
      </div>
      ```
    </CodeGroup>
  </Step>
</Steps>

<Check>
  返回预览模式以验证深色模式样式是否正确应用。
</Check>

***

## 保存您的工作

将您的邮件设计保存为[**模板**](./templates)以供将来使用。

<Frame caption="将邮件保存为模板">
  <img src="https://mintcdn.com/onesignal/56ctKxZSV4m5VEkn/images/docs/b827bbc-Email-Save_As_Template.jpg?fit=max&auto=format&n=56ctKxZSV4m5VEkn&q=85&s=042193dfb7e8d814f99deb2b12bb26fa" alt="Save email as a template" width="2250" height="1176" data-path="images/docs/b827bbc-Email-Save_As_Template.jpg" />
</Frame>

***

## 常见问题

### 如何添加自定义取消订阅链接?

将默认的 `[unsubscribe_url]` 替换为您自己的 URL。当收件人取消订阅时,您有责任更新 OneSignal 中的邮件订阅状态。有关设置详情,请参阅[创建自定义取消订阅页面](./create-custom-unsubscribe-page)。

### 为什么我的邮件在 Outlook 中看起来不同?

Windows 版 Outlook 使用 Microsoft Word 渲染引擎,不支持现代 CSS。常见问题包括忽略 `max-width`、折叠的背景图像和缺失的网络字体。请专门在 Outlook 中测试,并在图像上使用带明确 `width` 和 `height` 属性的内联 CSS。

### 邮件的最大大小是多少?

保持总邮件大小(HTML + 图像)在 1 MB 以下。HTML 超过 102 KB 的邮件会被 Gmail 截断,将折叠以下的内容隐藏在"查看完整邮件"链接后面。优化图像并删除未使用的代码以保持在此阈值以下。

### 我可以在多个活动中重复使用邮件的某些部分吗?

可以。点击行上的保存图标将任意行保存为**保存的行**。保存的行显示在**行 > 我保存的行**下,可以拖入任何邮件。如需完整邮件重用,请将整个设计保存为[模板](./templates)。

### 如何在发送前预览我的邮件?

使用顶部工具栏中的**预览**按钮查看您的邮件在桌面和移动端的渲染效果。要发送实时测试,请点击**发送测试邮件**并输入收件人地址。测试邮件将发送到收件箱,以便您在实际邮件客户端中验证渲染、链接和个性化效果。

### 邮件中可以使用表情符号吗?

可以,但在不同邮件客户端中渲染效果不同。Windows 版 Outlook 最不一致——表情符号可能显示为黑白轮廓或方框。如果表情符号是主题行或 CTA 文字的一部分,请在发送前跨客户端测试。

### 如何导入现有的 HTML 邮件模板?

您可以通过三种方式将现有 HTML 模板导入 OneSignal:

1. 使用[邮件模板转发](./email-template-forwarding)将邮件转发给 OneSignal
2. 使用[创建模板 API](/reference/create-template) 以编程方式上传 HTML
3. 将您的 HTML 直接复制粘贴到 [HTML 编辑器](./design-emails-with-html)

## 相关页面

<Columns cols={3}>
  <Card title="邮件概述" icon="envelope" href="./email-messaging">
    使用 OneSignal 发送邮件的端到端指南。
  </Card>

  <Card title="使用 HTML 设计邮件" icon="code" href="./design-emails-with-html">
    完整 HTML 控制、深色模式覆盖和高级样式。
  </Card>

  <Card title="邮件模板" icon="copy" href="./templates">
    跨活动保存和重用邮件设计。
  </Card>

  <Card title="取消订阅链接" icon="link-slash" href="./unsubscribe-links-email-subscriptions">
    添加默认或自定义取消订阅链接以确保合规。
  </Card>

  <Card title="消息个性化" icon="user-pen" href="./message-personalization">
    使用标签、Liquid 语法和动态内容个性化邮件。
  </Card>

  <Card title="AB 测试" icon="flask" href="./ab-testing">
    测试主题行、内容和发送时间以优化互动效果。
  </Card>
</Columns>