如何使用 Divi 為您的全局標題設置動畫

已發表: 2019-12-20

您的標題是您網站上最重要的部分之一。它連接您的頁面、帖子和號召性用語。這也是您的訪問者自動尋找的內容之一，因此他們不會浪費任何時間來查找他們正在尋找的內容。如果您正在尋找一種強調標題的方法，那麼您會喜歡這篇文章。我們將向您展示如何使用 Divi 的 Theme Builder 為您定制的全局標題設置動畫。可能性是無限的，但我們將向您展示兩個動畫示例，您可以立即開始使用它們。您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

在我們深入學習本教程之前，讓我們快速瀏覽一下不同屏幕尺寸的兩個示例。

示例#1

桌面

動畫全局標題

移動的

動畫全局標題

示例#2

桌面

動畫全局標題

移動的

動畫全局標題

免費下載動畫全局標題

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

下載文件

免費下載

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

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

訂閱我們的 YouTube 頻道

1.轉到Divi Theme Builder並開始構建全局標題

轉到 Divi 主題生成器

首先轉到 WordPress 後端中的 Divi Theme Builder。

動畫全局標題

從頭開始構建全局標題

單擊“添加全局標題”並繼續選擇“構建全局標題”。

動畫全局標題

2. 構建全局標題塊設計

部分設置

間距

進入模板編輯器後，您可以開始構建全局標題。我們正在確保我們有一個“塊”設計，以便我們稍後可以將動畫添加到兩個不同的容器中；列+模塊。打開您可以在模板編輯器中看到的部分並刪除所有默認的頂部和底部填充。

頂部填充：0px
底部填充：0px

動畫全局標題

盒子陰影

接下來添加一個框陰影。

框陰影模糊強度：80px
陰影顏色：rgba(13,60,216,0.24)

動畫全局標題

Z索引

並確保您也在高級選項卡中增加了該部分的 z 索引。這將確保全局標題內容將出現在所有頁面/帖子內容的頂部。

Z指數：99999

動畫全局標題

添加新行

列結構

繼續使用以下列結構向該部分添加新行：

動畫全局標題

漿紗

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

使用自定義裝訂線寬度：是
天溝寬度：1
均衡柱高：是
寬度：100%
最大寬度：100%

動畫全局標題

間距

接下來刪除所有默認的頂部和底部填充。

頂部填充：0px
底部填充：0px

動畫全局標題

能見度

確保您也將行的溢出設置為“可見”。

水平溢出：可見
垂直溢出：可見

動畫全局標題

列設置（所有三個）

背景顏色

完成行設置後，您還需要設置列的樣式。打開每一列並相應地更改它們的背景顏色：

第 1 列背景顏色：#efefef
第 2 列背景顏色：#ffcb0f
第 3 列背景顏色：#2848ff

動畫全局標題

間距

還為每列添加一些自定義的頂部和底部填充。

頂部填充：0.5vw（台式機），1vw（平板電腦和手機）
底部填充：0.5vw（台式機），1vw（平板電腦和手機）

動畫全局標題

主要元素

為了確保所有列內容垂直居中，我們將向每列的主要元素添加三行 CSS 代碼。

display: flex;
flex-direction: column;
justify-content: center;

動畫全局標題

第 1 列 Z 索引

最後但並非最不重要的一點是，打開第 1 列設置並在可見性設置中增加 z 索引。

Z指數：10

動畫全局標題

將菜單模塊添加到第 1 列

選擇菜單

是時候添加模塊了，從第 1 列中的菜單模塊開始。選擇您選擇的菜單。

動畫全局標題

上傳標誌

接下來上傳您的徽標。

動畫全局標題

刪除背景

繼續刪除模塊的背景色。

動畫全局標題

佈局

轉到設計選項卡並確保以下設置適用於佈局：

樣式：左對齊
下拉菜單方向：向下

動畫全局標題

菜單文字設置

接下來設置文本設置的樣式：

菜單字體：蒙特塞拉特
菜單文字顏色：#000000
菜單文字大小：0.7vw（桌面）、2vw（平板電腦）、3vw（手機）

動畫全局標題

下拉菜單設置

隨著下拉菜單設置。

下拉菜單行顏色：#ffffff

動畫全局標題

圖標設置

並更改漢堡菜單圖標顏色。

漢堡菜單圖標顏色：#2848ff

動畫全局標題

漿紗

繼續更改不同屏幕尺寸的徽標最大寬度。

徽標最大寬度：6vw（桌面）、9vw（平板電腦）、13vw（手機）

動畫全局標題

間距

並通過添加一些左右邊距來完成模塊的設置。

左邊距：2vw
右邊距：2vw

動畫全局標題

將代碼模塊添加到第 1 列

為大眾響應性插入 CSS 代碼

現在，在菜單模塊中，我們已將視口寬度單位用於文本大小和間距值。我們這樣做是為了確保您可以在不同的桌面屏幕尺寸上放置最多 8 個菜單項，而不會分成兩行。我們需要確保菜單項之間的空間也是用 vw 單元創建的。為此，我們將向第 1 列添加一個代碼模塊並插入以下 CSS 代碼行：

<style>
.et-menu>li {
padding-left: 1vw !important;
padding-right: 1vw !important;
}
</style>

動畫全局標題

將社交媒體關注模塊添加到第 2 列

添加社交網絡

在下一欄，我們需要一個社交媒體關注模塊。添加您選擇的社交網絡。

動畫全局標題

單獨重置社交網絡風格

繼續重置每個網絡的設置。

動畫全局標題

結盟

通過更改模塊對齊來完成模塊的設置。

模塊對齊：居中

動畫全局標題

將按鈕模塊添加到第 3 列

添加副本

轉到下一列和最後一列。在那裡，我們只需要一個按鈕模塊。添加一些您選擇的副本。

動畫全局標題

結盟

移至設計選項卡並更改按鈕對齊方式。

按鈕對齊：居中

動畫全局標題

按鈕設置

通過設置按鈕樣式來完成模塊的設置。

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

動畫全局標題

按鈕邊框半徑：0px
按鈕字體：蒙特塞拉特
按鈕字體粗細：超粗
按鈕字體樣式：大寫

動畫全局標題

3. 為元素添加匹配動畫

全局標題動畫組合 #1

動畫全局標題

第 1 列動畫

現在我們已經構建了全局標題，是時候添加動畫了！要重新創建第一個動畫，請打開第 1 列設置並添加以下動畫：

動畫風格：縮放
動畫方向：向上
動畫開始不透明度：100%

動畫全局標題

第 2 列動畫

接下來將以下動畫設置添加到第 2 列：

動畫風格：縮放
動畫方向：下
動畫延遲：500ms
動畫開始不透明度：100%

動畫全局標題

第 3 列動畫

通過將以下動畫分配給第 3 列來完成列設置：

動畫風格：縮放
動畫方向：向上
動畫延遲：1000ms
動畫開始不透明度：100%

動畫全局標題

模塊動畫（所有三個模塊）

完成列設置後，單獨打開每個模塊並為它們使用以下動畫：

動畫風格：淡入淡出
動畫延遲：1500ms

動畫全局標題