如何設計頁腳（2025教程）

您網站的頁腳不僅僅是獲得版權信息的地方；它可能是提高品牌信譽，提高用戶體驗甚至推動轉換的寶貴工具。在這篇文章中，我們將說明為什麼您需要在網站上有一個精心設計的頁腳，展示一些最佳實踐，並向您展示如何使用Divi WordPress主題設計頁腳。

讓我們潛水。

什麼是網站頁腳？

對於那些不知道的人，網站頁腳是出現在您網站上每個頁面底部的部分。這是一個經常被忽視的重要領域，但具有多種重要功能。頁腳通常包括基本信息，例如聯繫方式，版權和法律信息以及社交媒體鏈接。雖然看似很小，但頁腳在增強用戶體驗，提高品牌的信譽甚至增強搜索引擎優化（SEO）方面發揮了重要作用。

為什麼要讓頁腳很重要？

頁腳在任何網站的成功中都起著至關重要的作用。它們是重要信息的樞紐，並為用戶體驗做出貢獻。您應該擁有有效的頁腳的原因有很多，包括：

• 品牌加固：頁腳始終顯示您的徽標，顏色和字體，並在所有頁面上加強品牌標識。
• 聯繫信息：頁腳易於訪問的聯繫方式允許訪客快速，輕鬆地與您聯繫。
• 法律和隱私信息：頁腳為關鍵的法律和隱私信息提供了一個中心位置，以確保透明度和合規性。
• 改進的用戶體驗：組織良好的頁腳通過輕鬆訪問重要頁面和站點地圖來增強用戶導航，從而提高了總體可用性。
• SEO好處：精心設計的頁腳可以包括指向其他​​網站（反向鏈接）和社交媒體配置文件的寶貴鏈接，從而改善了搜索引擎排名頁面（SERP）和SEO的位置。

基本的頁腳元素

精心設計的頁腳不僅僅是腳註。這是一個寶貴的空間，可提供基本信息，增強用戶體驗並提高品牌的信譽。

1。聯繫信息

您的頁腳應該是一個方便的樞紐，供訪問者與您聯繫。包括您的電話號碼，以鼓勵訪問者致電，您的電子郵件地址或查詢表格以及您的物理地址（如果您有）。不要忘記使用有吸引力和可見的圖標添加與社交媒體資料的鏈接。這鼓勵訪客以各種方式與您聯繫。

2。版權和法律信息

透明度是關鍵，因此您的頁腳應清楚地概述您的法律和隱私信息。包括保護您的原始內容的版權通知。提供易於找到的鏈接，以實現您的隱私政策和服務頁麵條款。這可以與您的訪問者建立信任，並確保他們了解您如何處理數據。如果適用，請包括免責聲明或Cookie政策，以解決特定的問題或限制。

3。導航

為您的網站設計頁腳時的另一個至關重要的組件包括菜單。導航使用戶可以輕鬆瀏覽您的網站，並幫助訪問者快速找到所需的信息。不要忘記在您的網站上包括指向重要頁面的鏈接，包括您的博客（如果您打算擁有一個）。這樣可以確保輕鬆訪問網站的關鍵領域。

4。呼籲行動（CTA）

最後，考慮將CTA添加到您的頁腳中。鼓勵他們訂閱您的新聞通訊，以獲得獨家更新和優惠。您也可以使用此空間來促進特定的產品或服務。另外，考慮提供寶貴的免費資源，例如電子書或網絡研討會，以吸引訪問者採取下一步。

有效頁腳的設計原則

當您著手為您的網站設計頁腳時，您必須不僅僅是簡單地列出信息。您需要牢記更大的目標，並納入一些關鍵的設計原則以使其有效。

