無論您是有抱負(fù)的Web開發(fā)人員還是電子商務(wù)企業(yè)家，您的網(wǎng)站都可能共享一些基本要素。例如，每個(gè)站點(diǎn)都需要一個(gè)清晰的Header來幫助訪問者在不同頁面之間導(dǎo)航。但是，如果您使用像Elementor這樣的頁面構(gòu)建器來減少編碼，您可能想知道是否仍然可以制作一個(gè)復(fù)雜但用戶友好的Elementor固定頂部欄（或者成為固定頁眉）。

幸運(yùn)的是，使用Elementor header可以為您的用戶提供一種簡化的方式來瀏覽您的網(wǎng)站。使用這個(gè)流行的頁面構(gòu)建器，您可以構(gòu)建各種不會(huì)在用戶向下滾動(dòng)站點(diǎn)時(shí)消失的Header。此功能使它們“粘在頂部”。

在這篇文章中，我們將討論固定頂部欄的工作原理以及使用它的好處。然后，我們將向您展示如何使用該工具的免費(fèi)版和專業(yè)版制作Elementor固定頂部欄。最后，我們將使用CSS為您的置頂header提供額外的自定義選項(xiàng)。

1. Elementor固定頂部欄簡介
2. 如何創(chuàng)建Elementor固定頂部欄
3. 如何使用CSS來增強(qiáng)Elementor固定頂部欄
4. Elementor固定頂部欄的類型

Elementor固定頂部欄簡介

沒有兩個(gè)網(wǎng)站是相同的。但是，優(yōu)質(zhì)網(wǎng)站有一些共同點(diǎn)。

如果您正在運(yùn)行一個(gè)多頁站點(diǎn)，則這些元素之一就是Header。這是包含有用信息的任何頁面頂部的水平條。

通常，頁眉包括您的導(dǎo)航菜單以及諸如關(guān)于或聯(lián)系我們之類的頁面：

閃電博網(wǎng)站頁眉區(qū)域

當(dāng)訪問者瀏覽您的頁面時(shí)，他們可能希望有一個(gè)有組織的Header來幫助引導(dǎo)他們?yōu)g覽您的網(wǎng)站。由于用戶體驗(yàn) (UX) 是網(wǎng)站成功的關(guān)鍵，因此明智的做法是創(chuàng)建一個(gè)直觀且直接的Header。這就是使用Elementor設(shè)計(jì)的固定頂部欄可以產(chǎn)生重大影響的地方。

固定頂部欄的工作原理

在我們了解Elementor固定頁眉的工作原理之前，讓我們看看當(dāng)您向下滾動(dòng)頁面時(shí)標(biāo)準(zhǔn)頁眉的行為：

標(biāo)準(zhǔn)頁眉示例

正如您在上面的示例中看到的，此header包含一個(gè)復(fù)雜的導(dǎo)航欄，其中包含Sales、Clothing、Shoes等類別。這些標(biāo)簽無疑將幫助購物者找到他們正在尋找的東西。但是，當(dāng)您向下滾動(dòng)頁面時(shí)，頁眉會(huì)消失。

用戶可能會(huì)覺得這很令人沮喪，因?yàn)檫@需要他們滾動(dòng)回頁面頂部才能訪問導(dǎo)航菜單。幸運(yùn)的是，固定頂部欄提供了一個(gè)簡單的解決方案。

通過停留或“固定”在頁面頂部，固定頁眉可以極大地改善您網(wǎng)站的用戶體驗(yàn)：

固定頂部欄示例

當(dāng)您的網(wǎng)站設(shè)計(jì)包含固定頂部欄（頁眉）時(shí)，您的用戶可以快速跳轉(zhuǎn)到新頁面，而不會(huì)浪費(fèi)時(shí)間滾動(dòng)。

此外，使用此固定元素，您可以始終將徽標(biāo)包含在前面和中心。此功能可以幫助用戶更輕松地回憶起您的品牌，并鼓勵(lì)他們在您的網(wǎng)站上停留更長時(shí)間。

何時(shí)應(yīng)該考慮使用固定頂部欄

