如何在 Elementor 中免費創建頁眉和頁腳(示例+提示)

已發表: 2023-01-30

您是否正在尋找一種免費的方式來為您的網站創建頁眉和頁腳?

頁眉和頁腳是任何網站的一致風格和品牌的兩個重要部分。 Elementor 是一個很棒的頁面構建器插件,它使 WordPress 用戶可以非常輕鬆地自定義頁眉和頁腳。

今天,我們將向您介紹這個插件的擴展(名稱為 HappyAddons) ,通過它您可以完全免費地在您的網站上創建頁眉和頁腳。

因此,讓我們開始討論 - 如何在 Elementor 網站上免費創建頁眉和頁腳,而不會浪費更多時間。

什麼是網站上的頁眉和頁腳?

頁眉在視覺上位於任何網站的頂部,通常出現在所有網絡帖子和頁面上。 它包括搜索欄、導航菜單、徽標和網站標題等元素。 在許多情況下,標題還包括登錄/註冊按鈕、購物車、社交媒體帳戶鏈接等。

另一方面,頁腳出現在網站的底部。 它包括版權、公司政策和他們擁有的產品/服務等信息。 頁腳還可以用作導航菜單,因為它包含指向重要頁面、社交渠道、職位空缺等的鏈接。

頁眉和頁腳在網站上的重要性

What is Header and Footer on a Website?

根據網站的類型和性質,頁眉和頁腳可以發揮多種功能。 在這裡,我們將向您展示其中最重要的一些,因此頁眉和頁腳在網站上的重要性不容忽視。

一種。 創造快速印象

組織完美的頁眉和頁腳可以幫助訪問者立即了解其主題和內容。 這使他能夠決定是在網站上轉發還是離開。

b. 讓導航變得簡單

頁眉和頁腳通常包含主導航菜單和重要頁面的鏈接。 因此用戶可以快速瀏覽他們正在尋找的頁面,從而節省他們的時間。

C。 簡化搜索功能

擁有搜索欄可以增加標題的美觀和效率。 它允許用戶僅通過關鍵字快速找到他們正在尋找的內容。

d. 幫助品牌

頁眉和頁腳包括網站徽標和網站標題等品牌元素。 它建立了網站的品牌,並通過下次只看到徽標來幫助用戶識別它。

e. 搜索引擎優化 (SEO)

頁眉和頁腳包括指向重要頁面、社交渠道、本地地址等的鏈接。 它有助於搜索引擎了解網站的結構並更好地抓取。

如何在 Elementor 中免費創建頁眉和頁腳(逐步)

您將需要一個名為 HappyAddons 的附加工具來使用 Elementor 免費創建頁眉和頁腳。 HappyAddons 實際上是 Elementor 插件的一個強大的插件。 它可以使用更多令人興奮的功能和小部件進一步增強您的 Elementor 網站。

我們將在本節的兩個單獨部分中介紹教程過程。 在此之前,您必須確保您的網站上安裝了以下插件。

  • 免費的元素
  • HappyAddons 免費

準備好後,進入下面的教程過程。

第一部分:如何使用 Elementor 和 HappyAddons Free 創建標題

  • 導航到HappyAddons > Theme Builder
Open Theme Builder from HappyAddons
  • 選擇頁眉選項卡。
  • 單擊添加新按鈕。
Select Header from HappyAddons Theme Builder
  • 您將看到一個彈出窗口Choose Template Type
  • 從下拉菜單中選擇頁眉
  • 為模板命名。
  • 最後點擊創建模板
Select-Header-from-the-Template-Elements-Conditions-of-HappyAddons
  • 您將在屏幕上打開E​​lementor Canvas
  • 現在剩下的過程就非常簡單了。 也許你知道。
  • 選擇您想要的結構(我們選擇了三列結構)。
Elementor Canvas
  • 在 Elementor 面板上鍵入Nav Menu
  • 將小部件拖放到所需的部分。
Create Navigation Menu on Elementor Header
  • 從導航菜單小部件中選擇您的菜單。
  • 您會看到您的菜單出現在畫布上。

注意:您可以在之後使用顏色和效果對菜單文本進行樣式化和自定義。

Select Header Menu

注意:如果此導航菜單的下拉菜單不起作用,原因可能是您尚未在 WordPress 後端創建或啟用它。

  • 轉到外觀 > 菜單
  • 您將獲得創建新菜單的選項。
  • 保存菜單後,您將看到它在導航菜單小部件上運行。
Create Menu from the Appearance Section
  • 接下來,您可以使用 Elementor Penal 中的合適小部件將徽標添加到頁眉。
  • 我們在這裡使用了圖像小部件
Add Logo to Your Elementor Header and Publish It
  • 接下來,您必須使標頭具有移動響應能力。
  • 單擊 Elementor 面板底部的響應模式
  • 它將在 Elementor Canvas 上方打開不同的屏幕選項。
  • 將畫布切換為不同的模式並自定義您的佈局,使其在所有設備上都變得完美。

該過程顯示在下面的視頻中 –

  • 完成頁眉設計後,單擊“發布/更新”按鈕。
Publish Your Elementor Header
  • 您將打開一個新的彈出窗口來定義模板條件

注意:使用 HappyAddons 免費版,您可以設置條件:整個站點、所有檔案和所有單數。 但是如果你想專門為個別帖子和頁面設置標題模板,你需要升級到它的高級版本。

Save Your Header Template and Publish It

