[ad_1]
頁眉和頁腳是網站最重要的部分之一。 您網站的標題是訪問者在登陸您的網站時首先注意到的。 標題是指顯示企業徽標、指向所有重要頁面的鏈接、任何 CTA 以及通過電話號碼或電子郵件地址與您聯繫的方式的導航欄。
結構良好的標題對您的網站至關重要，可用於宣傳任何消息或促銷活動。 它為潛在客戶探索網站創造了便利。 一個好的標題就像一個好的推銷員； 例如，僅在今天使用 20% 折扣的號召性用語會促使用戶購買您的產品。
標題可以是特定類型，例如粘性或固定。 粘性標頭也稱為固定標頭。 它是一種智能導航工具，可在訪問者向下滾動時將主菜單固定在頁面頂部。
粘性標題的重要性
粘性標題是一種固定標題，它允許用戶快速訪問搜索和所有重要頁面，而無需轉到頁面頂部。 根據一個 學習, 22% 的互聯網用戶表示帶有粘性標題的網站更易於瀏覽。 其他 學習 發現在電子商務網站上使用粘性標題可將轉化率提高 3%。
在 Elementor 中創建粘性標題並不簡單，特別是如果您是第一次創建網站。 因此，我們創建了一個分步指南來幫助您使用 Elementor 設計一個粘性標題，而無需編寫任何代碼。
讓我們開始吧！
1. 如何使用 Elementor Pro 創建置頂標題
粘性標題是為您的網站用戶創造便利的一種非常有效的方式。 讓我們看看如何使用 Elementor 主題構建器快速設計一個粘性標題，它是 元素專業版.
第 1 步：創建主菜單
在為您的網站創建粘性標題之前，首先，您需要 創建主菜單 在您的 wp-admin > 外觀 > 菜單中。 添加您想在標題中顯示的所有重要頁面必須在此處列出。
第 2 步：打開主題生成器
創建主菜單後，轉到 Elementor Templates > Theme Builder。 在主題構建器頁面上，單擊標題部分並選擇「添加新標題」。
之後，將出現一個彈出窗口； 寫下標題模板的名稱，然後單擊「創建模板」。
現在您將被重定向到 Elementor 編輯器頁面。 在此頁面上，您可以選擇任何預構建的標題模板或創建自己的。 在這裡，我們將從頭開始創建一個粘性標題。
在我們開始創建標題之前，重要的是要強調 Elementor 提供了 7 個以上的小部件，您可以利用它們來創建標題。
第 3 步：在 Elementor 中構建標題模板
現在選擇兩列結構（一列用於徽標，另一列用於水平菜單）。
然後轉到布局並選擇內容寬度中的盒裝選項。
在「編輯列」下選擇列寬為 20%。
現在，將您網站的徽標添加到左列並選擇左對齊。 然後在右欄中，添加導航菜單並選擇您在步驟 1 中創建的菜單。現在，將主菜單與右側對齊。
在本教程中，我們將創建一個基本標頭。 您可以通過添加懸停動畫效果、背景顏色和按鈕來創建更時尚的標題。
第 4 步：使您的 Elementor 標題具有粘性
現在您已經設計了一個基本的標題，是時候讓它變得粘滯了。 要使其修復，請單擊「編輯」部分並轉到「高級」>「運動效果」。
在高級部分下，從下拉列表中選擇「置頂」，選擇要在其上顯示置頂標題的設備，然後單擊發布按鈕。
發布後，將出現一個新的彈出屏幕，要求您為標題「添加條件」。 設置條件決定了您的標頭在整個網站中的使用位置。 例如，選擇「整個站點」以在您的站點中顯示它。
就是這樣，現在您知道如何通過幾個步驟在 Elementor 中創建粘性標題。
使用自定義 CSS 添加更多樣式
您可以使用自定義 CSS 類使您的 Elementor 粘性標題更時尚。 您可以添加背景顏色、高度、粘性效果和過渡效果。 讓我們看看如何實現這一目標。
返回「編輯部分」並轉到高級>運動效果。
轉到 Motion Effects 下的「Effects Offset」並輸入值 100。它是當用戶登陸您的網站時滾動效果出現的滾動距離。
向下滾動並打開「自定義 CSS」下拉菜單。 粘貼下面給出的 CSS 類。 你也可以編輯這個 CSS 來設計你喜歡的樣式。
自定義 CSS：
selector.elementor-sticky–effects { background-color: rgb(255, 220, 168) !important; } 選擇器 { 過渡：背景色 3s 輕鬆！重要； } selector.elementor-sticky–effects > .elementor-container { min-height: 80px; } 選擇器 > .elementor-container { 過渡：最小高度 1s 輕鬆！重要； 2. 使用 Xpro Elementor Theme Builder 創建一個免費的粘性標題菜單
您還可以使用免費的 Xpro Elementor 主題生成器 創建具有完整創意設計體驗的粘性標題。 它是一個免費的 Elementor 附加組件，可讓您使用高級標題模板和主題構建器小部件創建粘性標題。
讓我們看看如何使用這個主題構建器插件在 Elementor 中創建一個粘性標題。
第 1 步：安裝 Xpro Theme Builder 插件
轉到您的 WordPress 儀錶板 > 插件 > 添加新的。
現在，搜索 Xpro Elementor 主題生成器，單擊「立即安裝」按鈕，並在安裝後「激活」它。
激活插件後，您將在dashboard.ss 的側邊欄中看到「Xpro Addons」選項
第 2 步：創建粘性標題
要創建粘性，請轉到 Xpro Addons > Theme Builder > Add new。
添加粘性標題的標題。 從「模板類型」下拉列表中選擇「標題」選項。
從「Header Sticky」選項中選擇「Enable」，然後在保存設置後單擊「Edit with Elementor」按鈕。 您還可以根據自己的選擇調整其他設置。
現在您將被重定向到 Elementor 編輯器頁面。 在此頁面上，您可以選擇任何現代預建模板或創建自己的模板。 在這裡，我們將從頭開始創建一個粘性標題。
選擇兩列結構，一列用於徽標，另一列用於菜單。
現在從「布局」選項中，將您的內容寬度設置為「盒裝」。
從「結構」下拉列表中使用「33,66」比率設置結構。
將您網站的「站點徽標」添加到左列，然後選擇「常規」下拉菜單下的左對齊選項。 然後在右欄中，添加導航菜單並選擇「主菜單」。 現在，將主菜單與右側對齊。
現在，單擊更新，您的標題將在您的網站上生效。
3. 使用 myStickymenu 創建置頂菜單
myStickymenu 是另一個 WordPress 插件，可用於為您的 Elementor 網站創建漂亮的自定義標題。 您可以為公告創建歡迎欄、為促銷添加倒計時等等。
讓我們創建一個粘性菜單 我的粘滯菜單.
第 1 步：安裝插件
要安裝插件，請轉到您的 WP Dashboard > Plugins > Add New。
現在，搜索 myStickymenu，單擊「立即安裝」，然後單擊「激活」。
第 2 步：啟用粘性設置
轉到設置 > myStickymenu。 切換粘性菜單按鈕並從粘性類下的下拉列表中選擇「其他類或 ID」。
根據您的網頁設計目標更改其他設置，例如不透明度或背景顏色。 現在，向下滾動並單擊「保存按鈕」。 刷新您的網站以查看正在運行的粘性標題。
myStickymenu 是一個用於創建粘性標題的好插件，但它有一個缺點。 您只能用它製作一個基本的粘性標題。 要獲得更多自定義選項，您必須從每年 25 美元起升級您的計劃。
4. 在 WordPress 中創建 CSS 粘性導航欄
我們博客中用於在 Elementor 中創建粘性標題的最後一個選項是在您的 WordPress 主題中使用自定義 CSS。 要使用 CSS 創建粘性導航欄，請登錄您的 WordPress 儀錶板並按照以下步驟操作。
第 1 步：打開 WordPress 定製器
轉到外觀 > 自定義 > 附加 CSS。
第 2 步：添加 CSS 代碼
添加以下 CSS 代碼。
導航{背景：#ffff； 高度：70px； z指數：999； 邊距：0 自動； 邊框底部：1px 實心#dadada； 寬度：100%； 位置：固定； 頂部：0； 左：0； 右：0； }
現在您可以根據自己的喜好自定義標題，但這需要充分了解 HTML 和 CSS。 大多數主題都提供此功能作為高級功能。 但是，我們使用了 Xpro 免費主題 舉個例子。
如果您的網站提供長篇內容，那麼添加粘性導航標題可能有助於改善用戶體驗。 與本博客中強調的其他方法相比，使用 Elementor Pro 和 Xpro Elementor 主題構建器創建粘性標題非常容易。 Xpro 提供的還附帶 免費的 Xpro 插件. 最後，您可以選擇適合您的 Elementor 網站的任何方法。
如果您對如何在 Elementor 中創建粘性標題有任何疑問，請在評論部分告訴我們。 我們將很樂意為您提供幫助。