文本模块是您使用 Divi 创建的任何页面设计的重要组成部分，我相信这是我们都可以同意的。 通常，它们用于以直接的方式显示文本。 但是您也可以使用文本模块来创建令人惊叹的设计元素。 在之前的博客文章中，我们已经向您展示了如何使用文本来提升您的网页设计。
在本教程中，我们将继续添加选项供您在设计页面和使用文本模块时进行选择。 您可能知道也可能不知道，您可以在同一个文本模块中组合几种不同的文本类型。 此外，一个模块可以包含多个标题、段落、链接等。 在这篇文章中，我们将利用所有这些文本类型来在我们的页面设计中创建令人惊叹的块元素。
让我们开始吧！
预览
在我们深入教程之前，让我们看一下不同屏幕尺寸的最终结果。
让我们开始吧！
添加新的常规部分
背景颜色
首先向您当前正在处理的页面添加一个新的常规部分。 然后，打开部分设置并更改背景颜色。
- 背景颜色：#000000
间距
接下来转到您部分的间距设置并添加一些自定义填充值。
- 顶部填充：280 像素（桌面）、150 像素（平板电脑和手机）
- 底部填充：280 像素（桌面）、150 像素（平板电脑和手机）
添加新行
立柱结构
修改完部分设置后，使用以下列结构添加新行：
浆纱
在不添加任何模块的情况下，打开行设置，在 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
间距
通过使用一些负的上边距来减少顶部的空间。
将描述文本模块添加到第 1 列
文字设置
第一列中需要的第二个模块是描述文本模块。 添加内容后，转到文本设置并进行一些更改：
- 文字字体：Source Code Pro
- 文字颜色：#ffffff
- 文本方向：对齐
浆纱
同时减小文本模块的宽度。
间距
最后但并非最不重要的一点是，在此文本模块和间距设置中的前一个模块之间创建一些空间。
- 上边距：200px（台式机），100px（平板电脑和手机）
- 底边距：100px（平板电脑和手机）
将块文本模块添加到第 2 列
内容框
是时候进入第二列了！ 在这里，我们将使用文本模块来创建块元素。 完成这项工作的一个重要部分是正确构建内容框。 在下面的打印屏幕中，您可以看到我们正在使用 H3 标题、H4 标题、段落和链接。 在 H4 标题和段落之间，我们确保还留有一些额外的空间。
背景颜色
向文本模块添加黑色背景颜色。
- 背景颜色：#000000
文字设置
我们将分别修改每一种文本类型。 首先修改段落设置。
- 文字字体：Source Code Pro
- 文字方向：左
- 文字颜色：浅色
链接文本设置
然后，对链接设置进行一些额外的更改。
- 链接字体样式：大写和下划线
- 链接下划线颜色：#ffffff
- 链接文字颜色：#edf000
- 链接文字大小：16px
- 链接字母间距：3px
标题 3 文字设置
我们内容框中的H3标题需要如下设置：
- 标题 3 字体样式：大写
- 标题 3 文字大小：33px
标题 4 文字设置
继续打开 H4 文本设置并在那里进行一些更改。
- 标题 4 文本颜色：#4f4f4f
- 标题 4 文字大小：19px
- 标题 4 字母间距：-1px
浆纱
为了创建我们想要的确切形状，接下来我们将减小文本模块的宽度。
很多做跨境电商的朋友往往需要外国人的服务，比如录音、社媒代运营等等。我们整理出来很多低价且高质量的外国人服务商，分享给大家。
fiverr上15美元的海外社媒代运营服务
fiverr上25美元的Twitch设计服务
fiver上10美元的短视频广告投放服务
fiverr上15美元的视频编辑服务
fiverr上20美元的谷歌广告投放服务
fiverr上5美元的谷歌SEO服务
fiverr上10美元的英文文章撰写服务
fiverr上20美元的CMS网站建站服务
fiverr上40美元的手机APP开发服务
fiverr上30美元的linkedin代运营服务
fiverr上10美元的Guest Post做客博文服务
fiverr上15美元的红人营销服务
fiverr上20美元的discord运营服务
fiverr上15美元的社群维护服务
fiverr上10美元的shopify店铺优化服务
- 宽度：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 页面设计中创建令人惊叹的块元素。 如果您有任何问题或建议，请务必在下面的评论部分发表评论！
