Elementor 的最佳頁眉設計習慣 | 了解 10 個殺手級事實

已發表: 2022-08-17

“抓住訪問者很容易,只要寫一篇帶有任何標題的文章並發布它!” - 如果你這樣想,你就進入了一個夢想的世界。 在網絡市場上確立自己的地位並不容易。 當您撰寫帶有模糊標題的文章時,訪問者將完全不了解您要說的內容並跳過它。

這足以讓您的網站在短時間內崩潰並失去訪問者。 如果這種情況持續下去,一家知名公司將在很短的時間內倒下。 在本文中,我們將討論適用於網站的 Elementor 的最佳標題設計習慣。

1. Bad Header falls down a company-01

我們身處企業界,我們都希望盡可能地把我們的業務做大,並儘最大努力將其推向最高位置。

這是一個你應該理解的場景——你成立了一家公司,讓員工生產優質產品,並儘你所能保持業務運轉,但發表了帶有任何或模糊標題的文章來推廣你的產品。

你認為結果會是什麼? 絕對為零!

因為擁有優質的產品而沒有格式良好的廣告文章是徒勞的。

Good header helps ranking up

因此,您必須寫一篇帶有特定且有意義的標題的文章,以吸引即將成為客戶的訪問者的眼睛,並告訴其他人這樣做。 你怎麼能那樣做?

保持聯繫直到最後以了解更多信息。

開始吧!

what is an Elementor header

什麼是 Elementor 標頭?

Elementor 標頭或網站標頭是網站的頂部頂部,其中包含徽標、導航,有時還有其他信息,即:文本、圖像、gif; 找到鏈接和按鈕。

標題就像一張臉。 一個人的臉可以表達他的個性和態度,網站或網頁的標題也是如此。 乍一看,它使讀者對您要說的內容有一個清晰的概念。

why header is important

為什麼標題很重要?

既然您已經對標頭有所了解,讓我們詳細了解標頭的重要性。 標題是網站的主要部分,當然也是至關重要的部分,它可以吸引訪問者的注意力或迫使他立即從網站掉頭。

如果標題無法吸引訪問者的眼球,那麼他們肯定不會有興趣閱讀您的文章。 吸引人的標題可以幫助您從不知名的訪問者中脫穎而出,並在短時間內使他成為客戶,並吸引更多訪問者訪問您的網站。

以下是標題如此重要的一些原因:

  • 第一眼看到您的網站時,它就抓住了訪問者的吸引力
  • 它使訪問者有興趣通過單擊或搜索查詢來探索網站
  • 它是大多數訪客會遇到的品牌徽標的所在地
  • 它用作網站的目錄
  • 它提供了與公司、聯繫方式等相關的額外信息
  • 它包括為準備採取下一步行動的人提供的 CTA 按鈕

通常,標題對大多數網站都有類似的用途。 儘管如此,您仍可以根據網站類型、品牌風格以及您希望在其中存儲多少信息,自由創建不同類型的標題。

why is a header design needed

為什麼需要標頭設計?

您想製作這樣的標題,以吸引在線市場上大多數訪問者的注意力,從而幫助您擴大業務。

為此,您必須有一個標題設計。 標題設計使您能夠創建一個良好、健康和吸引人的標題的佈局,這將粉碎其他人並讓您成為排名第一的方法。

所以,一個標題設計是必須的,它可以幫助你更整齊、更精確地裝飾你的標題。

我們通常在 WordPress 中使用的標題設計類型

我們在 WordPress 中使用了一些常見的網站標題設計。 它們如下所示:

elementor sticky header helps users read easily

-> 縮小粘性標題

這是一種網站標題設計,以常規標題開頭,當您開始向下滾動時,標題會變短或變小,然後變得透明。

同時,當您向下滾動時,它會將標題保持在屏幕上的相同位置。 它有一個部分粘性標題的版本,當你向下滾動時它會消失,但當你開始向上滾動時,它會再次出現。

navigation bar or best navigation header help to catch the eyes of the visitors

