如何使用 Divi 将 CSS 文本块动画添加到您的标题

由 WordPress外贸独立站推广教学 | 5月 7, 2022 | Divi主题使用教程 | 0 条评论

您的标题是您主页最重要的部分之一。它通常是人们阅读的第一篇文案，这会给他们留下第一印象。像任何其他第一印象一样，您希望它是一个好的第一印象。现在，如果您正在寻找一种创造性的方式来展示您的标题，您会喜欢这篇文章的。在本教程中，我们将向您展示如何将 CSS 文本块动画添加到您的标题中，您还可以免费下载布局的 JSON 文件！

让我们开始吧。

预览

在深入学习本教程之前，让我们快速浏览一下不同屏幕尺寸的结果。

桌面

文本块动画

移动的

文本块动画

免费下载文本块动画布局

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

让我们开始重建吧！

添加第 1 节

渐变背景

首先将常规部分添加到新页面或您正在处理的页面。打开部分设置并应用以下渐变背景：

颜色 1：#ff0f2b
颜色 2：#c10b1a
渐变类型：线性
渐变方向：63度

文本块动画

间距

转到该部分的设计选项卡，并在不同的屏幕尺寸上应用以下自定义顶部和底部填充值：

顶部填充：7vw（桌面）、20vw（平板电脑）、25vw（手机）
底部填充：7vw（台式机）、20vw（平板电脑）、25vw（手机）

文本块动画

边界

也为该部分添加边框。

边框宽度：2vw（上、左、右）
底部边框宽度：0vw
边框颜色：#ffffff

文本块动画

添加新行

立柱结构

继续使用以下列结构向该部分添加新行：

文本块动画

浆纱

打开行设置并相应地更改大小设置：

宽度：100%
最大宽度：100%

文本块动画

将文本模块添加到列

添加H1内容

然后，添加一个带有您选择的 H1 标题的文本模块。

文本块动画

为 H1 标题中的每个单词添加 div 标签

切换到标题副本的文本选项卡，并为标题的每个单词添加不同的 div。每个单词的 CSS ID 需要不同。

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

文本块动画

H1 文字设置

转到模块的设计选项卡并相应地修改 H1 文本设置：

标题字体：Work Sans
标题字体粗细：中
标题文字颜色：#ffffff
标题文字大小：4vw（桌面）、5vw（平板电脑）、6vw（手机）
标题行高度：1.4em

文本块动画

间距

然后，修改不同屏幕尺寸的边距值。

左边距：20vw（台式机和平板电脑），15vw（手机）
右边距：35vw（桌面）、20vw（平板电脑）、15vw（手机）

文本块动画

将代码模块添加到列

插入 CSS 代码

为了使文本块动画应用于我们的标题，我们需要一些 CSS 代码。我们将该 CSS 代码添加到新的代码模块中。

<style>

.display-state {
display: inline !important;
}

#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
	        animation: slide-right 0.5s linear 0.3s both;
}

#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
	        animation: slide-right 0.5s linear 0.6s both;
}

#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
	        animation: slide-right 0.5s linear 0.9s both;
}

#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
	        animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
	        animation: slide-right 0.5s linear 1.5s both;
}

@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}

1% {
opacity: 1;
}
}

</style>

文本块动画