如何使用帶 Divi 的切換圖標節省標題空間

您設計標題的方式為網站的其餘部分定下了基調。 這就是為什麼考慮添加元素和交互的方式很重要的原因。 當然，您會希望包含徽標和菜單項等基礎知識，但很有可能您還希望包含其他一些號召性用語。 但是，添加到標題中的項目越多，標題就會變得越壓抑。 如果您正在尋找一種干淨且交互式的方式來在標題中展示不同的號召性用語，那麼您會喜歡本教程。 今天，我們將向您展示如何使用切換圖標節省頁眉空間。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

移動的

免費下載全局標題模板

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

下載文件

免費下載

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

下載

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

1. 構建標題結構

創建新的全局標題模板

首先轉到 Divi Theme Builder 並開始構建新的全局或自定義標題。

添加第 1 節

漸變背景

進入模板編輯器後，您會注意到一個部分。 打開該部分的設置並應用漸變背景。

• 顏色 1：#ffffff
• 顏色 2：#eaeaea
• 漸變類型：線性
• 梯度方向：90度
• 起始位置：50%
• 結束位置：50%

間距

轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。

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

盒子陰影

還要添加一個框陰影。

• 陰影顏色：rgba(0,0,0,0.06)

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

在不添加任何模塊的情況下，打開行設置，轉到設計選項卡並按如下方式更改大小設置：

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

間距

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

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

主要元素 CSS

然後，轉到高級選項卡並在不同的屏幕尺寸上應用一些主要元素自定義 CSS 代碼行。 此代碼將幫助我們垂直居中桌面上的項目。

桌面：

display: flex;
place-items: center;

平板電腦和手機：

display: block;

第 1 列設置

間距

然後，打開第 1 列設置並應用一些左右填充。

• 左填充：5%
• 右填充：5%

主要元素

我們正在通過將一些自定義 CSS 應用到列的主要元素來更改桌面上列的大小，並在平板電腦和手機上將其恢復為“100%”。

桌面：

width: 88% !important

平板電腦和手機：

width: 100% !important;

第 2 列設置

背景顏色

接下來，我們將打開第 2 列設置並將背景顏色更改為白色。

• 背景顏色：#FFFFFF

間距

我們還將向此列的間距設置添加一些響應式填充值。

• 頂部填充：
  • 桌面：50px
  • 平板電腦和手機：20px
• 底部填充
  • 桌面：50px
  • 平板電腦和手機：20px
• 左填充：1%
• 右填充：1%

主要元素 CSS

我們也將在桌面上修改第二列的大小。 我們將在較小的屏幕尺寸上將其恢復為“100%”。

桌面：

display: flex;
place-items: center;
width: 12% !important;

平板電腦和手機：

width: 100% !important;

將菜單模塊添加到第 1 列

選擇菜單

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

上傳標誌

接下來上傳徽標。

刪除背景顏色

然後，刪除默認的背景顏色。

菜單文字設置

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

• 菜單字體：Playfair Display
• 菜單文本字體：Playfair 顯示
• 菜單文字顏色：#000000
• 菜單文字大小：19px
• 菜單行高：1.4em
• 文本對齊：右

下拉菜單設置

然後，更改下拉菜單行顏色。

• 下拉菜單行顏色：#ffffff

圖標設置

更改圖標設置中的圖標顏色。

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

漿紗

並通過更改大小設置來完成模塊設置，如下所示：

• 標誌最大寬度：200px
• 寬度：100%
• 模塊對齊：居中

將 Blurb 模塊 #1 添加到第 2 列

將內容框留空

進入第二列。 為了創建切換圖標，我們將使用不帶標題和內容的 Blurb 模塊。 我們將首先創建第一個切換圖標，然後重用該模塊來添加其他兩個切換圖標。 添加 Blurb 模塊後，請確保標題和內容框為空。

選擇圖標

接下來，選擇您選擇的圖標。

圖標設置

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

• 圖標顏色
  • 默認值：#dbdbdb
  • 懸停：#000000
• 圖標位置：頂部
• 圖標對齊：居中
• 使用圖標字體大小：是
• 圖標字體大小：200%

漿紗

也修改大小設置。

• 內容寬度：100%
• 寬度：32%

主要元素和模糊圖像 CSS

並通過向 Blurb 模塊的高級選項卡中的自定​​義 CSS 選項添加兩行 CSS 代碼來完成模塊設置。

主要元素：

display: inline-block;

模糊圖像：

margin-bottom: 0px !important

克隆 Blurb 模塊兩次

完成第一個切換圖標 Blurb 模塊後，您可以將其克隆兩次。

更改圖標

確保更改每個副本中的圖標。

2. 添加切換項

添加第 2 節

漿紗

現在我們已經設置了標題的基礎，我們仍然需要包含切換項。 為此，我們將在前一個部分的正下方添加一個新部分。 打開部分設置並確保此部分的高度為“0px”。 這將幫助我們防止該部分佔用頁眉設計中的任何空間。 我們需要此部分的唯一原因是顯示我們的切換項。

• 高度：0px

間距

轉到該部分的設計選項卡並刪除所有默認的頂部和底部填充。

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

添加新行

列結構

繼續使用以下列結構添加新行：