- >導航標題/導航的最佳標題

網站是零售業常見的一系列網站的一部分,可以選擇在標題上方添加一個額外的欄,以快速鏈接到其他商店。 這樣做的好處是,您不必為它們創建單獨的欄,訪問者可以在同一個欄內獲取鏈接。

5. Mobile Header Design

-> 移動標題設計

手機頭的設計適合手機用戶使用,也是常用的。 在屏幕上的這個設計中,標誌出現在最左側,在漢堡圖標下方,插入了導航和其他鏈接。

hybrid header

-> 混合頭

由於移動設備和桌面設備之間的界限模糊,網站採用混合標題設計也就不足為奇了。 通常,它看起來像一個標準的單行標題。 不過,桌面訪問者的其他導航鏈接保存在漢堡菜單圖標中。

7. Vertical aligned Header

-> 垂直對齊的標題

您可以使用垂直對齊的標題來使您的網站視圖與眾不同並吸引訪問者。 您可以根據自己的喜好將標題位置設置在左側或右側,這將非常適合您的業務。

這種標題設計導致人們傾向於選擇它作為他們網站上的酒店和其他基於服務的業務的受人尊敬的選項。

WordPress 網站理想標頭的一部分

您看到的標題中的元素可能因網站而異,但此處的這些選項是最常見的。 您不必包括所有這些。

如果您在標題中插入超出需要的功能,它會看起來很密集並且可能會使訪問者感到困惑。 相反,您的目標是在標題中為訪問者保留足夠多的信息。

讓我們看一下您可以在網站標題中包含的最常見元素:

  1. 一個標誌
  2. 導航菜單
  3. 搜索欄
  4. 社交媒體圖標
  5. 聯繫信息
  6. 呼籲採取行動

現在,為了您的好消息,我將深入討論這些元素:

a logo

1. 一個標誌

如果您想在網站的頂部佔據一席之地,您必須擁有自己的品牌標誌,因為這是每個訪問者訪問您的網站時看到的第一件事。 這就是它應該放在標題中的原因。

標誌設計必須與標題的其他元素不同且迷人,才能吸引訪問者的眼球。

下一個重要的事情是徽標的位置。 錯誤的標誌位置會讓訪問者跳過你的網站,你的網站很快就會被拋棄。 位置可能會有所不同,但通常,它位於大多數網站的左角或中間。

因此,定位對於您的品牌推廣來說是一個至關重要的問題,您必須明智地選擇放置它的位置,以便為您的網站吸引大量流量。

您可能知道一些常見且完全可以接受的情況:

  • 如果站點沒有徽標,則取而代之的是站點標題代替徽標。
  • 一些站點同時具有徽標和站點標題。
  • 有時,網站標題是徽標圖像的一部分。

您的主要目標是打造您網站的品牌並為其吸引大量流量,因此請充分利用標題中的徽標,使其完美運作並實現您的目標。

simple script font helps navigating frequently

2.導航菜單

標題中最關鍵的元素是導航菜單。 它有助於包含一個鏈接到您網站的所有重要頁面的菜單,其中每個頁面都相互關聯。 有四個主要鏈接,即:WordPress.com 菜單上的產品、功能、資源以及計劃和定價。 除非您的網站只有很少的頁面,否則最好不要將所有頁面鏈接都填充到菜單中,即使您認為所有頁面都很重要。

如果您的訪問者很容易鳥瞰,他們會在探索您網站上的內容時感到自信。 您必須使導航中的鏈接易於閱讀,並使用文本告訴訪問者點擊後可以期待什麼。

此外,它可以包括按鈕,即:登錄、我的帳戶和購物車。 導航的數量和類型因您網站的大小和您的需求而異。 您可以使用左側的漢堡菜單讓您的訪問者輕鬆找到他們正在尋找的選項。

9. Search Bars

3. 搜索欄

如果您安排了一個巨大的檔案或內容庫,您通常需要在標題區域的右側添加一個搜索功能,這就是它的正確位置。

