• 主頁
  • 文章
  • 主題
  • 如何使用 Divi 的主題生成器創建自定義全屏全局標題

如何使用 Divi 的主題生成器創建自定義全屏全局標題

已發表: 2019-11-10

如果您正在尋找一種方法來為您的網站創建一個不佔用大量空間的全局標題，那麼您將會喜歡本教程。 我們將向您展示如何使用 Divi 的 Theme Builder 創建全屏全局標題。 向下滾動頁面時，您會在帖子/頁面上註意到的另外兩件事是 1) 左上角的可點擊漢堡圖標和 2) 右上角的徽標。 這兩個項目將在整個導航過程中跟隨您的訪問者，一旦單擊漢堡包圖標，自定義全屏菜單將打開並允許訪問者轉到您網站上的其他頁面。 這種設計的結果是高度響應，您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

全屏全局標題

移動的

全屏全局標題

免費下載全屏全局標題模板

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

下載文件
免費下載

免費下載

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

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

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

轉到 Divi 主題生成器

首先轉到Divi Theme Builder。

全屏全局標題

開始構建全局標題

然後，單擊“添加全局標題”並繼續單擊“構建全局標題”。

全屏全局標題

2. 將第 #1 部分專用於全屏導航

部分設置

背景顏色

是時候開始創作了！ 在模板編輯器中打開您可以看到的部分的設置，並將背景顏色更改為完全透明的顏色。

  • 背景顏色：rgba(255,255,255,0)

全屏全局標題

間距

接下來刪除該部分的默認頂部和底部填充。

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

全屏全局標題

CSS 類

繼續向該部分添加 CSS 類。 在這篇文章的後面，我們將需要這個 CSS 類來全屏顯示菜單。

  • CSS 類：部分轉換

全屏全局標題

默認可見性

然後，轉到可見性設置並隱藏溢出。 確保您也增加了該部分的 z 索引，這將確保該部分將保留在所有頁面和發佈內容的頂部。

  • 水平溢出：隱藏
  • 垂直溢出：隱藏
  • Z索引：999999

全屏全局標題

懸停可見性

添加 z 索引後，啟用懸停選項並確保在那裡也應用相同的 z 索引。

  • Z索引：999999

全屏全局標題

添加第 1 行

列結構

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

全屏全局標題

漿紗

還沒有添加任何模塊，打開行設置並允許行佔據屏幕的整個寬度。

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

全屏全局標題

間距

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

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

全屏全局標題

將文本模塊添加到列

添加內容

我們在這一行中唯一需要的模塊是文本模塊。 將您選擇的菜單符號添加到內容框中。 在本教程中，我們使用“≡”。

全屏全局標題

文字設置

轉到模塊的設計選項卡並按如下方式更改文本設置：

  • 文字字體：Abril Fatface
  • 文字顏色：#000000
  • 文字大小：3vw（桌面）、5vw（平板電腦）、7vw（手機）
  • 文本行高：1em

全屏全局標題

間距

接下來修改不同屏幕尺寸的間距值。

  • 頂部填充：2vw（桌面）、3.5vw（平板電腦）、5vw（手機）
  • 底部填充：2vw（桌面）、3.5vw（平板電腦）、5vw（手機）
  • 左填充：3vw（桌面）、4vw（平板電腦）、7vw（手機）
  • 右填充：3vw（桌面）、4vw（平板電腦）、7vw（手機）

全屏全局標題

CSS ID

該文本模塊將作為全屏菜單的觸發器。 這就是為什麼我們需要為文本模塊分配一個 CSS ID。 在本教程的後面，我們將在代碼中使用 CSS ID。

  • CSS ID：菜單打開

全屏全局標題

添加第 2 行

列結構

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

全屏全局標題

漿紗

打開行設置並更改大小設置如下：

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

全屏全局標題

間距

也修改間距值。

  • 上邊距：2vw（桌面）、4vw（平板電腦）、6vw（手機）
  • 下邊距：2vw（桌面）、4vw（平板電腦）、6vw（手機）
  • 左填充：19vw
  • 右填充：19vw

全屏全局標題

將文本模塊添加到列

添加內容

然後，向該列添加一個新的文本模塊。 此文本模塊代表您的第一個菜單項。

全屏全局標題

添加鏈接

確保接下來添加到模塊的正確鏈接。

  • 模塊鏈接網址：#

全屏全局標題

文字設置

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

  • 文字字體： Poppins
  • 文字字體粗細：半粗體
  • 文字顏色：#000000
  • 文字大小：3vw（桌面）、7vw（平板電腦）、8vw（手機）
  • 文字字母間距：-0.1vw
  • 文本行高：1em

全屏全局標題

間距

接下來修改模塊的間距設置。

  • 最高利潤率：1vw
  • 底部填充：2vw
  • 左填充：3vw

全屏全局標題

邊界

也添加一個底部邊框。

  • 底部邊框寬度：1px
  • 底部邊框顏色：#333333

全屏全局標題

CSS 類

並通過添加自定義 CSS 類來完成模塊的設置。 您需要將此 CSS 類添加到您放置在您的部分中的每個菜單項中。

全屏全局標題

克隆文本模塊三次

完成第一個文本模塊後，您可以根據需要多次復制它（取決於要在菜單中顯示的菜單項）。 但是，請確保模塊不超過屏幕的高度。

全屏全局標題

更改每個副本的內容和鏈接

您必須更改每個副本的內容和鏈接。

全屏全局標題

