WordPress divi主题

使用 Divi 的文本模块在 Divi 页面设计中创建块元素

| 5月 19, 2022 | Divi主题使用教程 | 0 条评论

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

文本模块是您使用 Divi 创建的任何页面设计的重要组成部分,我相信这是我们都可以同意的。 通常,它们用于以直接的方式显示文本。 但是您也可以使用文本模块来创建令人惊叹的设计元素。 在之前的博客文章中,我们已经向您展示了如何使用文本来提升您的网页设计。

google广告开户

在本教程中,我们将继续添加选项供您在设计页面和使用文本模块时进行选择。 您可能知道也可能不知道,您可以在同一个文本模块中组合几种不同的文本类型。 此外,一个模块可以包含多个标题、段落、链接等。 在这篇文章中,我们将利用所有这些文本类型来在我们的页面设计中创建令人惊叹的块元素。

让我们开始吧!

预览

在我们深入教程之前,让我们看一下不同屏幕尺寸的最终结果。

块元素

让我们开始吧!

添加新的常规部分

背景颜色

首先向您当前正在处理的页面添加一个新的常规部分。 然后,打开部分设置并更改背景颜色。

  • 背景颜色:#000000

块元素

间距

接下来转到您部分的间距设置并添加一些自定义填充值。

  • 顶部填充:280 像素(桌面)、150 像素(平板电脑和手机)
  • 底部填充:280 像素(桌面)、150 像素(平板电脑和手机)

块元素

添加新行

立柱结构

修改完部分设置后,使用以下列结构添加新行:

WordPress divi主题

块元素

浆纱

在不添加任何模块的情况下,打开行设置,在 Sizing 设置中使行占据屏幕的整个宽度。

  • 使这一行全宽:是
  • 使用自定义装订线宽度:是
  • 天沟宽度:1

块元素

间距

最后,在 Spacing 设置中添加一些自定义填充。

  • 第 1 列左侧填充:100 像素(台式机和平板电脑),50 像素(手机)
  • 第 2 列自定义填充:50px
  • 第 3 列自定义填充:50px

块元素

将标题文本模块添加到第 1 列

内容框

是时候开始添加不同的模块了! 我们在第一列中需要的第一个模块是文本模块。 在内容框中添加一些 H2 内容。

块元素

H2 文本设置

然后,转到 H2 文本设置并进行一些更改:

  • 标题 2 字体:Source Code Pro
  • 标题 2 字体样式:大写
  • 标题 2 文本颜色:#ffffff
  • 标题 2 文字大小:100px
  • 标题 2 字母间距:24px

块元素

间距

通过使用一些负的上边距来减少顶部的空间。

fiverr建站WordPress程序员

块元素

将描述文本模块添加到第 1 列

文字设置

第一列中需要的第二个模块是描述文本模块。 添加内容后,转到文本设置并进行一些更改:

  • 文字字体:Source Code Pro
  • 文字颜色:#ffffff
  • 文本方向:对齐

块元素

浆纱

同时减小文本模块的宽度。

块元素

独立站选品工具

间距

最后但并非最不重要的一点是,在此文本模块和间距设置中的前一个模块之间创建一些空间。

  • 上边距:200px(台式机),100px(平板电脑和手机)
  • 底边距:100px(平板电脑和手机)

块元素

将块文本模块添加到第 2 列

内容框

是时候进入第二列了! 在这里,我们将使用文本模块来创建块元素。 完成这项工作的一个重要部分是正确构建内容框。 在下面的打印屏幕中,您可以看到我们正在使用 H3 标题、H4 标题、段落和链接。 在 H4 标题和段落之间,我们确保还留有一些额外的空间。

块元素

背景颜色

向文本模块添加黑色背景颜色。

高质量外链购买
  • 背景颜色:#000000

块元素

文字设置

我们将分别修改每一种文本类型。 首先修改段落设置。

  • 文字字体:Source Code Pro
  • 文字方向:左
  • 文字颜色:浅色

块元素

链接文本设置

然后,对链接设置进行一些额外的更改。

  • 链接字体样式:大写和下划线
  • 链接下划线颜色:#ffffff
  • 链接文字颜色:#edf000
  • 链接文字大小:16px
  • 链接字母间距:3px

块元素

JasperAI 10000字免费额度试用

标题 3 文字设置

我们内容框中的H3标题需要如下设置:

  • 标题 3 字体样式:大写
  • 标题 3 文字大小:33px

块元素

标题 4 文字设置

继续打开 H4 文本设置并在那里进行一些更改。

  • 标题 4 文本颜色:#4f4f4f
  • 标题 4 文字大小:19px
  • 标题 4 字母间距:-1px

块元素

浆纱

为了创建我们想要的确切形状,接下来我们将减小文本模块的宽度。

WordPress备份工具updrafplus
  • 宽度:88%(台式机)、60%(平板电脑)、90%(手机)

块元素

间距

我们还需要更改间距设置。

  • 左边距:200px(平板电脑)
  • 上边距:50px
  • 底部填充:50px
  • 左填充:50px
  • 右内边距:50px

块元素

边界

然后,为文本模块添加一个微妙的边框。

  • 边框宽度:2px
  • 边框颜色:#424242

块元素

盒子阴影

最后,添加一个彩色盒子阴影。

  • 盒子阴影水平位置:19px
  • 盒子阴影垂直位置:16px
  • 盒子阴影传播强度:-4px
  • 阴影颜色:#f2ff00

块元素

克隆块文本模块两次并放入第 3 列

为了节省时间,我们将克隆我们创建了两次的块文本模块,并将两个副本放在行的第三列中。

块元素

红色文本模块修改

更改链接文本颜色

打开第三列中的第一个文本模块并更改链接颜色。

  • 链接文字颜色:#e02b20

更改间距

然后,转到间距设置并添加一些上边距。

  • 上边距:-150px(台式机)、-20px(平板电脑)、50px(手机)

块元素

更改框阴影颜色

将框阴影颜色更改为与链接文本相同的颜色。

块元素

蓝色文本模块修改

更改链接文本颜色

更改第三列中第二个文本模块的链接颜色。

  • 链接文字颜色:#0ff3ff

块元素

更改尺寸

接下来更改尺寸设置。

  • 尺寸:67%(台式机)、60%(平板电脑)、90%(手机)

块元素

更改间距

要在此模块和其他两个文本模块之间创建一些重叠,请使用自定义边距值。

  • 上边距:-20px(台式机)、-30px(平板电脑)、50px(手机)
  • 左边距:-160px(桌面),200px(平板),0px(手机)

块元素

更改框阴影颜色

最后,将框阴影颜色更改为与链接文本相同的蓝色,您就完成了!

块元素

预览

现在我们已经完成了所有步骤,让我们最后看看不同屏幕尺寸的结果。

块元素

最后的想法

您会惊讶于结合使用文本模块和 Divi 的内置选项可以实现多少独特的设计。 不需要额外的 CSS 代码。 在这篇文章中,我们向您展示了如何使用不同的文本类型在您的 Divi 页面设计中创建令人惊叹的块元素。 如果您有任何问题或建议,请务必在下面的评论部分发表评论!

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