• 保持簡潔：避免將大量文本放入頁腳中，因為這樣做會使您的訪客不知所措。優先考慮清晰度並避免混亂。
• 專注於可讀性：選擇清晰，易於閱讀的字體。在元素之間使用足夠的間距，並確保字體尺寸適合易於閱讀。
• 保持品牌一致性：您的頁腳應該具有與網站其餘部分相同的外觀和感覺。使用顏色，版式和徽標始終如一地增強您的品牌標識。
• 使其響應：網頁設計原則規定，網站應適當尺寸，以適當尺寸，包括您網站的頁腳。
• 可訪問性事項：確保您的頁腳是為所有用戶（包括殘疾人）設計的。使用適當的標題結構，圖像的ALT標籤以及足夠的顏色對比度。

如何為您的網站設計頁腳

有很多方法可以為您的網站設計頁腳。諸如Figma，Framer或Sketch之類的網頁設計工具非常適合為您的設計熨燙原型，或者您可以使用Divi等工具並實時設計頁腳。在本教程中，我們將使用Divi向您展示具有徽標，社交媒體圖標，電子郵件選擇加入和一些重要鏈接的頁腳的容易，僅幾分鐘之內。

什麼是Divi？

Divi是市場上最強大的WordPress主題之一。 Divi具有前端，無代碼頁面構建器以及設計網站各個方面的能力，具有靈活性和設計作用。借助其直觀的視覺構建器，您可以輕鬆地創建令人驚嘆且獨特的網站，包括頁腳，而無需編寫任何代碼。

Divi還包括一個大型預製佈局庫，包括各種各樣的頁腳設計。這些預製佈局可以作為您設計的起點，提供靈感並節省寶貴的時間。除佈局外，Divi還提供快速網站，這為您提供了一種快速簡便的方法，可以從一系列入門網站中生成完整的網站。該過程涉及選擇一個入門網站，並為您提供有關您業務的信息，包括徽標，品牌顏色和字體。

每個網站快速網站生成的都有所有核心網頁，主題構建器模板，設計模塊預設和全球樣式，使設計在整個網站上保持一致。除了開始網站外，您還可以選擇由Divi AI提供的AI生成的網站。借助Divi AI，您的網站隨附了入門網站所做的一切，但允許您使用文本提示來編寫要創建的站點的描述。您也可以選擇您的品牌或允許Divi AI生成它。

得到Divi

如何從頭開始設計頁腳

儘管您可以使用Divi AI或快速站點來生成有效的頁腳，但您可以從視覺和主題構建者中從頭開始設計一個。

在我們開始設計頁腳之前，最好像下圖一樣擁有品牌準則模板。該模板使您可以從徽標指南，品牌顏色和字體開始時，在設計頁腳時為您提供幫助。向前邁進，我們將使用此模板作為指南。

登錄您的WordPress網站並導航到Divi>主題構建器。

接下來，單擊添加全球頁腳，然後構建全球頁腳以啟動主題構建器。

當主題構建器啟動時，您會與空白的板岩相遇。首先，單擊綠色圖標將行添加到頁腳中。

接下來，從可用選項中選擇三列佈局。

在添加內容之前，我們需要為我們的部分添加背景顏色。為此，請單擊該部分左上方的齒輪圖標（設置） 。

單擊+添加背景顏色，為我們的部分選擇背景顏色。

使用＃406171作為顏色。要將顏色保存為全局，請單擊+圖標以添加它。添加背景顏色後，單擊“綠色”按鈕以保存它。

添加徽標

有了我們的行結構，是時候添加一些內容了。首先將圖像模塊添加到行的第一列。

選擇+添加圖像以使用Image Module的設置上傳您的徽標。

上傳您的徽標後，我們需要進行一些更改，因此請單擊“設計”選項卡以開始。

在“對齊”下拉菜單下，將圖像對齊在台式機上的左側和平板電腦和移動設備上的中心。 Next, click the sizing tab and set the width to 50% for desktop and tablet and 40% for mobile.

完成後，單擊“綠色”按鈕保存模塊。

添加社交媒體圖標

單擊徽標下方的灰色 +圖標以添加新模塊，然後選擇“社交媒體”關注模塊。

在模塊設置處於活動狀態的情況下，單擊+添加新的社交網絡按鈕以添加您選擇的社交媒體平台。對於本教程，我們將添加Facebook，X和Instagram。