在瀏覽帶有固定頂部欄的大型網(wǎng)站時(shí)，訪問者不太可能迷路。因此，如果您的網(wǎng)站有很多頁面，您可能希望利用此功能。這就是為什么您會(huì)經(jīng)常在電子商務(wù)網(wǎng)站上看到固定頂部欄的原因。

如果您想在Header中包含搜索功能，固定頂部欄可能特別有用。這樣，當(dāng)用戶滾動(dòng)并意識到他們無法找到他們正在尋找的內(nèi)容時(shí)，他們可以快速在搜索欄中輸入查詢。

此外，如果您運(yùn)行一個(gè)在主頁上顯示所有帖子的貨幣化博客，則固定Header可能會(huì)改變游戲規(guī)則。一般來說，這個(gè)header可以確保您的網(wǎng)站是可維護(hù)和可擴(kuò)展的。

但是，如果您的網(wǎng)站只有一個(gè)頁面，那么以這種方式轉(zhuǎn)換您的Header沒有多大意義。此外，如果您的網(wǎng)站上有大量頁面，但每個(gè)頁面都相對較短，那么您可能也不需要固定頂部欄。

總體而言，固定頂部欄減少了滾動(dòng)時(shí)間并增加了網(wǎng)站的可用性和導(dǎo)航。如果您不確定此功能是否會(huì)使您的網(wǎng)站受益，您可能需要快速審核您的頁面長度，然后再?zèng)Q定。

如何創(chuàng)建Elementor固定頂部欄

對于本教程，我們將引導(dǎo)您完成制作Elementor固定頂部欄的步驟。我們假設(shè)您已經(jīng) 在您的站點(diǎn)上安裝并激活了Elementor插件。

我們將介紹如何使用免費(fèi)版本和Elementor Pro制作此頁眉。您可能會(huì)很高興知道您無需學(xué)習(xí)HTML或大量編輯代碼即可完成此操作！

如何使用Elementor創(chuàng)建固定頂部欄（免費(fèi)）

Elementor的免費(fèi)版本為頁面構(gòu)建提供了一些強(qiáng)大的功能。但是，如果您想更改頁眉和頁腳，則需要一些額外的（也是免費(fèi)的）工具。

考慮到這一點(diǎn)，讓我們看看如何使用Elementor創(chuàng)建一個(gè)固定頁眉！

第 1 步：安裝并激活您的基本插件

幸運(yùn)的是，一些可靠的工具可以輕松擴(kuò)展Elementor免費(fèi)版的功能。

導(dǎo)航到您的wordpress儀表板以找到您的第一個(gè)工具。轉(zhuǎn)到Plugins > Add New 并使用搜索功能查找ElementsKit Elementor插件：

安裝并激活ElementsKit

像往常一樣安裝并激活這個(gè)插件。完成此過程后，您將進(jìn)入主插件頁面：

插件現(xiàn)已安裝

現(xiàn)在，再次單擊Add New以使用搜索欄找到Elementor插件的Sticky Header Effects：

Elementor的固定頁眉效果

重復(fù)此工具的安裝和激活過程，您就可以進(jìn)行下一步了！

第 2 步：創(chuàng)建您的菜單

在制作任何類型的header之前，您需要一個(gè)導(dǎo)航菜單。我們將制作一個(gè)包含最常見元素的簡單菜單。它將包括徽標(biāo)、頁面和號召性用語 (CTA)。

要在WordPress儀表板中創(chuàng)建自己的菜單，請轉(zhuǎn)到外觀 > 菜單。在“菜單名稱”字段旁邊，給您的名稱取一個(gè)描述性名稱。我們將調(diào)用我們的“固定header菜單”：

給你的固定header菜單起個(gè)名字

請務(wù)必選擇頁眉作為顯示位置。您可能還想選擇該框以自動(dòng)將新頁面添加到菜單中。

接下來，您需要在菜單中添加一些頁面。在左側(cè)的頁面部分，勾選您想要包含的任何頁面的框，然后單擊添加到菜單：

將頁面添加到您的固定header菜單

然后您會(huì)看到您的頁面轉(zhuǎn)移到右側(cè)的菜單中。繼續(xù)并單擊?屏幕右下角的保存菜單：

