堆叠排版以在 Divi 中创建 5 个独特的标题设计

堆叠排版是一种在 Divi 中创建漂亮标题设计的简单有效的技术。 排版通常被严格用作抽象的设计元素，其方式对搜索引擎阅读的内容没有真正的帮助。 但是您也可以通过一些 Divi 技术来设计实际标题（h1、h2 等）。

在本教程中，我将使用 Divi 创建 5 种不同的堆叠式标题设计。 希望您能够将这些设计用作您自己的标题设计的灵感。

让我们开始吧。

抢先看

这是 5 种设计的一瞥。

设计#1

设计#2

设计#3

设计#4

设计#5

入门

我们将从头开始构建这些设计。 因此，首先，创建一个新页面，为页面指定标题，然后部署 Visual Builder。 选择“从头开始构建”选项，您就可以开始构建了。

为了简化创建 5 个设计中的每一个的过程，我将复制部分以在下一个设计中抢占先机。 因此，最好从第一个设计开始，按顺序创建这些设计。

标题设计#1

对于第一个设计，我将向您展示如何垂直堆叠标题文本并将其居中放置在行的中间。 我还将在背景图像上添加两层渐变（一层在部分上，一层在行上），以提供平衡的半透明白色覆盖层，与白色页面背景完美融合。 结果很微妙，但非常独特和干净。

在我们添加我们的文本模块之前，让我们首先处理部分和行设置。 这将使以后更容易调整模块。

转到部分设置并更新以下内容：

添加背景图片（至少 1920px 宽）
背景渐变左颜色：#ffffff
背景渐变右侧颜色：rgba(255,255,255,0)
将渐变放在背景图像上方：是

接下来，按如下方式更新行设置：

背景渐变左颜色：rgba(255,255,255,0)
背景渐变右颜色：#ffffff
自定义宽度：100%
自定义填充：0px 顶部，0px 底部

现在我们可以将文本模块添加到三列行的中间列。 然后更新文本模块设置如下：

将内容框中的模拟内容替换为一个 h2 标头，其内容为“设计”，如下所示：

<h2>design</h2>

然后按如下方式更新其余设置：

标题 2 字体：Cairo
标题 2 字体粗细：常规
标题 2 字体样式：大写 (TT)
标题 2 文字大小：8vw
宽度：58%（桌面）、16%（平板电脑）、18%（智能手机）
模块对齐：居中
自定义边距：-10vw 顶部，-10vw 底部

自定义宽度值与 8vw 标题文本大小相结合是进行此设计的关键。 自定义宽度会挤压文本，使每个字母堆叠在一起。 由于包含文本模块的列大小从 1/3 变为全角，因此平板电脑上的宽度百分比值发生了巨大变化。 将标题文本设置为 vw（视口宽度）长度单位将允许文本与浏览器窗口大小完美缩放。

最后，让我们用左右两侧的边框来完成设计。

右边框宽度：4px
左边框宽度：4px

这是最终结果。

标题设计#2

对于下一个示例，我将稍微调整设计，以便将标题文本分成两半并堆叠，而不是将每个字母单独堆叠。 我还将在主标题下添加一个副标题以供再看。

在内容框中添加以下 h3 标题：

<h3>our process</h3>

然后给模块添加一个白色背景：

背景颜色：#ffffff

在设计选项卡下，更新以下内容：

标题 2 文字大小：10vw
宽度：100%（桌面）、32%（平板电脑）、33%（智能手机）
标题 3 字体：Ubuntu Condensed
标题 3 文本对齐：居中
标题 3 文字大小：32 像素（桌面）、20 像素（平板电脑）、16 像素（智能手机）

然后更新文本模块的间距以使其在移动设备上更具响应性：

自定义边距（平板电脑）：-5vw 顶部，-10vw
自定义保证金（智能手机）：-5vw 顶部，-12vw

现在取出部分和行中的背景渐变。