要在每個社交媒體平台上添加背景，請單擊齒輪圖標進行編輯。

使用＃EE8B22進行背景顏色。重複這些步驟以編輯X和Instagram的圖標。

接下來，交換到“設計”選項卡並添加以下設置：

• 模塊對齊：左（桌面），中心（表和移動）
• 圖標顏色： #FFFFFF
• 使用自定義圖標大小：是
• 自定義圖標大小： 20px
• 邊界圓角： 100px

完成後，您的圖標應該看起來像下面的圖像。

添加標題模塊

接下來，我們將向第二列添加標題模塊。單擊灰色 +圖標，然後選擇標題模塊添加它。出現對話框時，將我們的服務寫入標題字段。

單擊“設計”選項卡並添加以下設置：

• 標題級別： H3
• 標題字體：最幸運的傢伙
• 標題文字對齊：中心
• 標題文字顏色： #FFFFFF
• 標題文字大小： 24px
• 標題字母間距： 1PX

一旦所有設置到位，您的標題就應該像下面的圖像。

添加文本模塊

接下來，我們將在標題模塊下方添加一個文本模塊，以在我們的第二列中展示重要鏈接。 Divi默認情況下將佔位符文本添加到模塊中，因此我們必須在添加新文本之前刪除該文本。

儘管我們可以在此處使用菜單模塊，但是使用文本模塊並將鏈接添加到每條文本行更有意義。由於我們正在為寵物食品網站創建頁腳，因此我們希望在室內頁面上包含對用戶最有益的內部頁面的重要鏈接，例如寵物食品和零食，健康，玩具，牽引力等。每個鏈接。

借助您的鏈接，單擊“設計”選項卡，然後在文本鏈接菜單下添加以下設置：

• 文本字體： inter
• 鏈接文本對齊：左（桌面），中心（平板電腦和手機）
• 鏈接文本顏色： ＃EE8B22
• 鏈接文字大小： 16px
• 鏈路線高： 1.3EM

添加電子郵件選擇輸入模塊

在我們的第三列中，我們將添加一個電子郵件選擇模塊，以捕獲用戶數據。這個想法是讓潛在客戶註冊新聞通訊，以收到有關新產品和服務的最新信息。

在“內容”選項卡中，添加以下設置：

• 標題：註冊出色的交易！
• 按鈕：立即註冊！
• 身體：加入我們的背包！註冊我們的新聞通訊，並獲得獨家折扣，及早訪問新產品以及有關即將到來的銷售的更新。另外，僅訂閱即可獲得特別的歡迎優惠！
• 電子郵件帳戶：從20多個電子郵件提供商之一中選擇，包括MailChimp，ActiveCampaign，HubSpot等。如果您需要配置選擇加入的幫助，請查看此帖子。
• 字段：切換使用單個名稱字段至是
• 成功動作：選擇顯示消息或重定向到另一個URL。
• 背景：透明

在“設計”選項卡中，添加以下佈局設置：

• 佈局：正文，底部形成
• 名稱Fullwidth：切換到是
• 電子郵件Fullwidth：切換到是

現場設置：

• 字段背景顏色： #FFFFFF
• 字段文本顏色： ＃406171
• 現場聚焦背景顏色： ＃EE8B22
• 現場聚焦文本顏色： #FFFFFF
• 字段字體： Inter
• 田野圓角： 5px
• 田野邊界寬度： 2PX
• 字段邊框顏色： ＃EE8B22

標題文本設置：

• 標題字體：最幸運的傢伙
• 標題文字對齊：左
• 標題文字顏色： #FFFFFF
• 標題文字大小： 24px
• 標題信件間距： 1PX

正文文字設置：

• 身體字體： inter
• 正文對齊：左
• 身體文字顏色： #ffffff
• 身體線高： 1.3EM

按鈕設置：

• 使用自定義樣式進行按鈕：切換到是
• 按鈕文字大小： 16px
• 按鈕文字顏色： #FFFFFF
• 按鈕背景： ＃EE8B22
• 按鈕邊框寬度： 0px
• 按鈕邊框半徑： 5px
• 按鈕字體： inter
• 按鈕字體重量：半毛
• 顯示按鈕圖標：否
• 按鈕填充： 12px（頂部和底部）