保存您的固定header菜單

如您所見，我們添加了一些基本頁面，包括Contact Us、About和Sample Page。您可能希望重新排序頁面，以便訪問者覺得順序很直觀。

第 3 步：創(chuàng)建您的Header

現(xiàn)在您的導(dǎo)航菜單存在，但您無法在任何地方訪問它。那是因?yàn)槟枰獮樗鼊?chuàng)建一個(gè)Header。

為此，請轉(zhuǎn)到左側(cè)菜單中的ElementsKit選項(xiàng)卡。如果您還沒有，此時(shí)您需要點(diǎn)擊幾個(gè)“入門”頁面。

每個(gè)人都可能有不同的偏好，因此請花點(diǎn)時(shí)間選擇要激活的功能。但是，請確保將Header Footer模塊切換為ON：

在Elements Kit中打開頁眉頁腳選項(xiàng)

現(xiàn)在，轉(zhuǎn)到ElementsKit > 頁眉頁腳：

添加新模板

此頁面將為空，因?yàn)槟€沒有任何頁眉或頁腳模板。單擊屏幕頂部的Add New?以創(chuàng)建您的第一個(gè)Header模板：

填寫模板設(shè)置

在上面的屏幕上，輸入描述性名稱并確保選擇Header作為Type。由于您使用的是免費(fèi)版本，因此該Header將出現(xiàn)在整個(gè)站點(diǎn)上。

確保將激活/停用開關(guān)切換到ON?并單擊SAVE CHANGES?，F(xiàn)在您將返回模板頁面，您可以在其中看到列出的新Header模板：

現(xiàn)在可以使用新的header模板

您可能還會(huì)注意到此Header旁邊的綠色活動(dòng)圖標(biāo)。但是，它還沒有上線。

要完成您的Header，請將鼠標(biāo)懸停在模板列表中，然后單擊其名稱下方的Edit in Elementor 。這將帶您進(jìn)入Elementor Builder屏幕。

在這里，單擊ElementsKit圖標(biāo)：

單擊ElementsKit圖標(biāo)

在以下屏幕上，選擇“Sections”?選項(xiàng)卡：

選擇“Sections”選項(xiàng)卡

向下滾動(dòng)一點(diǎn)以找到您喜歡的Header部分，然后單擊Insert。我們選擇了Header – 第 5 節(jié)：

在您想要的位置插入Header

正如您可能看到的，我們的導(dǎo)航菜單是不可見的。因此，讓我們繼續(xù)將其添加到我們的Header模板中。為此，請將鼠標(biāo)懸停在Header的導(dǎo)航菜單部分。在這種情況下，它就在中心：

將鼠標(biāo)懸停在Header的導(dǎo)航菜單部分

單擊此區(qū)域，您的Menu Settings應(yīng)出現(xiàn)在左側(cè)面板中?，F(xiàn)在，找到Select menu字段。在下拉列表中，選擇您之前創(chuàng)建的菜單：

選擇您之前創(chuàng)建的菜單

此時(shí)，您應(yīng)該會(huì)在Header模板中看到該菜單。單擊屏幕左下角的更新，您的標(biāo)準(zhǔn)頁眉就完成了。

讓我們看看它是如何工作的：

新頁眉

如您所見，我們的Header看起來很棒。但是，當(dāng)我們向下滾動(dòng)時(shí)，它會(huì)消失。讓我們看看如何讓它堅(jiān)持下去。
第 4 步：使您的header固定
對于我們的最后一步，導(dǎo)航到ElementsKit > Header Footer > Edit with Elementor。然后選擇您的Header并單擊帶有六個(gè)點(diǎn)的中心圖標(biāo)：

點(diǎn)擊虛線圖標(biāo)

當(dāng)您將鼠標(biāo)懸停在它上面時(shí)，您會(huì)看到它允許您編輯部分。單擊它后，您的編輯選項(xiàng)將出現(xiàn)在左側(cè)面板中。

