創(chuàng)建全局標(biāo)頭時(shí)，需要考慮許多事項(xiàng)。您放置在標(biāo)題中的元素需要幫助訪問者輕松導(dǎo)航。為了減少人們花在導(dǎo)航上的時(shí)間，許多Web設(shè)計(jì)師選擇固定的頂部標(biāo)題，以允許訪問者立即轉(zhuǎn)到其他頁面或帖子。這確實(shí)很方便，但是在創(chuàng)建固定的標(biāo)頭時(shí)，會(huì)占用訪問者視口高度的很大一部分，從而允許一次顯示較少的內(nèi)容。如果您不愿意做出這種犧牲，請(qǐng)知道您不必這樣做。通過允許全局標(biāo)頭顯示訪問者何時(shí)向上滾動(dòng)并在訪客向下滾動(dòng)時(shí)隱藏全局標(biāo)題，您可以享受固定標(biāo)頭的好處。今天，我們將指導(dǎo)您使用Divi的主題生成器隱藏和顯示全局標(biāo)題。

讓我們開始吧。

預(yù)習(xí)

在深入學(xué)習(xí)本教程之前，讓我們快速瀏覽一下不同屏幕尺寸的結(jié)果。

桌面

移動(dòng)

1.轉(zhuǎn)到Divi Theme Builder并添加新模板

轉(zhuǎn)到Divi Theme Builder

首先轉(zhuǎn)到Divi Theme Builder。

開始建立全球標(biāo)題

在那里，單擊“添加全局標(biāo)題”，然后選擇“構(gòu)建全局標(biāo)題”。

2.開始構(gòu)建全局頭

區(qū)域設(shè)置

背景顏色

在模板編輯器中，您會(huì)注意到一個(gè)部分。打開該部分并更改其背景顏色。

背景顏色：#ffffff

漿紗

轉(zhuǎn)到設(shè)計(jì)選項(xiàng)卡，然后為您的部分分配100％的寬度。

寬度：100％

間距

也添加一些自定義的頂部和底部填充。

最高填充：2vw

底部填充：2vw

框影

我們還將對(duì)我們的部分應(yīng)用微妙的陰影。

方塊陰影模糊強(qiáng)度：50像素

陰影顏色：rgba(0,0,0,0.08)

CSS ID

在本教程的后面，我們將需要一些自定義代碼來實(shí)現(xiàn)滾動(dòng)效果。為此，我們?cè)谠摬糠痔砑恿薈SS ID。

CSS ID：global-header-section

主要元素

通過將兩行CSS代碼添加到該部分的主元素，我們還將該部分變成固定的頭部。

Z指數(shù)

現(xiàn)在，為確保我們的部分出現(xiàn)在所有頁面或帖子內(nèi)容的頂部，我們還將在可見性設(shè)置中增加z索引。

Z索引：99999

添加新行

列結(jié)構(gòu)

完成所有部分的設(shè)置后，請(qǐng)使用以下列結(jié)構(gòu)在該部分中添加新行：

漿紗

尚未添加任何模塊，請(qǐng)打開行設(shè)置，并允許該行占用屏幕的整個(gè)寬度。

使用自定義裝訂線寬度：是

裝訂線寬度：1

均衡柱高：是

寬度：100％

最大寬度：100％

間距

還要?jiǎng)h除所有默認(rèn)的頂部和底部填充。

最高填充：0px

底部填充：0px

主要元素

通過在行的主要元素中添加兩行CSS代碼，使列內(nèi)容居中，并允許列在較小的屏幕尺寸上彼此相鄰。

將社交媒體關(guān)注模塊添加到第2列

添加社交網(wǎng)絡(luò)

是時(shí)候添加模塊了，從第1列的“社交媒體關(guān)注模塊”開始。添加要顯示的社交網(wǎng)絡(luò)。

重置個(gè)人社交網(wǎng)絡(luò)樣式

通過在單個(gè)級(jí)別上重置每個(gè)社交網(wǎng)絡(luò)的樣式來繼續(xù)。

添加個(gè)人社交網(wǎng)絡(luò)間距

您還需要分別打開每個(gè)社交網(wǎng)絡(luò)的設(shè)置，并在間距設(shè)置中添加底部填充。

底部填充：0.5vw

對(duì)準(zhǔn)

將底部填充單獨(dú)添加到每個(gè)社交網(wǎng)絡(luò)后，請(qǐng)返回常規(guī)模塊設(shè)置。轉(zhuǎn)到設(shè)計(jì)選項(xiàng)卡，然后更改模塊對(duì)齊方式。