添加新部分

最後，我們需要向頁腳添加一個新部分，以供版權信息和我們的服務菜單條款菜單。單擊現有部分下的藍色圖標，然後選擇常規部分。

選擇一個1/3 +/2/3列行。

將部分的背景顏色設置為＃38A2DB ，然後將間距（在“設計”選項卡中）設置為10px頂部和底部，然後保存更改。

將文本模塊添加到左列。而不是在身體中添加文本，而是單擊動態內容圖標。我們將在此處添加我們的版權信息，以便它每年更新，而無需您手動更改它。

出現對話框時，從選項列表中選擇當前日期。

出現“文本對話框”時，輸入以下設置：

• 在之前：版權符號（鍵盤上的選項 + G）
• 之後：您的業務名稱。在輸入文本之前，請務必離開空間！
• 日期格式：自定義
• 自定義日期格式： y

在前往“設計”選項卡之前保存更改以樣式。在“設計”選項卡上，將所有設置留在其默認設置上，除了將文本#ffffff和將字體系列更改為Inter 。

添加菜單模塊

添加到我們頁腳的最後一個模塊是菜單模塊。我們將其添加到新部分的右欄中。您必須通過導航到外觀>菜單事先創建菜單。該頁腳菜單應包含您網站上的任何法律信息，例如隱私政策或條款和條件頁面。

使用菜單模塊的設置處於活動狀態，請選擇以下選項：

• 菜單：選擇您的法律信息菜單
• 背景：透明

在設計設置中，選擇以下設置：

佈局：

• 樣式：左對齊

菜單文字：

• 主動鏈接顏色： #FFFFFF
• 菜單字體： inter
• 菜單文字顏色： #FFFFFF
• 文字對齊：對

下拉菜單設置：

這裡只有幾件事要更改，因為您的菜單沒有子菜單鏈接。當人們從智能手機或平板電腦查看您的網站時，這些設置將僅適用於您的菜單的移動版本：

• 移動菜單背景顏色： ＃38A2DB
• 移動菜單文字顏色： #FFFFFF

最後，將“圖標”選項卡下的漢堡菜單圖標顏色更改為#ffffff 。

添加完成觸摸

現在，我們的頁腳設計已經完成，我們需要做一些流浪修復程序。您會注意到，電子郵件選擇模塊的標題與“相鄰”列中的服務菜單不完全一致。那是因為Divi默認情況下為其添加了一些填充。要解決此問題，請打開電子郵件選項模塊的設置，然後導航到“設計”選項卡。在“間距”下拉菜單下，將0PX填充添加到頂部，底部和左右的填充，以刪除尷尬的間距。

最後，儘管我們的版權信息和法律菜單在桌面上對齊，但它們在較小的屏幕上並不完全排列。

要解決此問題，請單擊“行高級”選項卡。在自定義CSS下，選擇主要元素並導航到響應式設置。在CSS字段中，為平板電腦添加以下內容：

display:flex;

完成更改後，單擊“綠色保存”按鈕以保存頁腳。

單擊主題構建器右上角的X退出。

最後，單擊“保存更改”按鈕以使您的頁腳直播。

如您所見，Divi可以在幾分鐘內輕鬆設計網站頁腳。

用Divi提升您的網站頁腳

精心設計的網站頁腳不僅僅是事後的想法。這是任何成功網站的重要組成部分，為重要信息，品牌增強和整體用戶體驗提供了寶貴的房地產。通過納入關鍵的設計原則，例如可讀性，品牌一致性和SEO富含內容，您可以設計一個有效服務於訪問者並提高在線形象的頁腳。使用像Divi這樣的工具設計美麗而實用的頁腳非常容易。通過遵循以下步驟，您可以創建一個滿足您需求的頁腳，並給聽眾留下持久的印象。

我們創建了一張方便的表格，可以展示Divi主題的所有功能，以幫助您了解其真正的力量。