單擊Advanced選項(xiàng)卡并向下滾動(dòng)到Sticky Header Effects。將出現(xiàn)一條警告消息，說明該插件無法控制固定header，但您可以忽略它。由于我們還為Elementor插件添加了Sticky Header Effects，所以它可以正常工作。

現(xiàn)在通過將開關(guān)切換到ON來啟用Elementor固定header：

啟用Elementor固定header

根據(jù)您的主題，您的置頂Header可能看起來是透明的。如果是這種情況，您可能需要進(jìn)行一項(xiàng)風(fēng)格更改。

在“Edit Section”?面板中的“Style”下，轉(zhuǎn)到“Backgroud”>“Color” ，并確保您選擇了一種與您的正常背景相映成趣的陰影：

如果需要，進(jìn)行風(fēng)格上的改變

然后點(diǎn)擊更新?，F(xiàn)在您可以預(yù)覽您的網(wǎng)站以查看最終結(jié)果：

激活固定header

就是這樣！這是一個(gè)簡單的Elementor固定頁眉，但它可以輕松地將您的網(wǎng)站提升到一個(gè)新的水平。

如何使用Elementor Pro創(chuàng)建固定頂部欄

使用Elementor Pro時(shí)，創(chuàng)建固定頁眉要簡單一些。您只需三個(gè)簡單的步驟即可將此功能添加到您的網(wǎng)站。

第 1 步：創(chuàng)建您的菜單

要制作菜單，請導(dǎo)航到WordPress儀表板中的外觀 > 菜單：

創(chuàng)建菜單

給您的菜單起一個(gè)描述性的名稱，選擇Display location旁邊的Primary Menu，然后單擊Create Menu：

命名您的菜單并選擇一個(gè)位置

此時(shí)，您的網(wǎng)站上應(yīng)該有一些現(xiàn)有頁面。從左側(cè)面板中選擇您希望包含在菜單中的頁面。

然后單擊Add to Menu，然后單擊Save Menu：

選擇要包含在菜單中的頁面

現(xiàn)在您的頁面應(yīng)該填充在Menu Structure下的右側(cè)。

第 2 步：創(chuàng)建您的header

接下來，我們需要?jiǎng)?chuàng)建我們的基礎(chǔ)。讓我們做一個(gè)經(jīng)典的Header。

首先，?在左側(cè)邊欄中找到Elementor選項(xiàng)卡。在其下方，轉(zhuǎn)到Templates > Theme Builder。以下頁面將如下所示：

在“主題生成器”中找到“模板”

正如您可能看到的，使用Elementor Pro，您可以輕松開始設(shè)計(jì)網(wǎng)站的每個(gè)元素。

單擊Header元素上的加號圖標(biāo) (?+?) ?，F(xiàn)在您應(yīng)該會(huì)看到一個(gè)彈出窗口，其中顯示了您可以從中選擇的多個(gè)header區(qū)塊：

從多個(gè)header區(qū)塊中選擇

如果您有一個(gè)預(yù)先存在的Header模板，您可以在我的模板選項(xiàng)卡下選擇它。否則，您可能需要使用Elementor Pro隨附的部分區(qū)塊之一。

做出選擇后，只需將鼠標(biāo)懸停在所需的區(qū)塊上，然后單擊Insert：

插入所需的區(qū)塊

在這里，您會(huì)看到該區(qū)塊帶有自己的徽標(biāo)，但我們的導(dǎo)航菜單已自動(dòng)填充?，F(xiàn)在，點(diǎn)擊發(fā)布：

單擊發(fā)布設(shè)置中的“添加條件”

以下屏幕將提示您確定您的發(fā)布設(shè)置。在這里，選擇ADD CONDITION 來決定你想在哪里顯示你的Header：

選擇要顯示模板的位置

您可能希望選擇INCLUDE?旁邊的Entire Site。您還可以通過單擊包含旁邊的箭頭并切換到替代項(xiàng)來排除某些站點(diǎn)區(qū)域。當(dāng)您對您的選擇感到滿意時(shí)，點(diǎn)擊保存并關(guān)閉。

此時(shí)，屏幕右下角會(huì)出現(xiàn)一條彈出消息。如果在您單擊它之前它沒有消失，請選擇查看您的實(shí)時(shí)站點(diǎn)的選項(xiàng)。

