WordPress divi主题

使用内联电子邮件选项模块内容与结合文本模块

| 4月 22, 2022 | Divi主题使用教程 | 0 条评论

5分钟生成10篇英文软文article forge软件试用

Divi 的电子邮件 optin 模块有几个文本和内容区域,可以显示其他内容。 这些区域可以在电子邮件 optin 模块中设置样式。 连同模块的布局选项,这为简单的电子邮件表单提供了可靠的设计。 然而,这确实限制了设计的可能性。 幸运的是,我们可以使用带有文本模块的电子邮件 optin 模块来创建更多的设计和样式选项。 在这篇文章中,我们将比较使用电子邮件 optin 模块本身中的文本字段与使用单独的模块进行副本。

google广告开户

让我们开始吧!

内联电子邮件选项模块内容元素

除了表单本身,Divi 的电子邮件 optin 模块还包含三个内容区域。 它们包括标题、正文内容和页脚内容。 标题是单个文本字段,在“内容”选项卡中没有任何调整。 Body 和 Footer 内容具有完整的内容编辑器,可以接受文本、媒体、HTML、CSS 等。您还可以使用动态内容,针对各个设备尺寸自定义它们,并调整它们的悬停状态。

内联电子邮件选项模块内容元素

内联电子邮件选项模块设计选项卡

设计选项卡具有标题和内容区域的基本样式设置。 选项包括标题级别、字体、字体粗细(常规或粗体)、样式、对齐方式、颜色、大小、间距、行高和阴影。 让我们来看看每一个。

电子邮件选项模块标题选项

以下是标题的设计设置。 我已经通过此图像中的文本颜色调整了标题级别。

电子邮件选项模块标题选项

我已经通过此图像中的文本阴影调整了文本大小。

电子邮件选项模块标题选项

电子邮件选项模块正文和页脚文本选项

正文和页脚文本由相同的设计设置控制。 下图包括字体到字体颜色选项。 本节还添加了标准文本功能,例如项目符号、链接、引用等。标题文本遵循正文文本的样式,除非它有自己的样式。 除非单独设置样式,否则该按钮将使用一些文本选项。

WordPress divi主题

电子邮件选项模块正文和页脚文本选项

下图通过文本阴影选项添加了文本大小。

电子邮件选项模块正文和页脚文本选项

您可以在内容编辑器中使用内联 CSS,但任何未设置样式的内容都将遵循“设计”选项卡中的样式。

电子邮件选项模块正文和页脚文本选项

内联电子邮件选项模块内容布局

布局选项允许我们将标题和正文内容放置在表单的上方、下方、右侧或左侧。 下面的示例将主体放在顶部,将表单放在底部。

内联电子邮件选项模块内容布局

电子邮件选择内容的优缺点

优点

  • 一切都包含在一个模块中。 这简化了电子邮件表单的创建和样式。
  • 它易于使用且高效。 如果您想复制或移动电子邮件表单,您只需要处理一个模块。
  • email optin 模块提供了我们可以使用的三个文本区域。 文本看起来很棒,适用于基本的电子邮件表单。
  • 要进行调整,您只需要打开一个模块。

缺点

  • 标题文本有一个简单的字段来输入标题,它在设计选项卡中有基本的样式选项。
  • 正文和页脚文本在“内容”选项卡中有单独的内容编辑器,但它们在“设计”选项卡中使用相同的设置。
  • 该模块有四个布局选项,用于确定正文和表单的位置。 您可以将正文放置在表单的上方、下方、右侧或左侧,但不能将它们分开。
  • 表单的字段具有单独的样式选项,但其他样式元素适用于整个模块。 例如,背景、大小、间距、边框、框阴影、过滤器、变换和动画适用于模块的每个元素。 这意味着您不能将标题的背景与正文、页脚或表单分开调整。
  • 标题始终位于正文上方。 页脚内容始终位于按钮下方。
  • 任何在“设计”选项卡中不可用的位置或样式调整都必须添加到“高级”选项卡的 CSS 字段中。

将文本与模块相结合

另一种方法是使用单独的文本模块以及电子邮件 optin 模块创建相同的文本元素。 此选项要求您设置多个元素的样式,并且您可能需要使用具有多列选项的行。 但是,它还为您提供了最多的功能和选项。

要使用此方法,只需将电子邮件 optin 模块的 Title、Body 和 Footer 字段留空,就像我在下面的示例中所做的那样。 这为您提供了没有其他文本元素的表单。

将文本与模块相结合

fiverr建站WordPress程序员

