使用 Divi 的主題生成器滾動時如何縮小全局標題的大小
已發表: 2019-11-19當您設計固定的全局標題時，您可能希望在訪問者滾動時縮小標題的高度。 它有助於減少全局標題在訪問者視口高度中佔用的空間。 在本教程中，我們將指導您完成該過程。 我們將從構建菜單開始，然後我們將添加一些 JQuery 和 CSS 代碼來觸發效果。 您也可以免費下載 JSON 文件！
讓我們開始吧。
預覽
在我們深入學習教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結果。
桌面
移動的
免費下載全局標題模板
要使用免費的全局標題模板，您首先需要使用下面的按鈕下載它。 要訪問下載，您需要使用下面的表格訂閱我們的 Divi Daily 電子郵件列表。 作為新訂戶，您每週一將收到更多的 Divi 善良和免費的 Divi 佈局包！ 如果您已經在列表中，只需在下面輸入您的電子郵件地址，然後單擊下載。 您不會被“重新訂閱”或收到額外的電子郵件。
免費下載
加入 Divi 時事通訊，我們將通過電子郵件向您發送一份最終的 Divi 登陸頁面佈局包，以及大量其他令人驚嘆的免費 Divi 資源、提示和技巧。 跟隨，您將很快成為 Divi 大師。 如果您已經訂閱，只需在下面輸入您的電子郵件地址，然後單擊下載即可訪問佈局包。
您已成功訂閱。 請檢查您的電子郵件地址以確認您的訂閱並獲得免費的每週 Divi 佈局包！
訂閱我們的 YouTube 頻道
1.轉到Divi Theme Builder並添加新模板
轉到 Divi 主題生成器
首先轉到Divi Theme Builder。
開始構建全局標題
然後，單擊“構建全局標題”並選擇“構建全局標題”。
2. 開始構建全局標題
部分設置
背景顏色
進入模板編輯器後，您會注意到一個部分。 打開該部分並將背景顏色更改為白色。
- 背景顏色：#FFFFFF
漿紗
移至模塊的設計選項卡並更改寬度。
- 寬度：100%
間距
也修改該部分的頂部和底部填充。
- 頂部填充：2vw
- 底部填充：2vw
盒子陰影
並通過在下一個部分添加一個微妙的框陰影來將頁面內容與全局標題分開。
- 框陰影模糊強度：50px
- 陰影顏色：rgba(0,0,0,0.13)
CSS ID
然後，將 CSS ID 添加到該部分。 在本教程的後面，我們將使用此 CSS ID 在滾動時創建縮小的全局標題效果。
- CSS ID：節填充
主要元素
轉到高級選項卡，轉到自定義 CSS 設置，並通過向該部分的主要元素添加兩行 CSS 代碼來修復該部分。
position: fixed; top: 0;
Z索引
為了確保該部分始終位於所有頁面和帖子內容的頂部，我們還將增加該部分的 z 索引。
- Z指數：99999
添加新行
列結構
完成列設置後，繼續使用以下列結構添加新行：
漿紗
尚未添加任何模塊，打開行設置並相應地更改大小：
- 使用自定義裝訂線寬度：是
- 天溝寬度：1
- 均衡柱高：是
- 最大寬度：100%
間距
接下來刪除該行的默認頂部和底部填充。
- 頂部填充：0px
- 底部填充：0px
CSS ID
然後，轉到高級選項卡並向該行添加 CSS ID。 在本教程後面，我們將需要這個 CSS ID 來使縮小效果起作用。
- CSS ID：行寬
主要元素
最後但並非最不重要的一點是，為了確保所有列在較小的屏幕尺寸上保持彼此相鄰，並使所有列內容居中，我們將向行的主要元素添加兩行 CSS 代碼。
display: flex; align-items: center;
將圖像模塊添加到第 1 列
上傳標誌
是時候添加模塊了，從第 1 列中的圖像模塊開始。上傳具有透明背景的徽標。
漿紗
接下來修改模塊的寬度。
- 寬度：5vw（桌面）、9vw（平板電腦）、13vw（手機）
將菜單模塊添加到第 2 列
選擇菜單
移至第二列並插入菜單模塊。 選擇您選擇的菜單。
刪除背景顏色
接下來刪除模塊的背景顏色。
佈局
轉到模塊的設計選項卡並更改佈局。
- 風格：居中
- 下拉菜單方向：向下
菜單文字
然後，打開菜單文本設置並進行一些更改。
- 菜單字體：魔方
- 菜單文字顏色：#000000
- 菜單文字大小：0.9vw（桌面）、2vw（平板電腦）、3vw（手機）
下拉式菜單
也修改下拉菜單設置。
- 下拉菜單背景顏色：#ffffff
- 下拉菜單行顏色：#2970fa
圖標
並通過更改圖標設置中的漢堡菜單圖標顏色來完成模塊的設置。
- 漢堡菜單圖標顏色：#2970fa
將按鈕模塊添加到第 3 列
添加副本
轉到下一列和最後一列。 添加帶有您選擇的一些副本的按鈕模塊。
結盟
接下來更改模塊的對齊方式。
- 按鈕對齊：右
按鈕設置
相應地設置按鈕樣式：
- 為按鈕使用自定義樣式：是
- 按鈕文字大小：0.8vw（桌面）、1.5vw（平板電腦）、2vw（手機）
- 按鈕文字顏色：#ffffff
- 按鈕背景顏色：#2970fa
- 按鈕邊框寬度：0px
- 按鈕邊框半徑：0px
- 按鈕字母間距：1px
- 按鈕字體：Rubik
- 按鈕字體樣式：大寫
間距
並在不同的屏幕尺寸中添加一些自定義填充值。
- 頂部填充：0.8vw（桌面）、1.8vw（平板電腦）、2.5vw（手機）
- 底部填充：0.8vw（台式機）、1.8vw（平板電腦）、2.5vw（手機）
- 左填充：1.5vw（桌面）、3vw（平板電腦）、4vw（手機）
- 右填充：1.5vw（桌面）、3vw（平板電腦）、4vw（手機）
盒子陰影
通過添加微妙的框陰影來完成模塊的設置。
- 框陰影垂直位置：20px
- 框陰影模糊強度：30px
- 陰影顏色：rgba(41,112,250,0.2)
將代碼模塊添加到第 2 列
插入 JQuery 和 CSS 代碼
本教程的下一部分和最後一部分使用我們分配給我們的部分和行的兩個 CSS ID 來處理收縮效果。 使用以下幾行 JQuery 和 CSS 代碼將代碼模塊添加到第 2 列。 確保將 JQuery 代碼放在 script 標籤之間，將 CSS 代碼放在 style 標籤之間。
jQuery(function($){
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('#section-padding').addClass('reduce-section-padding');
$('#row-width').addClass('increase-row-width');
} else {
$('#section-padding').removeClass('reduce-section-padding');
$('#section-padding').addClass('slow-transition');
$('#row-width').removeClass('increase-row-width');
$('#row-width').addClass('slow-transition');
}
});
});.reduce-section-padding {
transition: all 0.9s ease-out 0s;
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.increase-row-width {
transition: all 0.9s ease-out 0s;
width: 100% !important;
}
.slow-transition {
transition: all 0.9s ease-out 0s;
}
#main-content {
margin-top: 5vw;
}
3. 保存構建器更改並查看結果
添加代碼後，您可以保存對全局標題所做的所有更改，並在您的網站上查看結果！
預覽
現在我們已經完成了所有步驟，讓我們最後看看不同屏幕尺寸的結果。
桌面
移動的
最後的想法
在這篇文章中，我們向您展示瞭如何使用 Divi 的 Theme Builder 創建一個縮小的全局標題。 縮小標題是節省訪問者視口高度空間的好方法。 我們從頭開始重新創建設計，並添加了一些自定義代碼來觸發收縮效果。 您也可以免費下載 JSON 文件！ 如果您有任何問題或建議，請隨時在下面的評論部分發表評論！
如果您渴望了解有關 Divi 的更多信息並獲得更多 Divi 免費贈品，請確保訂閱我們的電子郵件時事通訊和 YouTube 頻道，這樣您將永遠是第一批了解此免費內容並從中受益的人之一。