或者，返回您的WordPress儀表板并通過單擊左上角的房子圖標(biāo)然后選擇訪問站點(diǎn)來預(yù)覽您的站點(diǎn)：

Header現(xiàn)在可用

如您所見，我們的Header現(xiàn)在可以正常工作，但是當(dāng)我們向下滾動(dòng)頁面時(shí)，它會(huì)消失。讓我們看看我們能做些什么！

第 3 步：使您的頁眉固定

現(xiàn)在讓我們看看如何使用專業(yè)工具創(chuàng)建Elementor置頂頁眉！

轉(zhuǎn)到模板 > 主題生成器 并選擇您剛剛制作的Header。然后，單擊 以下屏幕上鉛筆圖標(biāo)旁邊的編輯。這將帶您回到Elementor編輯器。

將鼠標(biāo)懸停在您的Header模板上，然后單擊中心的六點(diǎn)圖標(biāo)。這將在左側(cè)打開您的編輯部分面板：

點(diǎn)擊虛線選項(xiàng)進(jìn)行編輯

現(xiàn)在，導(dǎo)航到“Advanced”選項(xiàng)卡并找到“Motion Effects”部分。在這里，?通過將開關(guān)切換到ON來啟用滾動(dòng)效果：

將“Motion Effects”選項(xiàng)切換為“開”

然后，向下滾動(dòng)Motion Effects部分以找到Sticky字段。在下拉菜單中，選擇Top：

在“Sticky”選項(xiàng)下拉列表中選擇“Top”

現(xiàn)在，點(diǎn)擊UPDATE。請記住，根據(jù)您的主題配色方案，您的Elementor頂部固定欄可能看起來是透明的：

固定頂部欄現(xiàn)在可以正常運(yùn)行

如果是這種情況，并且您不喜歡它的外觀，您可以隨時(shí)更改背景顏色。在“Edit Section”?面板中，轉(zhuǎn)到“Style”>“Background” ?，然后選擇“Normal”作為背景類型。

現(xiàn)在，為您的Header模板選擇一種新的背景顏色。您需要選擇一個(gè)與頁面其余部分互補(bǔ)的陰影，但也可以創(chuàng)建一個(gè)很好的對比：

如果適用，編輯固定頁眉

由于這只是一個(gè)示例，我們只是選擇灰色來使我們的Header不那么透明。

現(xiàn)在，單擊更新以保存您的更改。繼續(xù)并預(yù)覽您的最終結(jié)果：

查看所做的任何更改

就是這樣！您可能需要根據(jù)您的品牌調(diào)整樣式和顏色。只需確保在完成后始終保存更改。

如何使用CSS來增強(qiáng)您的Elementor Sticky Header

當(dāng)您在您的網(wǎng)站上實(shí)施Elementor固定頁眉時(shí)，它會(huì)感覺像是對您的網(wǎng)站設(shè)計(jì)進(jìn)行了重大改造。但是，您可能對進(jìn)一步的自定義或更多動(dòng)態(tài)功能感興趣。

既然您知道如何創(chuàng)建基本的固定頁眉，那么讓我們看看如何將您的設(shè)計(jì)提升到一個(gè)新的水平。您可以通過在WordPress中使用級聯(lián)樣式表 (CSS)代碼來做到這一點(diǎn)。

如果您是初學(xué)者或沒有編碼經(jīng)驗(yàn)，請不要擔(dān)心。使用Elementor可以輕而易舉地增強(qiáng)您的設(shè)計(jì)。

為此，請轉(zhuǎn)到Templates > Theme Builder > Header：

添加自定義CSS以更改Header

在Edit Section > Advanced > Custom CSS下， 您可以添加一個(gè)小的CSS片段來進(jìn)行樣式更改。

Elementor固定Header的類型

以下是您可能要為Elementor固定header考慮的一些流行增強(qiáng)功能！

透明固定頁眉

某些主題可能會(huì)自動(dòng)將固定header設(shè)置為透明。但是，如果您想使用CSS執(zhí)行此操作，您可以使用如下代碼片段?：