您必須記住,放大鏡圖標並不代表搜索欄,它與“搜索”一詞配對,並帶有人們可以輕鬆找到的圖標。

使用此選項,您可以阻止用戶轉到新頁面進行搜索,他們可以輕鬆地在此處進行查詢並提供更好的用戶體驗。

您可以包含“隱藏”搜索欄以節省僅在您單擊圖標時顯示的空間,這是一種明智的設計方法,如果您在擁擠的區域中有許多項目,您可以這樣做。 這意味著,此過程可以節省空間並增加訪問者查看您網站的次數。

Social Icon GIF - BdThemes

4. 社交媒體圖標

目前,人們在線上社交媒體比線下或正常生活更活躍。 因此,您可以通過在標題區域添加圖標來鏈接到社交媒體,這將佔用很少的空間,但極大地幫助您吸引更多訪問者訪問您的網站。

contact information

五、聯繫方式

如果您經營實體店或有客戶聯絡中心,最好在標題中包含聯繫信息。 其他競爭對手,如房地產經紀人、當地企業、服務提供商和顧問,喜歡確保顯著展示他們的聯繫信息。 例如,您可以通過添加聯繫電話來獲得更多潛在客戶。

11. Call to Action

6. 號召性用語

您可以使用標題中的聯繫電話作為您網站需要的行動號召,其他人可能會使用不同的行動號召。

您可以使用註冊選項代替聯繫電話,以便您的訪問者參與您的時事通訊或創建一個帳戶。

標題是這樣一個地方,可以通過放置按鈕、表單或鏈接來鼓勵用戶採取行動。 您可以根據需要將其中任何一個用作您網站的號召性用語。

difference between a woocommerce site header and a normal site header

WooCommerce 網站標題和普通網站標題有什麼區別?

現在,這裡出現了一個至關重要的問題:WooCommerce 網站標題是否類似於普通網站標題? 它們之間有什麼區別嗎? 好吧,讓我們在下面找到:

WooCommerce 網站標題:

  1. 它包含與公司相關的政策。
  2. 它通知訪問者有關產品的信息。
  3. 它將訪客轉化為客戶。
  4. 它宣傳公司的所有產品和商譽。
  5. 它主要涵蓋公司的財務部分。
  6. 它有助於將公司發展得更大。
  7. 它是面向目標的。

一個普通的站點標題:

  1. 它包含一般對話或閒聊。
  2. 它不會通知訪問者任何產品。
  3. 它不會將訪問者轉化為客戶。
  4. 其中沒有關於任何產品的促銷活動。
  5. 它通常討論匿名主題。
  6. 這對公司發展壯大沒有幫助。
  7. 它不是面向目標的。

你需要知道的10個殺手級事實

我們在上面談得夠多了! 現在,請允許我告訴你關於 10 個殺手的事實。 這些在下面給出:

the header clarifies your message to your audience

1.標題向聽眾闡明了您的信息

如您所知,俗話說-'一見鍾情'。 這同樣適用於該領域。 當訪問者第一次看到標題時,它會給他一個關於文章內容的明確信息。

這吸引了訪問者的眼球,並產生了將文章通讀到最後的願望。 如果一個標題對訪問者來說是模糊的,讓他感到困惑和搖擺不定,他根本不會有興趣閱讀這篇文章,他會快速掉頭。

這是您的網站立即觸底的警告信號。 因此,您必須在標題中向訪問者闡明您的信息。

well-organized and well-structured header attracts visitors

2. 組織良好且結構良好的標題吸引訪客

您必須保持標題組織良好且結構良好,因為它是訪問者進入您的博客區域的門戶。 它可以幫助他們輕鬆快速地找到他們正在尋找的內容。 下面我們來分析一下:

  • 根據“共同區域法則”的原則設計標題 - 徽標和導航保持在一個平台上,保持等距間距並被視為一個整體。
  • 保留 CTA,即:聯繫銷售、登錄、免費試用,在標題的右上角,這將有助於訪問者繼續前進。
  • 在子導航中提出問題、概述、功能和計劃,這將使您的訪問者對您的網站感興趣。
  • 使用比其他字體更粗更大的字體來突出主標題,使其更大更亮。 這種設計將使訪問者專注於標題,然後他們將轉到附加信息。
