如何將兩個並排按鈕添加到您的 Divi 全局標題

對於大多數網站來說，在您的頁面上有明確的號召性用語是必要的。 還有什麼比將它們放在標題中更能吸引人們注意一些最重要的 CTA 的方法呢？ 在今天的教程中，我們將向您展示如何使用 Divi 的 Theme Builder 向全局標題添加兩個並排按鈕。 其中一個按鈕是主要的，另一個是次要的。 您還可以免費下載全局標頭的 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載全局標題模板

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

下載文件

免費下載

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

下載

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

1.轉到Divi Theme Builder並創建全局標題

轉到 Divi 主題生成器

首先轉到Divi Theme Builder，然後單擊“添加全局標題”。

構建全局標題

單擊“構建全局標題”繼續。

2. 構建全局頁眉設計

添加新部分

間距

進入模板編輯器後，您會注意到一個部分。 打開部分設置並刪除所有默認的頂部和底部填充。

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

Z索引

確保在可見性設置中也增加了部分的 z 索引。 這將確保全局標題內容將出現在所有頁面和帖子內容的頂部。

• Z指數：99999

添加新行

列結構

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

漿紗

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

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

間距

還要修改行的左右填充值。

• 左填充：2vw（桌面），10vw（平板電腦和手機）
• 右填充：2vw（桌面），10vw（平板電腦和手機）

主要元素

為了使所有列內容居中，我們將這兩行 CSS 代碼添加到行的主元素中。

display: flex;
align-items: center;

刪除平板電腦和手機上的桌面顯示屬性。

display: block;

第 1 欄

邊界

繼續打開第 1 列設置並僅在桌面上添加右邊框。

• 右邊框寬度：1px（桌面），0px（平板電腦和手機）
• 右邊框顏色：#d8d8d8

Z索引

也增加列的 z 索引。

• Z指數：11

第 2 欄

主要元素

然後，打開第 2 列設置並將以下幾行 CSS 代碼添加到該列的主元素中，將其變成兩列。

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

將菜單模塊添加到第 1 列

選擇菜單

是時候開始添加模塊了！ 將菜單模塊添加到第 1 列並選擇您選擇的菜單。

上傳標誌

接下來上傳徽標。

佈局

轉到模塊的設計選項卡並確保應用以下佈局設置：

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

菜單文字

接下來修改菜單文本設置。

• 活動鏈接顏色：#ef6f49
• 菜單字體：蒙特塞拉特
• 菜單字體粗細：半粗體
• 菜單字體樣式：大寫
• 菜單文本顏色：#333333（默認），#ef6f49（懸停）
• 菜單文字大小：0.7vw（桌面）、1.8vw（平板電腦）、2.5vw（手機）
• 菜單字母間距：1px

下拉菜單文本

也對下拉菜單文本設置進行一些更改。

• 下拉菜單背景顏色：#ffffff
• 下拉菜單行顏色：#ef6f49

圖標

然後，更改漢堡菜單圖標顏色。

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

漿紗

還將徽標最大寬度添加到大小設置中。

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

菜單標誌 CSS

並通過在高級選項卡的菜單徽標中添加一行 CSS 代碼來完成模塊的設置。

margin-right: 10vw;

將代碼模塊添加到第 1 列

向模塊添加自定義 CSS 代碼

我們在第 1 列中需要的下一個也是最後一個模塊是代碼模塊。 添加以下 CSS 代碼行以自定義菜單項之間的空間：

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

將按鈕模塊 #1 添加到第 2 列

添加副本

進入下一個模塊！ 添加第一個按鈕模塊並輸入您選擇的一些副本。

添加鏈接

接下來添加指向按鈕模塊的鏈接。

結盟

轉到模塊的設計選項卡並更改按鈕對齊方式。

• 按鈕對齊：右

按鈕設置

樣式按鈕。

• 為按鈕使用自定義樣式：是
• 按鈕文字大小：0.8vw（桌面）、1.7vw（平板電腦）、2.5vw（手機）
• 按鈕文字顏色：#000000
• 按鈕背景顏色：#edeef0（默認）、#d6d7d8（懸停）
• 按鈕邊框寬度：0px

• 按鈕邊框半徑：0px
• 按鈕字母間距：2px
• 按鈕字體：蒙特塞拉特
• 按鈕字體粗細：半粗體
• 按鈕字體樣式：大寫

間距

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

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

克隆按鈕模塊

完成第一個按鈕模塊後，克隆它。

更改鏈接

打開重複的按鈕模塊並更改 URL。

更改對齊方式

還要更改模塊的對齊方式。

• 按鈕對齊：左

更改按鈕設置

也對按鈕設置進行一些更改。

• 按鈕文字顏色：#ffffff
• 按鈕背景顏色：#ef6f49（默認）、#e06945（懸停）

懸停變換比例

通過添加變換比例懸停效果來完成按鈕設置。

• 正確：110%
• 底部：110%

3. 保存主題生成器更改和預覽結果

完成全局標題後，保存所有主題構建器更改並在您的網站上查看結果！

預覽

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

桌面

移動的

最後的想法

在本教程中，我們向您展示瞭如何使用 Divi 的主題構建器向全局標題添加兩個並排按鈕。 我們添加的按鈕之一是主要按鈕，另一個是次要按鈕。 在全局標題中添加按鈕有助於強調網站的一些最重要的 CTA。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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