如何使用Elementor在WordPress中添加頂級欄

頂級欄提供了一種有效的方法來突出重要的消息，促銷和對WordPress上的行動。它位於網頁的頂部，目的是吸引訪問者的注意力而不會阻礙用戶的瀏覽體驗。

精心設計的頂級酒吧可以大大提高轉化措施，因為它可以立即吸引訪客的注意力，並指導他們採取諸如報名新聞通訊，獲取限時報價和探索新內容之類的行動。 它可以作為持續的提醒而無需打擾用戶。

對於Elementor，將頂級條添加到WordPress非常簡單。在本文中，我們將介紹如何在WordPress中使用Elementor添加頂級欄。與我們在一起直到最後。

什麼是頂級酒吧？

頂部欄是一個狹窄的水平部分，該部分顯示在主標題上方的網站頂部。與彈出窗口或橫幅不同，它用於展示聯繫方式，鏈接描述，重要公告，促銷優惠和消息。您可以通過廣泛的自定義（例如顏色，字體和特定品牌的按鈕）來增強用戶參與度。

頂級欄並不總是顯示在24/7網站的頂部。相反，它通常在競選期間出現出於促銷目的。它由不同的名稱定義，具體取決於其用例。我們將在下一節中進行討論。繼續閱讀。

網站上的頂級酒吧是什麼？

正如一分鐘前所說，網站上的頂級欄是根據其目的和功能來定義的。看看下面列出的頂級欄的一些常見術語。

• 公告欄 -用於共享公告，事件通知和重要更新。

• 通知欄 -顯示限時報價，系統維護新聞和緊急消息。

• 促銷欄 -突出顯示特殊促銷活動，獨家折扣和廣告系列以提高銷售額。

• 信息欄 -展示聯繫電話，購物詳細信息，當地地址和營業時間。

• 粘性條 -即使用戶滾動帖子和頁面，也可以固定在網站的頂部。

• 浮子欄 -滾動帖子和頁面時移動以確保明顯的存在。

如何使用Elementor在WordPress中添加頂級欄

理論部分結束了。現在，我們將介紹本節中的教程部分，並解釋瞭如何使用Elementor中的WordPress添加頂級欄的分步指南。

先決條件：安裝Elementor或Happyaddons

要在整個網站上創建頂級欄，您必須可以訪問Elementor主題構建器，這是高級功能。如果您想使用插件的高級版本並正在尋找免費選項，則必須嘗試HappyAddons插件。

HappyAddons實際上是Elementor插件的插件，其許多免費功能通常在Elementor中很高。例如，HappyAddons也有一個主題構建器，它與Elementor非常相似，但完全免費使用。

因此，在本節中，我們將使用HappyAddons插件來解釋本教程。在您的網站上安裝並激活以下插件。

• Elementor
• Happyaddons

在您的網站上安裝並激活它們後，開始遵循下面解釋的教程。我們將向您展示如何在WordPress上創建頂級欄，就像您在下圖中看到的那樣。

步驟01：轉到Happyaddons主題建造者

導航到HappyAddons>主題構建器。像Elementor插件一樣，您可以使用HappyAddons插件的主題構建器創建標題，頁腳，博客文章模板和存檔頁面。

步驟02：轉到標題部分

當頂部欄顯示在網絡標頭頂部的頂部時，您必須從“標頭”部分自定義它。因此，使用Elementor選項打開標題。

了解如何在Elementor中創建外面的內容。

步驟03：在標題上方添加一個新容器

將您的光標懸停在標題上，將顯示加號（+）圖標。單擊此圖標將使您可以在上面的標頭中添加一個新容器。做到。

步驟04：自定義頂部欄並添加內容

您必須在頂欄的背景中添加對比色的顏色。為此，請單擊“容器”上的六點圖標>轉到“樣式”選項卡>找到顏色選項>選擇顏色。

將文本編輯器小部件添加到頂級條形部分。這將使您可以在本節中添加文本內容。

在右側欄上的文本編輯器下，您可以編寫所需的文本內容，這些內容將實時顯示在頂部欄上。

從“文本編輯器”部分下的下面標記的選項中，您可以更改已添加到頂部欄的文本的顏色和大膽性。

您甚至可以在單詞之間添加空間並強調某些單詞。我們已經對本教程的文本做了這一點。您可以在下面看到它們。

HappyAddons允許您在頂級欄的背景中添加粒子效果。快樂的粒子效應是一種視覺動畫技術，在網頁上，小型發光的粒子動態移動，創造活潑而引人入勝的用戶體驗。

要添加此信息，請導航到樣式>快樂粒子效果。之後，將切換到啟用粒子背景。

接下來，您可以選擇粒子樣式，粒子，不透明度，顆粒數，粒度和移動速度。希望你能自己做。

我們添加了一個簡短的剪輯，因此您可以檢查快樂粒子功能的工作原理。這確實使頂部的酒吧看起來很不錯。

擴展邊界部分。您可以根據需要設置邊框寬度和顏色。但是，我們認為添加邊框對頂級欄並不重要。因此，您可以避免它。

現在，擴展形狀分隔部分。 Shape Divider選項使您可以在各節的頂部或底部添加可自定義和動態的形狀。

但是，此選項對於頂級欄也不重要。因此，最好避免它。但是，如果您想將此功能添加到頂級欄中，則可以做到。

這是有關如何使用Elementor創建信息圖網頁的指南。

步驟05：配置頂級欄的高級設置

最後，來到高級選項卡。您將在這裡獲得許多選擇，以自定義邊距，填充，訂單，訂單，位置，身高，運動效果，響應能力等等。自己進行必要的自定義。

步驟06：在設備類型上隱藏頂部欄

您可以在所需的任何設備上隱藏頂部欄。例如，我們想隱藏平板電腦設備上的頂部欄。為此，擴展響應部分。然後，切換要隱藏頂部欄的設備模式的選項。

步驟07：使頂部欄移動響應能力

單擊Elementor面板的頁腳上的響應模式選項。然後，選擇移動肖像模式。

您會看到，頂級欄內容以三行出現，並且與在桌面模式下看到的方式不同，並且不是完全對齊。

為了使文本看起來很適合屏幕尺寸，請在移動肖像模式下執行所需的自定義。

我們已經將文本中心對齊。現在看起來好嗎？您可以以任何想要的方式對其進行定制。

步驟08：發布/更新更改

完成所有自定義時，請單擊Elementor面板底部的發布/更新按鈕，以保留所有更改。

探索如何使用Elementor在WordPress中創建一個Lightbox。

步驟09：預覽網站上的頂級欄

現在，來到您網站的前端。您會看到頂部的頂部顯示在您的網站頂部。

因此，您可以免費使用Elementor插件在WordPress上輕鬆創建頂級條。

最後的想法

希望您喜歡這個教程。但是，要從頂級欄中獲得最好的東西，您必須仔細遵循幾件關鍵的事情。專注於保持與網站品牌相吻合的干淨和視覺上吸引人的設計。選擇對比色的顏色，以實現可讀性，使用清晰而簡潔的文本，並使信息與您的受眾相關。

此外，對移動響應性進行優化，因此頂部欄在所有設備中都保持功能，而不會阻礙用戶體驗。避免將頂部欄過多的信息超載，因為它會壓倒訪問者。如果使用動畫或效果，請保持其微妙以保持專業精神。

如果您仍然有任何混亂或疑問，請通過下面的評論框讓我們知道它們。