然后通过更新以下行设置为您的行添加一点填充：

自定义填充（桌面）：5vw 顶部，5vw 底部
自定义填充（平板电脑）：0vw 顶部，0vw 底部

这是最终结果。

标题设计#3

这次我们将向左偏移标题并返回垂直堆叠每个字母。 然后我将更改字体并为该行添加一个匹配的边框以补充模块边框。

复制第二个设计部分，然后按如下方式更新模块设置：

首先删除内容框中的h3标题。

标题 2 字体：Ubunto Condensed
标题 2 文字大小：6vw
宽度：54%（桌面）、16.4%（平板电脑）、17.5%（智能手机）
模块对齐：左（默认）

要针对移动设备进行调整，请更新以下间距：

自定义边距（平板电脑）：-15vw 底部
自定义保证金（智能手机）：-17vw 底部

现在转到行设置并更新以下内容以获得正确的间距。

自定义填充：2vw 顶部，2vw 底部，10vw 左

然后向行添加边框以补充模块的边框。

顶部边框宽度：4px
底部边框宽度：4px

现在剩下要做的就是将我们的模块拖到行的左列中。

查看最终结果。

标题设计#4

对于最后的标题设计，我将使堆叠的标题完全左对齐，然后添加一些颜色和一个很酷的框阴影效果。

首先更新行设置以去除左填充。

然后更新文本模块设置以包括以下内容：

背景颜色：#5b7796
文字颜色：浅
标题 2 字体：Cairo
标题 2 字体样式：默认
标题 2 文字大小：10vw

文字文字大小：5vw
自定义填充：2vw 顶部，2vw 底部，4vw 左，4vw 右

将边框样式恢复为默认值，然后按如下方式更新新的边框设置：

边框右侧宽度：0.2em
右边框颜色：#ffffff

底部边框宽度：0.2em
右边框颜色：#ffffff

现在您可能会注意到，边界的 0.2em 值可能看起来很小。 这是因为 em 值是基于 body 字体值的，为此我们特地将其更改为 5vw。 由于我们希望边框宽度随着标题的大小而调整，我们需要给正文文本一个 vw 长度单位值，该值将随浏览器大小而缩放。

现在让我们给它一个盒子阴影以获得漂亮的破碎网格效果。

盒子阴影：见截图
框阴影水平位置：20px
框阴影垂直位置：20px
阴影颜色：#5b7796
框阴影位置：外阴影

然后更新移动模块的大小。

宽度：50%（桌面）、13%（平板电脑）、16%（智能手机）

最后一步，取出行的填充和边框。

然后查看最终结果。

标题设计#5

对于最后一个标题设计，我们只需稍微调整间距以加宽文本模块。 这将创建与标题设计#2 类似的设计。

首先，打开文本模块并在 h2 标题下添加以下文本：

<h3>our process</h3>

然后更新设计设置如下：

标题 2 字体样式：大写 (TT)
宽度：94%（桌面）、29%（平板电脑）、29%（智能手机）

然后更新间距如下：

自定义边距：-8vw 顶部，-5vw 底部
自定义填充：4vw 顶部，4vw 底部

这是最终结果。

反应灵敏

让这些设计在移动设备上看起来很好的技巧是调整文本模块的大小和边距以随着浏览器窗口的缩小而缩放。 因此，如果某些内容不能正确缩放，您可能必须根据自己的目的调整这些属性。 这是设计在移动设备上的样子。

最后的想法

我希望本教程中的 5 个标题设计至少能为您自己的设计提供一些很好的起点。 正如您所料，该设计最适合较短（一个词）的标题，因为文本将垂直堆叠。 但是可以添加大量设计元素以使这些设计真正独一无二。 随意探索不同的字体、颜色和边框，使其成为您自己的。

如需更多灵感，请查看此垂直文本布局。 您可能还想了解如何使用更自定义的 css 方法创建横向和纵向文本。

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

干杯!