如何使您的徽標跨越 Divi 標題內的主要和次要菜單欄

在構建標題時，可能性是無限的。 如果您使用 Divi Theme Builder，您可以在 Divi 標題中包含任何您可以想像的內容。 今天，我們在您的資源列表中添加了另一個要求很高的標頭設計教程。 我們將向您展示如何使您的徽標跨越標題中的主要和次要菜單欄。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載全局標題模板

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

下載文件

免費下載

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

下載

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

1. 創建新的全局標題模板

轉到 Divi 主題生成器

首先轉到 WordPress 網站後端的 Divi Theme Builder。 在那裡，單擊“添加全局標題”。

添加新的全局標題

將出現一個下拉菜單。 要從頭開始構建，請繼續選擇“Build Global Header”。

2. 構建標題設計

添加專業部分

為了構建這個設計，我們將使用一個專業部分。

列結構

這是我們用於專業部分的列結構：

第 1 列背景顏色

添加專業部分後，打開其設置並應用第 1 列背景顏色。

• 第 1 列背景顏色：rgba(255,191,0,0.27)

漿紗

轉到設計選項卡並按如下方式更改尺寸設置：

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

間距

也修改間距設置。

• 頂部填充：0px
• 底部填充：0px
• 第 1 列頂部填充：0px
• 第 1 列底部填充：0px
• 第 2 列頂部填充：0px
• 第 2 列底部填充：0px

列 CSS ID

然後，轉到高級選項卡並將自定義 CSS ID 應用於兩列。

• 第 1 列 CSS ID：標題第一列
• 第 2 列 CSS ID：標題第二列

將圖像模塊添加到第 1 列

上傳圖片

是時候添加模塊了，從第 1 列中的圖像模塊開始。上傳您的徽標。

結盟

然後，轉到設計選項卡並更改圖像對齊方式。

• 圖像對齊：居中

漿紗

也將最大寬度應用於大小設置。

• 最大寬度：100px

能見度

並在較小的屏幕尺寸上隱藏模塊。

將第 1 行添加到第 2 列

列結構

在我們專業部分的第 2 列中，我們將使用以下列結構添加第一行：

背景顏色

打開行設置並使用以下背景顏色：

• 背景顏色：#a163ff

間距

移至行的設計選項卡並按如下方式更改間距設置：

• 頂部填充：10px
• 底部填充：10px
• 左填充：5%
• 右填充：5%

邊界

接下來應用以下邊框設置：

• 底部邊框寬度：3px
• 左邊框寬度：
  • 桌面：3px
  • 平板電腦和手機：0px
• 邊框顏色：#6c2eb9

主要元素 CSS

並在行的主要元素中使用以下 CSS 代碼行：

display: flex;
justify-content: center;
align-items: center;

在較小的屏幕尺寸上隱藏第 1 列和第 2 列

為了簡化較小屏幕尺寸的設計，我們將打開第 1 列和第 2 列設置，並在平板電腦和手機上隱藏它們。

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

添加社交網絡

是時候添加模塊了，從第 1 列中的社交媒體關注模塊開始。添加您選擇的社交網絡。

個人社交網絡背景顏色

單獨修改每個社交網絡的背景顏色。

• 背景顏色：#ffeeba

圖標設置

返回常規模塊設置並更改圖標顏色。

• 圖標顏色：#6c2eb9

邊界

在邊框設置中也添加一些圓角。

• 所有角落：100px

將文本模塊添加到第 2 列

添加內容

接下來，將文本模塊添加到第 2 列，其中包含您選擇的一些內容。

文字設置

更改模塊設置如下：

• 文字字體： Poppins
• 文本對齊：居中

將按鈕模塊添加到第 3 列

添加副本

在第 3 列中，我們唯一需要的模塊是按鈕模塊。 添加一些您選擇的副本。

按鈕對齊

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

• 按鈕對齊：
  • 桌面：右
  • 平板電腦和手機：中心

按鈕設置

接下來設置按鈕樣式。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：14px
• 按鈕文字顏色：#6c2eb9
• 按鈕背景顏色：#ffeeba
• 按鈕字體： Poppins
• 按鈕字體粗細：粗體
• 按鈕字體樣式：大寫

• 顯示按鈕圖標：是
• 按鈕圖標位置：左

間距

並應用以下填充值：

• 頂部填充：10px
• 底部填充：10px
• 左填充：50px
• 右填充：30px

將第 2 行添加到第 2 列

列結構

我們在我們部分的第二列中需要的下一行和最後一行使用以下列結構：

背景顏色

打開行設置並使用以下背景顏色：

• 背景顏色：rgba(161,99,255,0.1)

間距

接下來修改行的間距設置。

• 頂部填充：20px
• 底部填充：20px
• 左填充：5%
• 右填充：5%

邊界

然後，應用以下邊框設置：

• 左邊框寬度：
  • 桌面：3px
  • 平板電腦和手機：0px
• 左邊框顏色：#6c2eb9

將菜單模塊添加到列

選擇菜單

那麼我們在這一行中唯一需要的模塊是菜單模塊。 選擇您選擇的菜單。

在平板電腦和手機上上傳徽標

然後，僅在平板電腦和手機上上傳徽標。

刪除背景顏色

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

菜單文字設置

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

• 菜單字體： Poppins
• 菜單文字顏色：#6c2eb9
• 菜單文字大小：16px

下拉菜單設置

接下來應用以下下拉菜單行顏色：

• 下拉菜單行顏色：rgba(0,0,0,0)

圖標設置

然後，更改圖標設置。

• 購物車圖標顏色：#6c2eb9
• 搜索圖標顏色：#6c2eb9
• 漢堡菜單圖標顏色：#6c2eb9

漿紗

在平板電腦和手機上應用徽標最大寬度。

• 標誌最大寬度：
  • 平板電腦：70px
  • 電話：50px

將代碼模塊添加到第 1 列

為了改變我們的標題設計的比例，我們將做一些輕微的 CSS 修改。 要包含代碼，請在第 1 列中的圖像模塊下方添加一個代碼模塊。

添加樣式標籤

在代碼框內放置一些樣式標籤。

在樣式標籤之間插入 CSS 代碼

並將以下 CSS 代碼行放在樣式標記之間：

@media all and (min-width: 980px) {
#header-first-column {
width: 10% !important;
display: flex;
justify-content: center;
align-items: center;
}

#header-second-column {
width: 90% !important;
}
}

@media all and (max-width: 980px) {
#header-first-column {
display: none;
}
}

4. 保存 Divi 主題生成器更改

現在一切就緒，唯一要做的就是保存所有 Divi Theme Builder 更改並查看結果！

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何利用 Divi 標題發揮創意。 更具體地說，我們已經向您展示瞭如何讓您的徽標跨越標題中的主菜單欄和二級菜單欄。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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