頁眉和頁腳是一個網站最重要的部分之一。 你網站的頁眉是訪問者登陸你的網站時首先注意到的東西。 頁眉指的是顯示企業標誌的導航欄，所有重要頁面的連結，任何CTA，以及通過電話號碼或電子郵件位址與你聯繫的方式。
一個結構良好的頁眉對你的網站至關重要，可以用來宣傳任何資訊或促銷活動。 它為潛在客戶探索網站創造了便利性。 一個好的標題就像一個好的推銷員.
頁眉可以有特定的類型，如粘性或固定。 粘性頁眉也被稱為固定頁眉。 它是一個聰明的導航工具，當訪問者向下滾動時，將主功能表固定在頁面的頂部。
粘性頁眉的重要性
粘性頁眉是一個固定的頁眉，允許使用者快速訪問搜索和所有重要的頁面，而不需要到頁面的頂部。 根據一項研究，22%的線民表示，有粘性頁眉的網站更容易流覽。 另一項研究發現，在電子商務網站上使用粘性頁眉可以增加3%的轉換率。
在Elementor中創建一個粘性頁眉並不簡單，特別是如果你是第一次創建一個網站。 因此，我們創建了一個循序漸進的指南，説明你用Elementor設計一個粘性頁眉，而不用寫一行代碼。
讓我們開始吧！
1.如何使用Elementor Pro創建粘性頁眉
粘性頁眉是一種非常有效的方式，為你的網站用戶創造便利。 讓我們看看如何使用Elementor Pro中的高級功能– Elementor主題生成器來快速設計一個粘性頁眉。
第1步：創建一個主功能表
在為你的網站創建粘性頁眉之前，首先，你需要在你的wp-admin > Appearance > Menus中創建主功能表。 添加所有你想在頁眉中顯示的重要頁面，必須在這裡列出。
第2步：打開主題產生器
創建主功能表後，進入 Elementor Templates > Theme Builder。 在主題生成器頁面，點擊頁眉部分並選擇 「添加新頁眉」。。
之後，會出現一個彈出視窗; 寫下頁眉範本的名稱，然後點擊 「創建範本」。。
現在你會被轉到Elementor編輯器頁面。 在這個頁面，你可以選擇任何預製的頁眉範本或創建自己的範本。 在這裡，我們將從頭開始創建一個粘性頁眉。
在我們開始創建頁眉之前，有必要強調一下，Elementor提供了7個以上的小工具，你可以利用它們來創建頁眉。
第3步：在Elementor中建立一個頁眉範本
現在選擇雙欄結構（一欄為標誌，另一欄為水平功能表）
然後進入佈局，在內容寬度中選擇盒式選項。
在「編輯欄」下選擇欄的寬度為20%。
現在，將你的網站的標誌添加到左欄，並選擇左對齊。 然後在右欄，添加導航功能表，選擇你在步驟1中創建的功能表。 現在，將主功能表對準右側。
在本教程中，我們正在創建一個基本的頁眉。 你可以通過添加懸停動畫效果、背景顏色和按鈕來創建一個更時尚的頁眉。
第4步：讓你的Elementor頁眉具有粘性
現在你已經設計了一個基本的頁眉，現在是時候讓它變得有粘性。 要使它固定，點擊編輯部分，進入 Advanced > Motion Effects.
在高級部分，從下拉功能表中選擇粘在 「頂部」，選擇你想顯示粘性頁眉的設備，然後點擊發佈按鈕。
一旦發佈，將出現一個新的彈出螢幕，要求你為你的頁眉 「添加條件」。。 設置條件決定了你的頁眉在整個網站的使用位置。 例如，選擇 「整個網站 」來顯示整個網站。
就這樣，現在你知道如何在Elementor中通過幾個步驟創建一個粘性頁眉了。
用自定義CSS添加更多風格
你可以使用自定義CSS類使你的Elementor粘性頁眉更加時尚。 你可以添加背景顏色、高度、粘性效果和過渡效果。 讓我們看看如何實現這個目標。
回到 “編輯部分”，進入 Advanced > Motion Effects.
轉到運動效果下的 「效果偏移」 輸入數值100。 這是滾動距離，每當使用者登陸你的網站時，滾動效果就會出現。
向下滾動並打開 「自定義CSS 」下拉功能表。 粘貼下面給出的CSS類。 你也可以編輯這個CSS來設計你喜歡的方式。
selector.elementor-sticky–-effects {
background-color: rgb(255, 220, 168) !important;
}
selector {
transition: background-color 3s ease !important;
}
selector.elementor-sticky–-effects > .elementor-container {
min-height: 80px;
}
selector > .elementor-container {
transition: min-height 1s ease !important;
}2.使用Xpro Elementor主題生成器創建一個免費的粘性頁眉
你也可以使用免費的Xpro Elementor Theme Builder來創建一個具有完整創意設計體驗的粘性頁眉。 它是一個免費的Elementor外掛程式，為你提供了使用高級頁眉範本和主題生成器部件創建一個粘性頁眉的功能。
讓我們看看如何使用這個主題產生器外掛程式在Elementor中創建一個粘性頁眉。
第1步：安裝Xpro主題產生器外掛程式
進入你的WordPress儀錶板 > 外掛程式 > 添加新的。
現在，搜索Xpro Elementor主題生成器，點擊 「立即安裝 」按鈕，並在安裝后 「啟動」 它。
啟動外掛程式後，你將在儀錶板的側邊欄看到 「Xpro Addons」選項。
第2步：創建一個粘性頁眉
要創建粘性頁眉，請進入Xpro Addons > Theme Builder > Add new。
添加你的粘性頁眉的頁眉。 在 「範本類型 」下拉功能表中選擇 「頁眉 」選項。
在 「Header Sticky 」選項中選擇 「Enable」，並在保存設置後點擊 「Edit with Elementor 」按鈕。 你也可以根據你的選擇來調整其他設置。
現在，你將被重定向到 Elementor 編輯頁面。 在這個頁面上，你可以選擇任何一個現代的預建範本或創建自己的範本。 在這裡，我們將從頭開始創建一個粘性頁眉。
選擇兩欄結構，一欄為標誌，另一欄為功能表。
現在從 「佈局 」選項中，將你的內容寬度設置為 「盒式」。
從結構下拉功能表中設置比例為 「33，66 」的結構。
在左欄添加你的網站的 「網站LOGO」，並在常規下拉功能表中選擇左對齊選項。 然後在右欄，添加導航功能表並選擇 「主功能表」。 現在，將主功能表對齊到右側。
現在，點擊更新，你的頁眉將在你的網站上上線
3.用myStickymenu創建一個粘性頁眉
myStickymenu是另一個WordPress外掛程式，可用於為您的Elementor網站創建一個漂亮的自定義頁眉。 你可以為公告創建一個歡迎欄，為促銷活動添加一個倒計時，以及更多。
讓我們用myStickymenu創建一個粘性頁眉。
第1步：安裝外掛程式
要安裝該外掛程式，請到你的WP儀錶板>外掛程式>添加新的。
現在，搜索myStickymenu，點擊 「立即安裝」，然後點擊 「啟動」。。
第2步：啟用粘性設置
進入設置 > myStickymenu。 切換粘性功能表按鈕，從粘性類別下的下拉功能表中選擇 「其他類別或ID」。。
根據你的網頁設計目標，改變其他設置，如不透明度或背景顏色。 現在，向下滾動並點擊 「保存按鈕」。 刷新你的網站，看看粘性標題的效果。
myStickymenu是一個創建粘性標題的好外掛程式，但它有一個缺點。 你只能用它製作一個基本的粘性標題。 要獲得更多的定製選項，你必須升級你的計劃，每年25美元起。
4.在WordPress中創建一個CSS粘性導航條
在Elementor中創建一個粘性標題的最後一個選項是在你的WordPress主題中使用自定義CSS。 要使用CSS創建一個粘性導航條，請登錄您的WordPress儀錶板，並按照以下步驟進行。
第1步：打開WordPress定製器
進入外觀 > 自定義 > 附加 CSS。
第2步：添加CSS代碼
添加以下CSS代碼。
nav {
background: #ffff;
height: 70px;
z-index: 999;
margin: 0 auto;
border-bottom: 1px solid #dadada;
width: 100%;
position: fixed;
top: 0;
left: 0;
right: 0;
}