漿紗

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

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

間距

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

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

位置

並重新定位整行。 將此行設為絕對值將幫助我們防止該行佔用設計中的任何空間。

• 位置：絕對
• 位置：右上角

將文本模塊 #1 添加到第 2 列

將電話號碼添加到內容框

是時候添加切換項目了！ 首先，我們將添加電話號碼。 將新的文本模塊添加到第 2 列並在內容框中插入電話號碼。

背景顏色

接下來添加黑色背景色。

• 背景顏色：#000000

文字設置

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

• 文字字體：Playfair Display
• 文字顏色：#ffffff
• 文字大小：27px
• 文本對齊：居中

漿紗

確保寬度也是 100%。

• 寬度：100%

間距

然後，將一些自定義填充值添加到間距設置中。

• 頂部填充：10%
• 底部填充：10%
• 左填充：2%
• 右填充：2%

克隆文本模塊

完成第一個切換項文本模塊後，將其克隆一次。

將內容更改為電子郵件地址

更改內容框中的內容。

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

添加選擇的社交網絡

然後，將社交媒體關注模塊添加到第 2 列。添加任意數量的社交網絡。

將每個社交網絡的背景顏色更改為白色

然後，分別將每個社交網絡的背景顏色更改為白色。

• 背景顏色：#FFFFFF

背景顏色

然後，回到常規模塊設置並使用黑色背景色。

• 背景顏色：#000000

結盟

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

• 模塊對齊：居中

圖標設置

也可以在圖標設置中更改圖標顏色。

• 圖標顏色：#000000

漿紗

然後，將“100%”寬度應用於大小設置。

• 寬度：100%

間距

也應用一些自定義的頂部和底部填充。

• 頂部填充：10%
• 底部填充：10%

邊界

並通過在邊框設置中添加一些圓角來完成模塊設置。

• 所有角落：100px

3. 添加功能

將連續的 CSS ID 添加到 Blurb 模塊第一部分

現在所有元素都已就位，我們可以開始添加切換效果。 您需要做的第一件事是單獨打開每個 Blurb 模塊並添加一個連續的 CSS ID。

• 模糊 1：header-cta-1
• 模糊 2：header-cta-2
• 模糊 3：header-cta-3

添加連續的 CSS ID 以切換項目

對切換項模塊執行相同的操作。 CSS ID 末尾的數字應與您在上一步中用於圖標的 CSS ID 匹配。

• 文本模塊 1：header-item-1
• 文本模塊 2：header-item-2
• 社交媒體關注模塊：header-item-3

為所有切換項添加絕對位置

並將每一個切換項一一絕對化。 我們建議您轉到線框模式來執行此操作。

• 位置：絕對
• 位置：右上角

將代碼模塊添加到部分 #1 的第一列

現在所有 CSS ID 都已就位，我們可以添加代碼以使點擊功能正常工作。 在第 1 列的菜單模塊正下方添加一個新的代碼模塊。

插入 CSS 代碼

在樣式標籤之間添加以下 CSS 代碼行，您可以在下面的打印屏幕中看到：

[id*="header-cta"]{
cursor: pointer;
}
[id*="header-item"] {
visibility: hidden;
opacity: 0;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.show-item {
visibility: visible;
opacity: 1;
}
.highlight-icon{
color: #000 !important;
}

插入 JQuery 代碼

我們也在添加一些自定義的 JQuery 代碼。 如您在下面的打印屏幕中看到的那樣，在腳本標記之間添加代碼。

jQuery(function($){
$(document).ready(function(){
 
$('[id*="header-cta"]').click(function() {
 
var $selector = $(this).attr('id').replace('cta', 'item');
var $item = $('#' + $selector);
 
$item.toggleClass('show-item');
$('[id*="header-item"]').not($item).removeClass('show-item');

var $icon = $(this).find('.et-pb-icon');
var $allIcons = $('[id*="header-cta"]').find('.et-pb-icon');
  
$icon.toggleClass('highlight-icon');
$allIcons.not($icon).removeClass('highlight-icon');
  
});
 
});
});

4. 使標題 + 切換項目具有粘性

使第 1 部分具有粘性

最後但並非最不重要的一點是，您還可以轉動標題並切換項目粘性。 要創建所需的結果，您需要確保兩個部分都是粘性的，並且啟用了“從周圍粘性元素偏移”選項。 使第一部分具有粘性。

• 粘滯位置：粘在頂部
• 底部粘性限制：無
• 從周圍的粘性元素偏移：是
• 過渡默認和粘性樣式：是

使第 2 部分具有粘性

對第 2 部分執行相同的操作。就是這樣！

• 粘滯位置：粘在頂部
• 底部粘性限制：無
• 從周圍的粘性元素偏移：是
• 過渡默認和粘性樣式：是

預覽

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

桌面

移動的

最後的想法

在這篇文章中，我們向您展示瞭如何在標題中使用切換圖標。 只要有人點擊一個圖標，就會出現一個切換項，這有助於您在頁眉設計中節省大量空間。 這種方法側重於用戶行為，並幫助您避免設計壓倒性的標題設計。 您也可以免費下載 JSON 文件！ 如果您有任何疑問，請隨時在下面的評論部分發表評論。

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