WordPress divi主题

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

by | May 10, 2022 | Divi主题使用教程 | 0 comments

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

文本框为您的网站提供一个文本滚动区域,让读者通过有用的内容片段吸引读者。它们也称为代码(或新闻代码),通常用于在页面顶部或底部显示稳定的新闻更新流. 通常滚动动画是用单行内容循环完成的,这样信息就会重复显示。 不幸的是,html <marquee> 标签已过时,因此我们现在指望 CSS 和 JavaScript 来创建字幕。 但是,使用 Divi,您可以创建一个简单的选取框,而不必担心自定义代码。

google广告开户

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

让我们开始吧。

抢先看

divi 文字选框

divi 文字选框

divi 文字选框

免费下载布局

要掌握本教程中的设计,您首先需要使用下面的按钮下载它。 要访问下载,您需要使用下面的表格订阅我们的 Divi Daily 电子邮件列表。 作为新订阅者,您将在每周一收到更多 Divi 福利和免费的 Divi Layout 包! 如果您已经在列表中,只需在下面输入您的电子邮件地址,然后单击下载。 您不会被“重新订阅”或收到额外的电子邮件。

订阅我们的 Youtube 频道

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

WordPress divi主题

让我们来看看教程好吗?

你需要什么开始

要开始,您需要具备以下条件:

  1. Divi 主题已安装并处于活动状态
  2. 在前端从头开始构建的新页面(可视化构建器)

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

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

divi 文字选框

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

这是如何做到的。

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

divi 文字选框

然后,在添加模块之前,使用固定宽度、框阴影和边框半径更新行,如下所示:

  • 最大宽度:200px
  • 内边距:顶部 10 像素,底部 10 像素
  • 圆角:10px
  • 盒子阴影:见截图
  • 水平溢出:隐藏
  • 垂直溢出:隐藏

divi 文字选框

fiverr建站WordPress程序员

添加文本模块

行完成后,将一个新的文本模块添加到该行。

divi 文字选框

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

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

文本模块设计

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

  • 边距:-100% 左,100% 右

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

独立站选品工具

divi 文字选框

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

divi 文字选框

结果

现在让我们看看结果。

divi 文字选框

创建更长的文本行

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

高质量外链购买

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

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

divi 文字选框

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

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

divi 文字选框

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

JasperAI 10000字免费额度试用
  • 宽度:207%
  • 边距:左侧 -207%,右侧 207%
  • 动画强度:75%

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

结果

这是最终结果。

divi 文字选框

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

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

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

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

WordPress备份工具updrafplus

animation-play-state: paused;


divi 文字选框

最后结果

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

divi 文字选框

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

divi 文字选框

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

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

添加预制布局

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

divi 文字选框

使用布局删除额外内容

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

divi 文字选框

创建文本选框动画

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

这是如何做到的。

更新行设置

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

divi 文字选框

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

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

divi 文字选框

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

更新文本模块文本设计

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

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

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

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

divi 文字选框

将动画添加到文本模块

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

divi 文字选框

最终设计

现在查看最终设计。

divi 文字选框

最后的想法

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

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

干杯!

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