添加社交媒體關注模塊

添加選擇的社交網絡

我們在這一行中需要的下一個也是最後一個模塊是社交媒體關注模塊。 添加您要顯示的所有社交網絡。

全屏全局標題

重置個人社交網絡風格

繼續分別重置每個社交網絡的樣式。

全屏全局標題

圖標設置

然後，進入模塊的設計選項卡，修改圖標設置如下：

  • 圖標顏色：#000000
  • 使用自定義圖標大小：是
  • 圖標字體大小：1vw（桌面）、2vw（平板電腦）、3vw（手機）

全屏全局標題

間距

也添加一些左填充。

  • 左填充：3vw

全屏全局標題

CSS 類

通過添加 CSS 類來完成模塊的設置。

全屏全局標題

添加第 3 行

列結構

本節中我們需要的最後一行包含以下列結構：

全屏全局標題

間距

通過刪除所有默認的頂部和底部填充來限制此行佔用的空間。

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

全屏全局標題

將代碼模塊添加到列

插入 JQuery 和 CSS 代碼

然後，添加一個 Code Module 並插入一些 CSS 和 JQuery 代碼以實現全屏菜單功能。 確保您手動將 JQuery 代碼放置在 script 標籤之間，並將 CSS 代碼放置在 style 標籤之間，如下面的打印屏幕所示。 

jQuery(function($){
$('#menu-open').click(function() {
$('.section-transform').toggleClass('section-transform-active');
});
$('.menu-item-click').click(function() {
$('.section-transform').removeClass('section-transform-active');
});
});

.section-transform{
cursor: pointer;    
}
.section-transform-active {
height: 100% !important;
width: 100% !important;
z-index: 99999 !important;
background-color: #FFFFFF !important; 
}   
.section-transform {
-webkit-transition: all 0.5s ease !important;
-moz-transition: all 0.5s ease !important;
-o-transition: all 0.5s ease !important;
-ms-transition: all 0.5s ease !important;
transition: all 0.5s ease !important;
}

全屏全局標題

3. 將第 2 部分專用於右上角的徽標

部分設置

背景顏色

進入下一節！ 此部分將包含右上角的徽標。 打開部分設置並將背景顏色更改為完全透明的。

  • 背景顏色：rgba(0,0,0,0)

全屏全局標題

間距

接下來刪除該部分的默認頂部和底部填充。

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

全屏全局標題

默認可見性

也增加部分的 z 索引。

  • Z指數：99999

全屏全局標題

懸停可見性

在 z 索引上啟用懸停選項並確保相同的值也適用於懸停。

  • Z指數：99999

全屏全局標題

添加新行

列結構

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

全屏全局標題

漿紗

打開行設置並更改大小設置如下：

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

全屏全局標題

間距

也刪除該行的默認頂部和底部填充。

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

全屏全局標題

將圖像模塊添加到列

上傳PNG標誌圖片

我們在這一行和部分中唯一需要的模塊是圖像模塊。 上傳您的半透明徽標圖像文件。

全屏全局標題

漿紗

轉到模塊的大小設置並強制全角。

  • 強制全角：是

全屏全局標題

間距

通過在不同的屏幕尺寸上添加一些自定義填充來完成模塊的設置。

  • 頂部填充：2.5vw（桌面）、3.5vw（平板電腦）、5vw（手機）
  • 底部填充：2.5vw（台式機）、3.5vw（平板電腦）、5vw（手機）
  • 左填充：3vw（桌面）、4vw（平板電腦）、7vw（手機）
  • 右填充：3vw（桌面）、4vw（平板電腦）、7vw（手機）

全屏全局標題

4. 附加部分設置

第 1 節

漿紗

完成兩個部分和其中的所有模塊後，就可以更改它們的大小了。 打開第一部分並應用以下寬度和高度值：

  • 寬度：8vw（桌面）、11vw（平板電腦）、18vw（手機）
  • 高度：7vw（桌面）、11vw（平板電腦）、18vw（手機）

全屏全局標題

默認主元素

然後，轉到該部分的高級選項卡並添加以下 CSS 代碼行： 

position: fixed;
top: 0;

全屏全局標題

懸停主元素

確保在懸停時應用相同的 CSS 代碼行。 

position: fixed;
top: 0;

全屏全局標題

第 2 節

漿紗

繼續打開第二部分的設置並更改不同屏幕尺寸的寬度。

  • 寬度：13vw（桌面）、21vw（平板電腦）、30vw（手機）

全屏全局標題

默認主元素

然後，轉到高級選項卡並添加以下 CSS 代碼行： 

position: fixed;
right: 0;
top: 0;

全屏全局標題

懸停主元素

確保在懸停時應用相同的 CSS 代碼行。 

position: fixed;
right: 0;
top: 0;

全屏全局標題

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

完成上述所有步驟後，您可以保存全局標題模板並在您的網站上查看結果！

全屏全局標題

全屏全局標題

預覽

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

桌面

全屏全局標題

移動的

全屏全局標題

最後的想法

在本教程中，我們向您展示瞭如何使用 Divi 的 Theme Builder 創建全屏全局標題。 我們在設計中添加了兩個固定元素； 左上角的漢堡包圖標和右上角的徽標。 單擊時，漢堡包圖標會打開一個全屏菜單，該菜單使用 Divi 的內置元素製作。 您可以隨意使用 Divi 來設計這個全屏菜單！ 在本教程開始時，您還可以免費下載 JSON 文件。 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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