如何在滾動上將您的 Divi 標題交換為另一個

已發表: 2020-03-13

您的標題不可避免地仍然是您網站最重要的元素之一。 它會影響訪問者的導航過程，並使他們能夠快速找到他們正在尋找的內容。 現在，如果您正在尋找一種將滾動時的 Divi 標題與另一個交換的方法，您會喜歡這篇文章。 我們將向您展示如何使用 Divi 的主題構建器、內置元素和一些附加代碼來實現它。 我們還確保頁面頂部的標題有一些自動生成的佔位符空間。 您也可以免費下載 JSON 文件！

讓我們開始吧。

預覽

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

桌面

交換div頭

移動的

交換div頭

免費下載 Swap Divi 標題模板

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

下載文件
免費下載

免費下載

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

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

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

轉到 Divi 主題生成器

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

交換div頭

構建全局標題

然後，單擊“構建全局標題”以重定向到模板編輯器。

交換div頭

2.在同一部分創建兩個標題

修改部分

漿紗

進入模板編輯器後，您會注意到一個部分。 打開部分設置並確保部分寬度為“100%”。

  • 寬度：100%

交換div頭

間距

然後，轉到間距設置並刪除所有默認的頂部和底部填充。

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

交換div頭

盒子陰影

我們也使用了一個微妙的盒子陰影。

  • 框陰影垂直位置：15px
  • 陰影顏色：rgba(0,0,0,0.06)

交換div頭

位置

最後但並非最不重要的一點是，我們將使用高級選項卡中的位置設置使該部分貼在頁面的頂部中心。

  • 位置：固定
  • 位置：頂部中心

交換div頭

添加行標題 #1

列結構

我們將創建的兩個標題都將是同一部分的一部分。 我們將為每個標題使用單獨的行。 使用以下列結構添加第一行標題：

交換div頭

背景顏色

尚未添加任何模塊，打開行設置並更改背景顏色。

  • 背景顏色：#000000

交換div頭

漿紗

還要修改大小設置。

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

交換div頭

間距

然後，轉到間距設置並刪除所有默認的頂部和底部填充。

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

交換div頭

主要元素

通過向行的主要元素添加兩行 CSS 代碼來完成行設置。 此 CSS 代碼將幫助我們對齊所有列內容。 

display: flex;
align-items: center;

交換div頭

將圖像模塊添加到第 1 列

上傳圖片

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

交換div頭

結盟

接下來更改模塊的對齊方式。

  • 圖像對齊：居中

交換div頭

將菜單模塊添加到第 2 列

選擇菜單

在第二列中，我們唯一需要的模塊是菜單模塊。 選擇您選擇的菜單。

交換div頭

刪除背景顏色

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

交換div頭

佈局

轉到設計選項卡並相應地更改佈局：

  • 風格：居中

交換div頭

菜單文字設置

然後，對菜單文本設置進行一些更改。

  • 菜單字體：Roboto
  • 菜單字體粗細：粗體
  • 菜單文本顏色：#ffffff（桌面）、#000000（平板電腦和手機）
  • 菜單文字大小：18px

交換div頭

下拉菜單文本設置

接下來，我們將在下拉菜單文本設置中更改下拉菜單行顏色。

  • 下拉菜單行顏色：#000000

交換div頭

圖標設置

我們還更改了漢堡包菜單圖標的顏色。

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

交換div頭

間距

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

  • 左填充：30px（僅限平板電腦和手機）
  • 右內邊距：30px（僅限平板電腦和手機）

交換div頭

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

添加選擇的社交網絡

在最後一列中，我們唯一需要的模塊是社交媒體關注模塊。 添加您選擇的社交網絡。

交換div頭

個人社交網絡背景顏色

然後，單獨打開每個社交網絡並將背景顏色更改為白色。

  • 背景顏色：#FFFFFF

交換div頭

交換div頭

結盟

返回模塊的常規設置並更改模塊對齊方式。

  • 模塊對齊：居中

交換div頭

圖標設置

也修改圖標顏色。

  • 圖標顏色：#0042c9

交換div頭

邊界

並通過添加一些邊框半徑來完成模塊設置。

  • 所有角落：100px

交換div頭

添加行標題 #2

列結構

進入第二個標題！ 使用以下列結構添加新行：

交換div頭

漿紗

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

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

交換div頭

間距

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

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

交換div頭

主要元素

然後，通過在行的主要元素中使用兩行 CSS 代碼來對齊所有列內容。 