Simple Fonts help visitors Easy To Read - BdThemes

3.簡單的字體幫助訪問者易於閱讀

在標題中選擇簡單的字體有助於訪問者易於閱讀並使轉換率翻倍。 所以,最好不要讓標題成為你的字體選擇的創意地方,除了標誌。

您可以為徽標自由選擇手寫或手工字體,使其獨一無二。 您必須記住有關標題的這三點:

  • 請勿在標題中使用手寫或手工製作的字體,訪問者將難以閱讀。 相反,最好為文本和信息選擇襯線或無襯線網絡字體。
  • 將字體大小保持在適合頁眉區域的最小 16 像素。
  • 字體和背景之間的顏色對比度應至少為 4.5:1。

您可以使用 Elementor 中的樣式編輯器來構建完全自定義的標題,或者您可以轉到全局設置來定義排版和顏色以根據需要進行調整。

white space makes reading easy

4.留白讓閱讀更輕鬆

在標題中使用必要的空白使訪問者易於閱讀,從而吸引他們深入研究。 您必須盡可能多地保留標題中的空白。 請注意以下幾點:

  • 在讓徽標閃耀的元素之間保持必要的差距,以鼓勵訪問者登錄。
  • 保持相同的空間,在鏈接之間有細的分界線,這將有助於訪問者單獨關注它們。
  • 在搜索欄中留出足夠的空間,這實際上可以幫助用戶使用廣闊的區域找到所需的項目。
  • 您可以將標題背景全部設為黑色,並在其末尾放置一個大的白色塊,以吸引訪問者,它可以是 CTA。
1. Shrinking sticky header - BdThemes

5. 粘性標題更快地吸引訪問者

如果您想更快地吸引訪問者,請為您的廣泛文章保持標題的粘性。 具有長單頁和長提要的網站可以從中受益。

因此,訪問者總是可以在他們瀏覽的頁面下方看到他們視線附近的標題。 如果您想吸引更多訪問者訪問您的網站,可以遵循以下提示:

  • 當訪問者開始滾動時,將它們縮小。
  • 在標題和內容之間做出明顯的區別,以便訪問者可以識別它們。
  • 使用動畫,但要保持小。
elementor transparent header is good for navigation

6. 透明標題有利於導航

讓您的訪問者感覺輕鬆導航。 為此,使標題透明保持元素完整,這個棘手的設計將使您的網站更適合您的訪問者。 當文本上出現背景繁忙的標題時,訪問者將難以閱讀。

只要標題出現在文本上,當它們滾動到某些部分時,它就會變得不可讀。 以下是解決問題的幾點:

  • 在左側製作白色徽標並將白色漢堡菜單圖標放在右側。
  • 使視頻或圖像色彩豐富,與每頁頂部的白色形成鮮明對比。
  • 使用必要的視覺效果使您的網站保持輕量級,並且不要損害標題可見性的透明性。
custom header design for mobile helps more engagement

7. 移動端的自定義標題設計有助於提高參與度

不要只將桌面用戶視為您的訪問者,還要考慮移動用戶。 根據 Google 的建議,網站的移動版和桌面版包含相同的內容。

這無可爭辯,但桌面上的標題應該與移動端的元素具有相同的元素,這意味著移動端的設計應該不同。 您只需使標題設計適合移動設備。

讓我們比較一下區別:

  • 在桌面上 - 打開導航鏈接時,子導航顯示為它下方的水平行。
  • 在移動設備上 - 導航不適合移動網站的標題,因此,導航鏈接嵌入在漢堡圖標中。 當它打開時,它會在垂直視圖中顯示一個完整的標題,所有鏈接都以相同的方式顯示。

您可以使用 Elementor 自定義標頭構建器來執行此操作。 為此,請將您的響應模式切換到智能手機視圖並根據需要自定義元素。