然后,使用文本模块创建您想要的元素。 在下面的示例中,我在表单旁边添加了两个文本模块。 如本例所示,内容编辑器与电子邮件选择模块中的相同。

文本模块内容设计选项

文本模块与电子邮件选择模块具有相同的正文和标题文本设计设置,但添加了更多选项。 标题文本包括五个字体粗细。 由于您可以为每组文本使用不同的模块,因此您可以为每组文本设置不同的背景、边框、框阴影等。

下面的示例为表单使用电子邮件 optin 模块,并添加三个不同的文本模块来创建标题、正文和页脚文本。 我已经分别设置了每个模块的样式。 这显示了字体、粗细、样式、颜色、大小、间距、行高和文本阴影的设置。 我还调整了背景、间距和边框。

文本模块内容设计选项

独立站选品工具

将文本模块用于电子邮件选择内容的利弊

优点

  • 文本模块为每个元素提供了更多样式功能。 由于每个模块都是单独设置样式的,因此您可以为每个元素设置不同的样式。 这包括不同的背景、间距、大小、边框等。
  • 您不受布局选项的限制。
  • 您不仅限于一组内容。 您可以使用任意数量的模块围绕表单,以创建您想要的任何设计。
  • 您不仅限于文本模块。 您可以使用任何您想要的东西,例如图像、视频、滑块、CTA 等等。
  • 您仍然可以将它们与电子邮件 optin 模块中的内容结合使用。

缺点

  • 要将内容放在表单旁边,您必须使用具有更多列的行。
  • 复制或移动单个模块更加困难。
  • 如果您想进行更改,还有更多模块可以打开。
  • 可能需要一些额外的造型工作才能使它们看起来像一个单一的形式。 如果您想更改它们并使其看起来像单个模块,则必须在行设置中完成电子邮件选项的边框和背景。

电子邮件和文本模块组合示例

接下来,让我们看几个电子邮件选择模块和文本模块组合的示例。 对于这些示例中的大多数,我将使用 Divi 中提供的免费 NGO 布局包中的电子邮件选择表单。 我将展示桌面和线框视图。

首先,这是布局中显示的电子邮件选项。 它使用两个文本模块和电子邮件 optin 模块。 背景样式在行中完成。 它在顶部放置一个小标题,在其下方放置一个大描述,然后是表单。

电子邮件和文本模块组合示例

这是线框视图。

电子邮件和文本模块组合示例

高质量外链购买

电子邮件和文本模块组合示例一

我们的第一个示例将描述移动到表单的右侧,但将标题保留在表单上方。 这种布局很简单,但如果不使用表单上方的文本模块,这是不可能的。 我已将行更改为 2 列。

电子邮件和文本模块组合示例一

这是线框视图。

电子邮件和文本模块组合示例一

电子邮件和文本模块组合示例二

我们的第二个示例,我已将行更改为 3 列,并将文本模块放置在外列中。 带有文本的每一行都包含提供编号步骤的标题和描述。 email optin 模块可以显示一个步骤,但不能同时显示两个。

JasperAI 10000字免费额度试用

"电子邮件和文本模块组合示例二

这是线框视图。

"电子邮件和文本模块组合示例二

电子邮件和文本模块组合示例三

我们的第三个示例使用具有多行和多列宽度的特殊部分。 它在左侧显示标题和两个用于描述的模块,在右侧显示电子邮件表单。

"电子邮件和文本模块组合示例三

WordPress备份工具updrafplus

这是线框视图。

"电子邮件和文本模块组合示例三

电子邮件和文本模块组合示例四

这是我们的第四个例子。 它使用免费的 Scooter Rental Layout Pack 中的电子邮件选择表单。 我在标题的背景中添加了一张图片,并将标题的字体颜色更改为白色。 其他的都和原版一样。 列的白色背景使它看起来像一个单独的模块。

"电子邮件和文本模块组合示例四

这是线框视图。

"电子邮件和文本模块组合示例四

结束的想法

这就是我们对使用内联电子邮件 optin 模块与将其与文本模块相结合的看法。 email optin 模块运行良好,并提供了一个简单的电子邮件表单,但它是有限的。 使用标题和描述的文本模块为您提供了更多的设计选项。 通过一些样式,多个模块可以看起来像一个模块。 使用多个模块,您可以创建具有更多布局和设计选项的独特电子邮件选择表单。

我们希望收到你的来信。 您是使用 Divi 电子邮件 optin 模块中的内容功能,还是更喜欢使用文本模块来处理该内容? 让我们在评论中知道。

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题