模塊對(duì)齊：居中

默認(rèn)圖標(biāo)設(shè)置

也可以在圖標(biāo)設(shè)置中更改圖標(biāo)顏色。

圖標(biāo)顏色：＃000000

懸停圖標(biāo)設(shè)置

并在懸停時(shí)修改圖標(biāo)顏色。

圖標(biāo)顏色：＃c2ab92

邊境

通過在邊框設(shè)置中添加底部邊框來完成模塊的設(shè)置。

底邊框?qū)挾?#xff1a;1px

底部邊框顏色：＃000000

將菜單模塊添加到第2列

選擇菜單

進(jìn)入下一篇專欄！添加菜單模塊，然后選擇所需的菜單。

上傳徽標(biāo)

接下來將徽標(biāo)上傳到模塊。

移除背景色

并刪除背景色。

布局

然后，轉(zhuǎn)到設(shè)計(jì)選項(xiàng)卡，并確保以下設(shè)置適用于布局：

風(fēng)格：居中

下拉菜單方向：向下

默認(rèn)菜單文字

繼續(xù)更改菜單文本設(shè)置，如下所示：

活動(dòng)鏈接顏色：＃c2ab92

菜單字體：Cor

文字顏色：＃000000

菜單文字大小：1vw(臺(tái)式機(jī))，2vw(平板電腦)，3vw(電話)

懸停菜單文本

修改懸停菜單文本。

菜單文字顏色：＃c2ab92

下拉式菜單

接下來，在下拉菜單設(shè)置中更改下拉菜單的行顏色。

下拉菜單行顏色：＃000000

圖示

我們也在圖標(biāo)設(shè)置中更改了漢堡菜單圖標(biāo)的顏色。

漢堡菜單圖標(biāo)顏色：＃000000

漿紗

在大小調(diào)整設(shè)置中，跨不同屏幕尺寸更改徽標(biāo)最大寬度，以繼續(xù)。

徽標(biāo)最大寬度：5vw(臺(tái)式機(jī))，10vw(平板電腦)，13vw(電話)

菜單鏈接CSS

并通過在高級(jí)選項(xiàng)卡中的模塊菜單鏈接中添加兩行CSS代碼來完成模塊的設(shè)置。

將文本模塊添加到第3列

添加副本

進(jìn)入最后一個(gè)模塊！在那里，我們唯一需要的模塊是文本模塊。

添加鏈接

該模塊將用作CTA。添加您選擇的鏈接。

模塊鏈接URL：＃

默認(rèn)文字設(shè)置

轉(zhuǎn)到模塊的設(shè)計(jì)選項(xiàng)卡，并相應(yīng)地更改文本設(shè)置：

文字字體：Cor Garamond

文字顏色：＃000000

文字大小：1vw(臺(tái)式機(jī))，2vw(平板電腦)，3vw(電話)

懸停文字設(shè)定

懸停時(shí)更改文本顏色。

文字顏色：＃c2ab92

漿紗

通過在不同屏幕尺寸上更改模塊的大小設(shè)置來繼續(xù)。

寬度：12vw(臺(tái)式機(jī))，18vw(平板電腦)，22vw(電話)

模塊對(duì)齊：居中

間距

并在間距設(shè)置中添加一些底部填充。

底部填充：0.5vw

邊境

通過添加底部邊框完成模塊的設(shè)置。

底邊框?qū)挾?#xff1a;1px

底部邊框顏色：＃000000

將代碼模塊添加到第2列

插入JQuery和CSS代碼

在為行中的所有模塊設(shè)置樣式之后，就該使顯示/隱藏效果發(fā)生了。為此，我們需要向代碼模塊中添加一些自定義代碼，并將其放置在第2列中。無論您如何設(shè)計(jì)標(biāo)題或使用什么模塊，此代碼都可以在您添加的任何部分上使用。確保已將CSS ID添加到您的部分。如下圖所示，將JQuery代碼放在腳本標(biāo)簽之間，將CSS代碼放在樣式標(biāo)簽之間。

3.保存構(gòu)建器更改并查看結(jié)果

完成全局標(biāo)題后，保存所有更改并在您的網(wǎng)站上查看結(jié)果！

預(yù)習(xí)

現(xiàn)在我們已經(jīng)完成了所有步驟，讓我們最后看一下不同屏幕尺寸的結(jié)果。

桌面

移動(dòng)

總結(jié)

以上是生活随笔為你收集整理的html背景音乐如何隐藏控件菜单栏,【Divi主题教程】divi主题如何设置顶部菜单栏滚动是进行隐藏...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。