WordPress divi主题

如何在 Divi 中创建弯曲的文本设计

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

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

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

google广告开户

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

让我们开始吧。

抢先看

这是我们将在本教程中构建的弯曲文本设计的预览。

divi 弯曲的文字设计

divi 弯曲的文字设计

divi 弯曲的文字设计

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

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

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

让我们来看看教程好吗?

WordPress divi主题

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

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

divi 弯曲的文字设计

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

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

divi 弯曲的文字设计

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

divi 弯曲的文字设计

入门

订阅我们的 Youtube 频道

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

fiverr建站WordPress程序员

创建弯曲的文本设计

创建节和行

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

divi 弯曲的文字设计

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

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

divi 弯曲的文字设计

  • 背景图片: [insert image of logo around 100px by 100px]
  • 背景图像尺寸:实际尺寸

divi 弯曲的文字设计

独立站选品工具

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

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

然后将以下自定义 CSS 添加到列主元素以确保所有文本模块将保持水平居中:

列主元素 CSS:

display:flex;
justify-content:center;

divi 弯曲的文字设计

为每个字母创建文本模块

现在我们准备添加我们的第一个文本模块和我们的第一个字母。 为此,将新的文本模块添加到行列并更新以下内容:

高质量外链购买
  • 内容:d(只是单个字母)
  • 文本字体:Ubuntu Mono(任何等宽字体都可以)
  • 文字文字颜色:#ffffff
  • 文字文字大小:5vw(桌面),40px(手机)
  • 文字方向:居中
  • 最小高度:200px
  • 高度:20vw
  • 最大高度:300px

divi 弯曲的文字设计

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

  • 变换原点:100%(或底部)

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

position: absolute !important;

divi 弯曲的文字设计

创建和旋转其他文本模块

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

JasperAI 10000字免费额度试用

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

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

  • 内容:我
  • 变换旋转z轴:45度

divi 弯曲的文字设计

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

文本模块 3

WordPress备份工具updrafplus
  • 内容:v
  • 变换旋转z轴:90度

文本模块 4

  • 内容:我
  • 变换旋转z轴:135度

文本模块 5

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

文本模块 6

  • 内容:我
  • 变换旋转z轴:225度

文本模块 7

  • 内容:v
  • 变换旋转z轴:270度

文本模块 8

  • 内容:我
  • 变换旋转z轴:315度

divi 弯曲的文字设计

就是这样! 现在查看最终结果。

最后结果

divi 弯曲的文字设计

divi 弯曲的文字设计

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

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

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

divi 弯曲的文字设计

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

divi 弯曲的文字设计

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

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

  • 文本模块 1
    • 内容:e
    • 变换旋转z轴:0度
  • 文本模块 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度

这是迄今为止的结果。

divi 弯曲的文字设计

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

divi 弯曲的文字设计

这是最终的设计。

divi 弯曲的文字设计

divi 弯曲的文字设计

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

最后的想法

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

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

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

干杯!

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