Visual element talk more than - BdThemes

8. 視覺元素比文字更能說話

你很清楚,一張圖片比一堆文字強 100 倍。 您可以通過在標題中包含視覺元素來獲得更多流量。

對站點標題元素使用圖標,即:購物車、搜索欄、語言切換器、位置查找器等可能很有用,但請記住不要使用不常見或包含不明確含義的圖標。

始終嘗試添加使標題保持新鮮且不影響加載時間的圖像。 避免在標題中包含視頻,因為它不是視頻的理想位置。

Animation to the Navigation makes the content user friendly - BdThemes

9. 導航動畫使內容用戶友好

Over-the-top 動畫並不總是有效的。 但是,如果你以正確的方式使用它,你可以吸引遊客。 例如,在導航中應用小動畫可以增加訪問者的關注度和參與度。

這是您可以使用的示例:

  • 當訪問者將鼠標懸停在其中一個主要導航鏈接上時,其餘鏈接會淡出。 這種動畫效果將主要幫助他們專注於可用的內容。
  • 接下來,他將鼠標懸停在二級或三級鏈接上,頁面顏色與其餘選項不同。

再看一個例子:

  • 當第二級導航幻燈片打開時,您將在此處看到流暢的浮動動畫。
  • 然後,您將獲得應用到頁面而不是導航的淡入淡出效果。

讓我們看一下這個例子,這裡使用了 Elementor 小部件:

  • 您可以使用 Elementor 中的現成模板在導航中使用動畫。
  • 您可以從 Elementor 插件在頁面上插入導航菜單。 Elementor 插件在這裡非常有用。
  • 您還可以使用動態效果來立即為整個導航菜單設置動畫,從而使所選頁面栩栩如生。
considering the header to content ratio drives more traffic

10. 考慮標題與內容的比率會帶來更多流量

如果您想吸引更多流量,則必須考慮標題與內容的比率。 有一些因素需要考慮。 導航通常有兩種模式,即:垂直和水平。

讓我們看一下垂直導航:

  • 您可以根據需要添加盡可能多的鏈接,而不會擁擠標題。
  • 在不影響頁眉設計的情況下擴展您網站的頁面。
  • 當訪問者向下看網站的左欄時,可定制且更易於掃描。
  • 用戶從花在社交媒體和網絡應用程序上的時間開始就熟悉垂直導航。
  • 您可以通過垂直導航在桌面和移動設備之間體驗。

在垂直導航中必須考慮空間問題。

現在,讓我們看一下水平導航:

  • 無論如何,水平標題通常被設計成很薄,允許訪問者使用許多縮小的粘性標題。
  • 當有人點擊漢堡菜單圖標時,他才能看到側邊欄導航。
  • 如果您保持粘性側邊欄菜單足夠緊湊,即:250 像素寬與網站上的 1200 像素相比,它可以帶來良好的用戶體驗。

獎勵:在 Element Pack Pro 模板庫中獲得令人驚嘆的現成標題模板

好消息為您創建一個引人注目的標題!

您會很高興知道 Element Pack Pro 模板庫中有許多現成的標題模板,您可以在其中找到許多用於創建不同迷人標題的設計。 您可以根據您的網站需要使用這些模板。

這還不是全部,您甚至可以為您的標題自定義這些模板。 您可以將模板標題自定義為粘性標題以吸引訪問者。

您可以查看 Element Pack Pro 模板庫以創建令人驚嘆的標題,從而吸引更多訪問者訪問您的網站。

選擇您的標題,推動您的業務

正如您已經了解瞭如何創建令人驚嘆的標頭以及有關它的一些殺手級事實,是時候明智地選擇適合您的標頭了。 它將幫助您提高知名度,並吸引更多訪客的眼球,從而以加速的速度推動您的業務朝著目標前進。

您可以在在線市場上建立自己的強勢地位,並繼續前進,讓您的競爭對手遠遠落後。

希望這會對​​您有很大幫助。 感謝您耐心閱讀這篇文章。 祝你今天過得愉快。