如何使用 Divi 的主題生成器創建旋轉的全局標題

自從 Divi 主題生成器問世以來，我們一直試圖引導您完成創建自己的全局標題的過程。 我們將通過向您展示如何創建顯示在頁面和帖子左側的旋轉全局標題來繼續這樣做。 標題的背景顏色是完全透明的，允許頁面/帖子內容顯示出來。 我們確保在滾動時全局標題保持固定在左側，並且我們已經將菜單轉換為適合移動設備的版本。 在本用例教程中，我們將向您展示如何從頭開始重新創建設計，您還可以免費下載模板 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載旋轉的全局標題模板

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

下載文件

免費下載

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

下載

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

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

轉到 Divi 主題生成器

首先轉到 WordPress 網站上的 Divi Theme Builder。

開始構建全局標題

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

2. 開始構建旋轉側全局標題

添加新部分

背景顏色

進入模板編輯器後，您可以打開已經存在的部分並更改不同屏幕尺寸的背景顏色。

• 背景顏色：rgba(0,0,0,0)（桌面），#FFFFFF（平板電腦和手機）

漿紗

接下來修改部分的大小設置。

• 寬度：5vw（台式機），100%（平板電腦和手機）
• 最小高度：100vw（台式機），汽車（平板電腦和手機）

間距

也添加一些自定義的頂部和底部填充。

• 頂部填充：2vw
• 底部填充：2vw

盒子陰影

然後，轉到框陰影設置並在不同的屏幕尺寸上添加自定義框陰影。

• 框陰影水平位置：32px（桌面），0px（平板電腦和手機）
• 框陰影模糊強度：49px
• 框陰影傳播強度：0px（桌面），19px（平板電腦和手機）
• 陰影顏色：rgba(0,0,0,0.12)

默認主元素

我們還將通過向該部分的主要元素添加幾行 CSS 代碼來確保旋轉的全局標題保持固定在左側。

position: fixed;
top: 0;
display: flex;
flex-wrap: wrap;
align-content: center;

懸停主元素

確保您也將這些相同的 CSS 代碼行添加到該部分的懸停主要元素中。

position: fixed;
top: 0;

默認可見性

然後，在可見性設置中增加 z 索引。

• Z指數：99999

懸停可見性

確保在懸停時應用相同的值。

• Z指數：99999

添加新行

列結構

完成部分設置後，繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置並更改大小設置。

• 使用自定義裝訂線寬度：是
• 天溝寬度：1

間距

也刪除所有默認的頂部和底部填充。

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

列設置

主要元素（平板電腦和手機）

在平板電腦和手機上，我們追求完全不同的外觀和感覺。 我們將把三個不同的模塊並排放置。 為此，我們需要添加一些 CSS 代碼。 打開列的設置，進入高級選項卡，將以下幾行CSS代碼插入到平板電腦和手機的主要元素中：

display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;

將圖像模塊添加到列

上傳標誌

是時候開始添加模塊了！ 我們需要的第一個模塊是圖像模塊。 上傳您選擇的半透明徽標圖像文件。

漿紗

然後，轉到設計選項卡並更改不同屏幕尺寸的寬度。

• 寬度：4vw（桌面）、12vw（平板電腦）、16vw（手機）

變換比例

接下來通過修改變換比例設置來增加模塊的大小。

• 右：170%（桌面）、100%（平板電腦和手機）
• 底部：170%（台式機）、100%（平板電腦和手機）

轉換 翻譯

並通過在桌面上添加底部轉換翻譯值將模塊推到右側。

• 底部：1vw（台式機），0vw（平板電腦和手機）

將菜單模塊添加到列

選擇菜單

我們需要的下一個模塊是菜單模塊。 選擇您選擇的菜單。

刪除背景顏色

接下來刪除模塊的背景顏色。

佈局

然後，轉到設計選項卡並更改佈局設置。

• 風格：居中
• 下拉菜單方向：向下

默認菜單文本

也修改菜單文本設置。

• 活動鏈接顏色：#cecece
• 菜單字體：蒙特塞拉特
• 菜單字體粗細：粗體
• 菜單文字顏色：#000000
• 菜單文字大小：0.9vw（桌面）、2vw（平板電腦）、2.5vw（手機）

懸停菜單文本

在懸停時更改菜單文本顏色。

• 菜單文本顏色：#afafaf

下拉式菜單

我們還對下拉菜單設置進行了一些更改。

• 下拉菜單行顏色：#000000
• 下拉菜單文本顏色：#000000

圖標

接下來更改漢堡菜單圖標顏色。

• 漢堡菜單圖標顏色：#000000

間距

並在不同的屏幕尺寸中添加一些自定義邊距值。

• 上邊距：18vw（台式機），0vw（平板電腦和手機）
• 下邊距：18vw（台式機），0vw（平板電腦和手機）
• 左邊距：-13vw（桌面），0vw（平板電腦和手機）
• 右邊距：-13vw（台式機），0vw（平板電腦和手機）

變換旋轉

現在，為了創建旋轉效果，我們將使用模塊的變換旋轉值。

• 左：270deg（桌面），0deg（平板電腦和手機）

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

添加社交網絡

進入社交媒體關注模塊，這是我們完成旋轉全局標題所需的下一個也是最後一個模塊。 添加一些您選擇的社交網絡。

重置社交網絡風格

繼續分別重置每個社交網絡的設置。 這將幫助我們擺脫它們的背景顏色。

結盟

然後，轉到模塊的設計選項卡並更改不同屏幕尺寸的模塊對齊方式。

• 對齊方式：左（桌面），右（平板電腦和手機）

圖標設置

最後但並非最不重要的一點是，也要更改圖標設置。

• 圖標顏色：#000000
• 使用自定義圖標大小：是
• 圖標字體大小：2.1vw

3. 保存構建器更改並查看結果

完成所有模塊後，您可以保存模板，退出 Divi Theme Builder 並在您的網站上查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的新主題生成器創建一個旋轉的全局標題。 我們還將菜單欄轉換為移動設備上高度適合移動設備的版本。 除非另外選擇，否則我們創建的全局標題將顯示在您的所有帖子和頁面上。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！

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