如何在 Divi 中创建曲线文字设计

如果您正在寻找一种独特的方式来展示网页上的文本，那么知道如何在 Divi 中创建弯曲的文本设计可能会派上用场。 这种设计适用于在 Divi 中构建自定义图形或创意标题设计，而无需使用照片编辑器。 通常这涉及更完整的 html 和 css 来完成，但使用 Divi，自定义 CSS 最少，并且您有更多内置选项可以以独特的方式轻松设计文本。

在本教程中，我们将向您展示如何创建几个弯曲的字母设计，您可以将它们用作用于您自己目的的有用模板。 如果有的话，您可以为将来的设计工具箱添加一些新的东西。

让我们开始吧。

抢先看

这是我们将在本教程中构建的弯曲文本设计的先睹为快。

免费下载字母动画设计示例布局

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

下载文件

免费下载

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

下载

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

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

让我们进入教程好吗？

在Divi中创建曲线文本背后的基本思想

要使用本教程中的方法创建弯曲文本，您需要在单独的文本模块中添加文本的每个字母（您将希望使用等宽字体以获得最佳效果）。 给文本模块一个设定的高度。 然后你需要给每个文本模块一个居中的绝对位置，以便它们都堆叠在彼此的顶部。

这很重要，因为我们希望每个字母都从相同的中心点旋转。 之后，您可以使用 Divi 的变换选项沿 z 轴旋转每个字母以创建弯曲的文本（想想在数学课中使用指南针画一个圆圈）。 另外，请注意，每个文本模块的高度决定了圆半径，这也会增加圆的周长，从而增加字母之间的空间。

这是 8 个文本模块以 45 度为增量旋转以创建文本的完美圆形布局的示例。 我在每个模块周围添加了一个白色边框，以便您可以轻松看到旋转。

并且，这是以 20 度为增量旋转相同文本模块的示例。

入门

订阅我们的 YouTube 频道

首先，在 Divi 中创建一个新页面。 然后给你一个页面标题并在前端部署Divi builder。 选择“从头开始构建”选项。 现在你准备好了！

创建曲线文字设计

创建部分和行

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

在我们添加模块之前，请继续更新部分设置，如下所示：

• 背景渐变左颜色：#1e003d
• 背景渐变右颜色：#121212
• 渐变类型：径向

• 背景图像：[插入大约 100 像素 x 100 像素的徽标图像]
• 背景图片尺寸：实际尺寸

保存设置，然后跳转到行设置并更新以下内容：

• 天沟宽度：1
• 宽度：100%
• 最小高度：400px
• 高度：40vw
• 最大高度：600px
• 自定义填充：0px 顶部，0px 底部

然后将以下自定义 CSS 添加到 Column Main Element 以确保所有文本模块保持水平居中：

列主要元素 CSS：

display:flex;
justify-content:center;

为每个字母创建文本模块

现在我们准备用我们的第一个字母添加我们的第一个文本模块。 为此，向行列添加一个新的文本模块并更新以下内容：

• 内容：d（只是一个字母）
• 文本字体：Ubuntu Mono（任何等宽字体都可以）
• 文字文字颜色：#ffffff
• 文字文字大小：5vw（桌面），40px（手机）
• 文字方向：居中
• 最小高度：200px
• 高度：20vw
• 最大高度：300px

然后将变换原点更新为底部。 这对于确定文本旋转发生的位置很重要。 我们希望文本模块在模块的底部旋转。 尽管不需要旋转第一个文本模块，但将其添加到此处很重要，这样我们就可以在为其他字母复制文本模块时使用此选项。

• 变换原点：100%（或底部）

然后将以下自定义 CSS 添加到 Main Element 以给文本模块一个绝对位置。

position: absolute !important;

创建和旋转其他文本模块

为了创建其余的字母，我们将复制文本模块。 一旦我们复制了文本模块，我们需要做的就是更新字母，然后每个新模块将旋转增加 45 度。