瀏覽此博客以獲取有關如何為您的網站創建吸引人的標題的更多靈感。

第二部分:如何使用 Elementor 和 HappyAddons Free 創建頁腳

頁腳的創建過程與頁眉非常相似。 我們向您展示了從頭開始完成上述過程。 在這裡,我們將向您展示如何使用模板創建頁腳。

  • 導航到HappyAddons > Theme Builder
  • 轉到頁腳選項卡。
  • 單擊添加新按鈕。
Select Builder from HappyAddons Theme Builder
  • 您將看到一個彈出窗口Choose Template Type
  • 從下拉菜單中選擇頁腳
  • 為模板命名。
  • 最後點擊創建模板
Choose Footer from the Template Elements Condition
  • 您將打開Elementor Canvas
  • 單擊HappyAddons 徽標/圖標
  • 在搜索欄中輸入“頁腳”。
  • 您將獲得免費的專業頁腳模板。
  • 選擇您喜歡的一個,然後單擊其“插入”按鈕。

該過程已在下面附帶的視頻中進行了解釋。

  • 現在,您需要使頁腳移動響應。
  • 該過程與標頭所示相同。
  • 單擊下面的響應模式並自定義頁腳。
  • 完成後,單擊“發布”按鈕。
Customize Your Footer with HappyAddons
  • 您將打開彈出窗口,讓您定義模板條件
  • 選擇整個站點,因為頁腳必須位於所有帖子和頁面下方。
  • 單擊“保存並關閉”按鈕。
Save Your Footer Template and Publish It

單擊此鏈接可了解如何為您的網站創建引人注目的頁腳。

# 頁眉和頁腳的預覽

查看我們在 HappyAddons Theme Builder 的幫助下自由創建的頁眉和頁腳。

獲取 HappyAddons 頁眉和頁腳生成器

Theme Builder 是 HappyAddons 的一個特殊補充。 它包括許多令人興奮的新功能,您可以通過這些功能完全免費地為您的網站創建令人驚嘆的頁眉和頁腳以及單個帖子和頁面模板。 要了解更多信息,請單擊下面的“立即獲取”按鈕。

HappyAddons

獎勵點:創建 Elementor 頁眉和頁腳的最佳實踐

Best Practices of Creating Elementor Header and Footer

只有當您知道如何巧妙地構建和設計頁眉和頁腳時,您才能充分利用它們。 在為您的網站創建它們時,您需要確保一些基本的事情。 在下面快速瀏覽一下。

1. 保持簡單和一致

儘管頁眉和頁腳對於網站很重要,但您不應該忙於添加太多信息。 如果您有很多頁面和產品類別,請使用漢堡菜單。

2.使用合適的字體和對比色

使用對比色和適當的字體可以在網絡表面營造出令人賞心悅目的環境。 它可以幫助有閱讀障礙的人毫無問題地閱讀您的網絡內容。 查看網頁設計中排版的基礎知識。

3.使用足夠的空白

就像字體和顏色一樣,空白是另一個關鍵元素。 空白和元素之間的良好平衡可以將頁眉頁腳的美感提升到一個新的水平。

4.讓它移動響應

您的頁眉和頁腳應針對不同的屏幕尺寸進行優化,以便它們可以在任何設備(如台式機、平板電腦和手機)上無縫工作。

5.創建一個粘性標題

這是一種標題,即使用戶滾動頁面也能固定在頂部。 如果用戶想切換到新頁面,則不必轉到頂部。 探索如何創建粘性標頭。

6.在頁腳中包含附加信息

如果您想展示大量信息,如穀歌地圖、移動應用程序鏈接、產品交付信息、商店位置等,最好將它們添加到頁腳中。

有關如何在 Elementor 中免費創建頁眉和頁腳的常見問題解答

FAQ on How to Create Header and Footer in Elementor for Free

希望您喜歡這次討論。 本節將回答一些在網上經常發現的與本博文主題相關的常見問題。

網站的頭部應該放什麼?

1.導​​航菜單
2. 網站標誌
3. 網站標題
4.多語言切換
5. 購物車
6.頁面鏈接
7.網站標語

網站頁腳應該放什麼?

一、版權聲明
2.隱私政策
3. 網站地圖
四、聯繫方式
5.社交渠道鏈接
6.重要頁面鏈接
7. 電子郵件表格

最佳網站標題大小是多少?

網站標題內容區域的寬度不應超過 1024 像素。 對於首頁,尤其是電商首頁,header的高度可以達到600px。 但對於其他頁面和帖子,標題高度不應超過 300 像素。

設計網站頁眉和頁腳時常見的錯誤有哪些?

1.頁眉和頁腳中的信息相同
2. 沒有針對移動響應優化它們
3.設計一個不必要的長標題
4. 用太多的信息讓他們倆都飽和
5.使用奪人眼球的顏色

頁眉和頁腳的標準列數是多少?

三列最適合標題。 但對於頁腳,三到四列最適合展示數據。

最後的想法

如果沒有頁眉和頁腳,一個網站乍一看會立即失去用戶的接受度。 借助由 Elementor 提供支持的 HappyAddons,您可以對網站上這兩件事的每一個元素進行最佳控制。

在本文中,我們嘗試向您解釋如何以最簡單的方式為您的網站創建頁眉和頁腳。 現在輪到您練習本教程了。 如果您在中途遇到任何問題,請通過評論部分告訴我們。