如何使用 Divi 將 CSS 文本塊動畫添加到標題中

您的標題是主頁最重要的部分之一。 它通常是人們閱讀的第一篇副本，這使它成為他們的第一印象。 像任何其他第一印像一樣，您希望它是一個好的印象。 現在，如果您正在尋找一種創造性的方式來展示您的標題，那麼您會喜歡這篇文章。 在本教程中，我們將向您展示如何將 CSS 文本塊動畫添加到您的標題，您還可以免費下載佈局的 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。

桌面

移動的

免費下載文本塊動畫佈局

要了解自由文本塊動畫佈局，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。

下載文件

免費下載

加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。

下載

您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！

讓我們開始重建吧！

添加第 1 節

漸變背景

首先將常規部分添加到新頁面或您正在處理的頁面。 打開部分設置並應用以下漸變背景：

• 顏色 1：#ff0f2b
• 顏色 2：#c10b1a
• 漸變類型：線性
• 梯度方向：63deg

間距

轉到該部分的設計選項卡，並在不同的屏幕尺寸上應用以下自定義頂部和底部填充值：

• 頂部填充：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>

間距

轉到模塊的設計選項卡並刪除所有默認的底部填充。

• 下邊距：0px

將按鈕模塊添加到列

添加副本

我們需要的下一個模塊是按鈕模塊。 輸入您選擇的一些副本。

按鈕設置

轉到模塊的設計選項卡並相應地更改按鈕設置：

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#000000
• 按鈕邊框寬度：0px

• 按鈕字體：Work Sans

間距

然後，轉到間距設置並在不同的屏幕尺寸上應用一些自定義邊距和填充值。

• 上邊距：3vw（桌面），
• 左邊距：20vw（桌面和平板電腦），15vw（手機）
• 頂部填充：1.2vw（桌面）、2vw（平板電腦）、4vw（手機）
• 底部填充：1.2vw（台式機）、2vw（平板電腦）、4vw（手機）
• 左填充：1.8vw（桌面）、3vw（平板電腦）、6vw（手機）
• 右填充：1.8vw（桌面）、3vw（平板電腦）、6vw（手機）

動畫片

也可以自定義動畫設置。

• 動畫風格：翻轉
• 動畫方向：下
• 動畫延遲：2000ms
• 動畫強度：100%
• 動畫開始不透明度：100%
• 動畫速度曲線：漸入漸出
• 動畫重複：一次

添加第 2 節

繼續在上一個正下方添加一個新的常規部分。

間距

打開部分設置並刪除默認的頂部填充。

• 頂部填充：0px

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並允許行佔據部分容器的整個寬度。

• 寬度：100%
• 最大寬度：100%

將文本模塊添加到列

添加內容

然後，添加一個帶有您選擇的一些描述內容的文本模塊。

背景顏色

添加白色背景色。

• 背景顏色：#ffffff

文字設置

轉到模塊的設計選項卡並相應地修改文本設置：

• 文字字體：Work Sans
• 文字顏色：#9b9b9b
• 文字大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）
• 文本行高：2.6em

間距

也可以在不同的屏幕尺寸上添加一些自定義間距值。

• 上邊距：-5vw（桌面）、-20vw（平板電腦）、-27vw（手機）
• 左邊距：20vw（桌面）、13vw（平板電腦）、8vw（手機）
• 右邊距：20vw（桌面）、13vw（平板電腦）、8vw（手機）
• 頂部填充：5vw（台式機）、7vw（平板電腦和手機）
• 底部填充：5vw（台式機）、7vw（平板電腦和手機）
• 左填充：3vw（桌面）、5vw（平板電腦）、6vw（手機）
• 右填充：3vw（桌面）、5vw（平板電腦）、6vw（手機）

盒子陰影

並通過應用微妙的框陰影來完成模塊設置。 就是這樣！

• 框陰影模糊強度：50px
• 陰影顏色：rgba(0,0,0,0.1)

預覽

現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在標題中添加 CSS 文本塊動畫。 確保您的標題可見並從頭開始閱讀非常重要，在標題中添加動畫肯定會有所幫助！ 您也可以免費下載佈局的 JSON 文件。 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。