由于文本模块将堆叠在前端的每个顶部，因此最好使用线框视图模式进行这些更新。

继续复制文本模块，然后更新以下内容：

• 内容：我
• 变换旋转 z 轴：45deg

继续复制文本模块的过程，然后使用新字母更新文本模块并将变换旋转增加 45 度。 以下是其余 6 个文本模块更新的细分：

文本模块 3

• 内容：五
• 变换旋转 z 轴：90 度

文本模块 4

• 内容：我
• 变换旋转 z 轴：135deg

文本模块 5

• 内容：d
• 变换旋转 z 轴：180 度

文本模块 6

• 内容：我
• 变换旋转 z 轴：225deg

文本模块 7

• 内容：五
• 变换旋转 z 轴：270 度

文本模块 8

• 内容：我
• 变换旋转 z 轴：315deg

就是这样！ 现在看看最终的结果。

最后结果

调整较长文本的文本大小和旋转度

如果要为较大的文本设计选项调整弯曲文本，可以更改每个文本模块的文本大小和变换旋转。

部署线框视图模式，然后使用 Divi 的多选功能选择所有包含弯曲字母的文本模块。 然后单击打开所选文本模块之一的设置以打开元素设置模式，该模式将一次更新所有所选模块。

在元素设置下，将桌面上的文本大小更改为 40px。

保存设置，然后打开每个文本模块的设置并更新每个文本模块的字母和旋转。 将第一个文本模块旋转 0 度，然后将后面的每个文本模块的 z 轴旋转增加 10 度。 然后根据需要复制文本模块以获得更多字母。 在这个例子中，我将拼出“elegant.themes”。

这是每个文本模块所需的内容字母和轮换的细分。

• 文本模块 1
  • 内容：e
  • 变换旋转 z 轴：0deg
• 文本模块 2
  • 内容： l
  • 变换旋转 z 轴：10 度
• 文本模块 3
  • 内容：e
  • 变换旋转 z 轴：20 度
• 文本模块 4
  • 内容：克
  • 变换旋转 z 轴：30 度
• 文本模块 5
  • 内容：一
  • 变换旋转 z 轴：40 度
• 文本模块 6
  • 内容：n
  • 变换旋转 z 轴：50 度
• 文本模块 7
  • 内容：吨
  • 变换旋转 z 轴：60 度
• 文本模块 8
  • 内容： 。
  • 变换旋转 z 轴：70 度
• 文本模块 9
  • 内容：吨
  • 变换旋转 z 轴：80 度
• 文本模块 10
  • 内容：h
  • 变换旋转 z 轴：90 度
• 文本模块 10
  • 内容：e
  • 变换旋转 z 轴：100 度
• 文本模块 11
  • 内容：米
  • 变换旋转 z 轴：110 度
• 文本模块 12
  • 内容：e
  • 变换旋转 z 轴：120 度
• 文本模块 13
  • 内容
  • 变换旋转 z 轴：130 度

这是到目前为止的结果。

调整整个文本旋转的一种简单方法是对行应用变换旋转。 打开行设置，然后使用 z-index 控制拨盘将弯曲文本放置在您想要的任何位置。

这是最终的设计。

随意探索添加更多文本并调整旋转度以获得正确的字母间距。 您还可以调整文本模块的高度以减少或增加半径。

最后的想法

一旦您了解它的工作原理，在 Divi 中创建弯曲的文本设计是一个非常简单的过程。 本文将帮助您了解设置文本模块所涉及的几何图形，以便它们在曲线上旋转。 一旦设置正确，除了一些自定义 css 片段之外，您还可以使用 Divi 的内置设计设置来获得非常有创意的设置。 希望这会给你一些灵感，让你制作一些自己独特的曲线文字设计。

而且，如果您想为弯曲的字母添加一些动画，请查看我们关于如何为字母设置动画的文章。

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

干杯!