display: flex;
align-items: center;

交換div頭

第 3 列背景顏色

並通過打開第 3 列設置並使用背景色來完成行設置。

  • 背景顏色：#0042c9

交換div頭

將圖像模塊添加到第 1 列

上傳圖片

在第 1 列中，我們唯一需要的模塊是圖像模塊。 上傳您選擇的徽標。

交換div頭

結盟

接下來更改模塊的圖像對齊方式。

  • 圖像對齊：居中

交換div頭

克隆菜單模塊並放置在第 2 行標題的第 2 列中

克隆前一行中使用的菜單模塊，並將副本放置在第二行的中間列中。

交換div頭

修改菜單文本設置

打開復制的菜單模塊並更改菜單文本顏色。

  • 菜單文字顏色：#0042c9

交換div頭

修改下拉菜單文本設置

也修改下拉菜單文本設置。

  • 下拉菜單行顏色：#ffc21d

交換div頭

修改圖標設置

通過更改漢堡菜單圖標顏色來完成菜單模塊設置。

  • 漢堡菜單圖標顏色：#0042c9

交換div頭

將按鈕模塊添加到第 3 列

添加副本

在行的最後一列中，我們唯一需要的模塊是按鈕模塊。 輸入您選擇的一些副本。

交換div頭

結盟

接下來修改按鈕對齊方式。

  • 按鈕對齊：居中

交換div頭

按鈕設置

然後，按如下方式設置按鈕樣式：

  • 為按鈕使用自定義樣式：是
  • 按鈕文字大小：20px（桌面）、18px（平板電腦）、15px（手機）
  • 按鈕文字顏色：#ffffff
  • 按鈕邊框寬度：0px

交換div頭

  • 按鈕字體：Roboto
  • 按鈕字體粗細：粗體

交換div頭

間距

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

  • 頂部填充：33px（桌面）、35px（平板電腦）、38px（手機）
  • 底部填充：33px（桌面）、35px（平板電腦）、38px（手機）

交換div頭

2. 添加 CSS 類

部分

一旦您添加並設置了所有模塊的樣式，就該添加我們將在 JQuery 代碼中使用的 CSS 類了。 首先，打開部分設置並使用以下 CSS 類：

  • CSS 類：標題部分

交換div頭

行標題 #1

然後，打開第一行標題並使用以下 CSS 類：

  • CSS 類：header-1

交換div頭

行標題 #2

也打開第二行。 使用以下 CSS 類：

  • CSS 類：header-2

交換div頭

3. 添加 JQuery & CSS 代碼

將代碼模塊添加到第一行的第三列

一旦所有 CSS 類就位，就該添加代碼了。 在您的部分中的任何位置添加一個新的代碼模塊。 我們把它放在第一行的第三列。

交換div頭

添加 JQuery 代碼（在腳本標籤之間）

然後，在腳本標籤之間添加以下 CSS 代碼行，如下面的打印屏幕所示： 

jQuery(function($){
    
var firstHeader = $('.header-1');
var secondHeader = $('.header-2');
var headerSection = $('.header-section');
  
headerSection.wrap('<div class="header-placeholder"></div>');
var headerWrap = $('.header-placeholder');
  
var headerHeight = firstHeader.outerHeight();
headerWrap.css('height', headerHeight);  

  
secondHeader.hide();
 
$(window).scroll(function() {
  
    var topPosition = $(window).scrollTop();
  
    if (topPosition >= 400) {
          firstHeader.slideUp();
          secondHeader.slideDown();
    }
  
    if (topPosition == 0) {
          secondHeader.slideUp();
          firstHeader.slideDown();
    }
  
});      
});

交換div頭

添加 CSS 代碼（在樣式標籤之間）

在樣式標籤之間添加以下 CSS 代碼： 

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

交換div頭

4. 保存主題生成器更改並查看結果

此時，唯一要做的就是保存所有主題構建器更改並在您的網站上查看結果！

交換div頭

交換div頭

預覽

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

桌面

交換div頭

移動的

交換div頭

最後的想法

在這篇文章中，我們向您展示瞭如何使用 Divi 的主題構建器、Divi 元素以及一些額外的 JQuery 和 CSS 代碼在滾動時將您的 Divi 標題交換為另一個標題。 我們還在頁面容器頂部自動生成了一些空間，以防止固定標題與頁面內容重疊。 您還可以免費下載交換 Divi 標頭模板 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論。

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