selector.elementor-sticky--effects{ background-color: rgba(133,130,255,0.5) !important }
selector{ transition: background-color 4s ease !important; }
selector.elementor-sticky--effects >.elementor-container{ min-height: 80px; }
selector > .elementor-container{ transition: min-height 1s ease !important; }

只需將此代碼復(fù)制并粘貼到自定義CSS字段中，然后根據(jù)您的喜好調(diào)整字段。此代碼段通過動(dòng)畫效果更改Header的背景顏色、透明度和高度：

用于Header背景自定義的CSS

僅這種類型的可能性是無窮無盡的。

縮小固定頁眉

另一種流行的選擇是隨著訪問者滾動(dòng)而變得越來越小的Header。這是此類Elementor粘性header所需的代碼：

header.sticky-header {
????--header-height: 90px;
????--opacity: 0.90;
????--shrink-me: 0.80;
????--sticky-background-color: #0e41e5;
????--transition: .3s ease-in-out;
????transition: background-color var(--transition),
????????????????background-image var(--transition),
????????????????backdrop-filter var(--transition),
????????????????opacity var(--transition);
}
header.sticky-header.elementor-sticky--effects {
????background-color: var(--sticky-background-color) !important;
????background-image: none !important;
????opacity: var(--opacity) !important;
????-webkit-backdrop-filter: blur(10px);
????backdrop-filter: blur(10px);
}
header.sticky-header > .elementor-container {
????transition: min-height var(--transition);
}
header.sticky-header.elementor-sticky--effects > .elementor-container {
????min-height: calc(var(--header-height) * var(--shrink-me))!important;
????height: calc(var(--header-height) * var(--shrink-me));
}
header.sticky-header .elementor-nav-menu .elementor-item {
????transition: padding var(--transition);
}
header.sticky-header.elementor-sticky--effects .elementor-nav-menu .elementor-item {
????padding-bottom: 10px !important;
????padding-top: 10px !important;
}
header.sticky-header > .elementor-container .logo img {
????transition: max-width var(--transition);
}
header.sticky-header.elementor-sticky--effects .logo img {
????max-width: calc(100% * var(--shrink-me));
}

如果您對如此龐大的代碼區(qū)塊不滿意，您可能需要查閱Elementor的指南以制作縮小的固定header。

有了這個(gè)設(shè)計(jì)，你最終會(huì)得到這樣的效果：

新的header效果

盡管此標(biāo)頭具有微妙的觸感，但其復(fù)雜性可能會(huì)給您的設(shè)計(jì)帶來更專業(yè)的感覺。

淡入淡出

除了這些時(shí)尚選項(xiàng)外，還有淡入/淡出功能（也稱為“顯示”）。它看起來像這樣：

淡入淡出

對于這種效果，您根本不需要接觸任何代碼。只需導(dǎo)航到主題構(gòu)建器中的Header即可。然后去Edit>高級>運(yùn)動(dòng)效果>滾動(dòng)效果：

編輯“透明度”選項(xiàng)

在這里，單擊Transparency字段旁邊的鉛筆圖標(biāo)，然后將Direction更改為Fade in或Fade out。然后，根據(jù)您的喜好調(diào)整您的設(shè)計(jì)。

這些透明效果有很多選項(xiàng)，因此我們建議查看Elementor的文檔。這樣，您將能夠獲得您想要的確切外觀。

小結(jié)

與值得信賴的網(wǎng)站建設(shè)者合作是支付資深網(wǎng)絡(luò)開發(fā)人員?創(chuàng)建網(wǎng)站的絕佳選擇。使用一些最好的網(wǎng)站設(shè)計(jì)軟件時(shí)，您可以輕松制作任何網(wǎng)站的基本元素。這些包括實(shí)用但漂亮的固定頁眉。

固定頂部欄（頁眉）可以為您的用戶創(chuàng)造更愉快的體驗(yàn)。您可以從各種動(dòng)態(tài)Header樣式中進(jìn)行選擇，包括透明和縮小。更好的是，您可以使用Elementor Pro及其免費(fèi)版本制作這些令人驚嘆的Header設(shè)計(jì)。