Legacy Builder

Note

此页面的内容需要进行重大更新。旧页面包含过时且可能不准确的信息。您仍然可以在 Mautic Developer Documentation archived repository 中访问它。

如果您有兴趣帮助开发此页面和其他新内容的，请考虑加入文档编写工作。

请阅读 Contributing Guidelines 和 Contributing to Mautic’s documentation 以开始您的贡献。

Warning

遗留构建器 (Legacy Builder) 仍然存在于 Mautic 4 中，但计划在未来删除。有关更多信息，请参阅 Builder documentation。

Slots

Slot 定义

使用 HTML 属性定义 slot，例如 data-slot=”{slot type here}”`。 例如，即使在演示内容中也可以定义文本 slot。

带有属性 data-slot=”text” 的 div 会使 div 内的文本在打开构建器时，可以通过内联 Froala 编辑器进行编辑。

<div data-slot="text">
    <a>@JaneDoe</a> 邀请您加入 Awesome inc!
</div>

当前已实现的 slot 类型：

Image

将单个图像插入到 div 中。您可以单击并使用 Froala 编辑器提供的选项进行编辑。

Button

插入一个 HTML 按钮。您可以定义文本、URL 以及内边距、大小和位置。

Text

插入一个新的文本 slot，您可以使用 HTML 编辑器对其进行编辑。这允许使用媒体，例如图像和视频。

Separator

插入一条水平线以分隔内容。

Slot 容器

如前所述，用户可以在创建基于主题的电子邮件时拖放新的 slot。因此，作为主题开发者，您必须定义用户可以放置 slot 的位置。 您可以使用单个 HTML 属性 data-slot-container=”1” 来实现此目的。

<div data-slot-container="1">
    <div data-slot="text">
        <a>@JaneDoe</a> 邀请您加入 Awesome inc!
    </div>
</div>

这允许用户将新的 slot 拖放到此容器中。 在前面的示例中，已经定义了一个预定义的 slot，用户可以将其移动到另一个容器、删除或编辑。

此功能为您提供了很大的创意自由来设计和开发您自己的独特电子邮件和着陆页面。 有独特的想法？ 请在论坛上与社区分享它。 社区很乐意了解您如何使用 Mautic 来吸引您的受众。

Sections

Section 是主题的整个宽度部分，允许用户更改 section 包装器的背景颜色、全屏宽度以及 section 内容本身。 您可以向上或向下移动 section、删除 section，甚至创建具有 1、2 或 3 列布局的新 section。

Section

该部分用于承载和包裹内容。它可以是任何具有 data-section=”1” 属性的块级 HTML 元素。

Note

将该元素居中，并添加一个与所有其他部分一致的固定宽度。

<div data-section="1">
    <div data-slot-container="1">
        <div data-slot="text">
            <a>@JaneDoe</a> 邀请您加入 Awesome inc!
        </div>
    </div>
</div>

部分包装器

部分包装器必须具有浏览器窗口的 100% 宽度。因此，如果您希望允许用户更改每个部分的背景，则需要将您的主题划分为多个“行”。部分包装器可以是任何具有 data-section-wrapper=”1” 属性的块级 HTML 元素。

<div data-section-wrapper="1">
    <div data-section="1">
      <div data-slot-container="1">
          <div data-slot="text">
              <a>@JaneDoe</a> 邀请您加入 Awesome inc!
          </div>
      </div>
    </div>
</div