如何使用 Divi 创建简单的文本选取框

文本选框为您的网站提供了一个滚动的文本区域，让读者可以看到有用的内容片段。它们也被称为行情（或新闻行情），通常用于在页面的顶部或底部显示稳定的新闻更新流. 通常滚动动画是在循环中使用一行内容完成的，以便重复显示信息。 不幸的是，html <marquee>标签已经过时，所以我们现在依靠 CSS 和 JavaScript 来创建<marquee> 。 但是，使用 Divi，您可以创建一个简单的选取框，而不必担心自定义代码。

在本教程中，我们将带您了解使用 Divi 创建简单的文本选取框是多么容易。 我们甚至将介绍如何在悬停时暂停滚动文本动画以及如何添加大文本选取框作为标题的独特设计元素。

让我们开始吧。

抢先看

免费下载布局

要亲身体验本教程中的设计，您首先需要使用下面的按钮下载它。 要访问下载，您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订户，您每周一将收到更多的 Divi 善良和免费的 Divi 布局包！ 如果您已经在列表中，只需在下面输入您的电子邮件地址，然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

下载文件

免费下载

加入 Divi 时事通讯，我们将通过电子邮件向您发送一份最终的 Divi 登陆页面布局包，以及大量其他令人惊叹的免费 Divi 资源、提示和技巧。 跟随，您将很快成为 Divi 大师。 如果您已经订阅，只需在下面输入您的电子邮件地址，然后单击下载即可访问布局包。

下载

您已成功订阅。 请检查您的电子邮件地址以确认您的订阅并获得免费的每周 Divi 布局包！

订阅我们的 YouTube 频道

要将布局导入您的页面，只需提取 zip 文件并将 json 文件拖到 Divi Builder 中。

让我们进入教程好吗？

你需要什么开始

首先，您需要具备以下条件：

1. 已安装并激活 Divi 主题
2. 在前端从头开始构建的新页面（可视化构建器）

之后，您将有一个空白画布开始在 Divi 中进行设计。

第 1 部分：在 Divi 中创建一个简单的文本选取框

对于第一个示例，我们将为一行文本创建一个简单的文本选取框。 为此，我们将为一行设置最大宽度并隐藏溢出。 然后，我们将向包含文本行的文本模块添加一个循环幻灯片动画，以便它像选取框一样反复滑过该行进入视图。

这是如何做到的。

首先，创建一个具有一列行的常规部分。

然后，在添加模块之前，更新具有固定宽度、框阴影和边框半径的行，如下所示：

• 最大宽度：200px
• 填充：顶部 10 像素，底部 10 像素
• 圆角：10px
• 盒子阴影：见截图
• 水平溢出：隐藏
• 垂直溢出：隐藏

添加文本模块

一行完成后，向该行添加一个新的文本模块。

然后用一行文本更新正文内容。 现在确保文本行不会分成另一行。

• 正文：“这是一个句子”

文本模块设计

更新文本模块设计设置如下：

• 边距：-100% 左，100% 右

这会将文本模块定位在行的左侧之外。 因为该行隐藏了溢出可见性，该模块将被隐藏，直到我们添加动画将其显示出来。

• 动画风格：幻灯片
• 动画方向：右
• 动画持续时间：5000ms
• 动画强度：100%
• 动画开始不透明度：100%
• 动画速度曲线：线性
• 动画重复：循环

结果

现在让我们看看结果。

创建更长的文本行

在上面的简单文本选取框设计中，我们将文本行的宽度限制为与行的宽度相同。 但是，如果我们想创建一行更长的行宽相同的文本，我们需要稍微修改一下设置。

首先，在文本模块上，将正文文本替换为以下内容：

<p>This is a sentence in a marquee with a <a href="#">link</a></p>

添加更多宽度和边距以适应更长的文本行

您可能会注意到，文本现在分成三行而不是一行。

因此，我们需要调整边距和动画强度。

• 宽度：207%
• 边距：左 -207%，右 207%
• 动画强度：75%

这里的技巧是增加宽度并更新边距值，以便为单行文本提供足够的空间。 然后调整动画强度，使循环动画之间没有大的中断。

结果

这是最终结果。

在悬停时暂停选取框文本动画

由于此选取框包含一个链接，因此用户在链接移动时很难实际单击该链接。 但是，我们可以将一小段 css 添加到文本模块中，这将在悬停时暂停动画。

添加 CSS 片段以暂停悬停动画

要添加 css 片段，请打开文本模块设置并将以下自定义 CSS 添加到悬停选项卡下的主要元素：

animation-play-state: paused;

最后结果

现在看看最终的结果。 注意当光标悬停在文本上时文本动画将如何暂停，允许用户单击链接。

第 2 部分：在 Divi 中创建文本选取框作为响应式设计元素

现在我们了解了如何在 Divi 中创建一个简单的文本选取框，我们可以采用相同的概念来创建一个响应式文本选取框设计元素。 这可以很好地为标题或部分标题创建独特的动画设计。

为此，我们将使用 Divi 的 Job Recruiter Home Page 预制布局。

添加预制布局

要将布局添加到您的页面，请打开 Divi 构建器底部的设置菜单，然后单击加号。 从库弹出加载中，选择招聘人员布局包。 然后单击以使用主页布局。

使用布局删除额外内容

将布局加载到页面后，部署线框视图模式并删除布局的所有内容，除了全角标题及其正下方的部分。

创建文本选取框动画

如您所见，“雇用”一词已在第二部分的文本模块中用作大文本设计元素。 我们将把那个文本模块变成一个响应式文本选取框设计元素。 使文本选取框响应的关键是确保行和文本模块跨越浏览器窗口的整个宽度。 我们可以使用 100% 的宽度来做到这一点。 然后我们可以使用 vw 长度单位作为文本大小。 这将使文本与浏览器宽度很好地缩放。 之后，我们将应用与之前制作简单文本选取框示例相同的原则。

这是如何做到的。

更新行设置

如前所述，该行需要 100% 才能使此响应式文本选取框设计工作。 这允许我们的文本模块使用相对于浏览器宽度的 vw 长度单位。 由于我们的预制布局已经有一行宽度为 100%，我们不需要做任何事情。

但是，我们确实需要按如下方式调整其余设置。

• 边距：-24vw 底部
• 变换 平移 Y 轴：-24vw
• 水平溢出：隐藏
• 垂直溢出：隐藏

负底边距是为了消除每当我们使用变换平移向上移动行时留下的负空间。 我们需要为我们的文本选取框效果隐藏行的溢出。

更新文本模块文本设计

现在您需要做的就是更新文本模块以将其转换为大型文本选取框设计元素。

打开文本模块并更新以下内容：

• 文字文字颜色：rgba(255,255,255,0.16)
• 文字文字大小：36vw
• 边距：-100% 左，100% 右

文本大小使用 vw 长度单位，因此文本将随着浏览器的宽度很好地缩放。

向文本模块添加动画

• 动画风格：幻灯片
• 动画方向：左
• 动画持续时间：10000ms
• 动画强度：100%
• 动画速度曲线：线性
• 动画重复：循环

最终设计

现在看看最终的设计。

最后的想法

文本选取框可以成为网页设计中的便捷工具。 它们也不限于严格用作新闻行情。 他们还可以为您的网页设计添加漂亮的动画元素。 最好的部分是 Divi 可以轻松地以各种漂亮的方式创建和设计它们。 我希望本教程将帮助您在需要时创建一些简单的文本选取框。

我期待在评论中收到您的来信。

干杯!