在網(wǎng)站設(shè)計(jì)中，頁腳不僅是關(guān)鍵信息的展示區(qū)域，更是體現(xiàn)整體設(shè)計(jì)美學(xué)的重要元素。Astra Pro 提供了一個(gè)非常實(shí)用的頁腳小工具模塊，可以幫助你快速構(gòu)建多樣化的頁腳區(qū)域，并自由控制布局、顏色、字體等元素。本文介紹具體的設(shè)置流程，并補(bǔ)充如何讓頁腳固定在頁面底部，避免因?yàn)閮?nèi)容太少而出現(xiàn)空白空間。

Footer Widgets 模塊介紹

Astra Pro 的頁腳小工具模塊支持多達(dá) 7 種不同布局。你可以根據(jù)網(wǎng)站結(jié)構(gòu)或品牌風(fēng)格選擇適合的排列方式，如：

• 單列布局
• 兩列或三列等并排組合
• 左右結(jié)構(gòu)不對稱分布

模塊激活后，在每個(gè)區(qū)域中都能放置 WordPress 原生小工具，也支持第三方插件提供的內(nèi)容模塊，例如表單、導(dǎo)航、社交圖標(biāo)等。

設(shè)置步驟

• 安裝并啟用 Astra 主題與 Astra Pro 插件。
• 進(jìn)入 WordPress 后臺，點(diǎn)擊“外觀” > “自定義” > “Footer Builder”。
• 在頁腳構(gòu)建器中選擇合適的布局結(jié)構(gòu)。
• 設(shè)置每一欄所需內(nèi)容：進(jìn)入“自定義” > “小工具” > “Footer Widget Area”，添加你希望展示的小工具類型。

樣式與排版控制

Astra Pro 提供細(xì)致的樣式設(shè)置選項(xiàng)：

• 內(nèi)邊距：可以分別為頁腳區(qū)域設(shè)置上下左右的留白；

• 寬度設(shè)定：
  • 全屏寬度，填滿瀏覽器橫向空間；
  • 內(nèi)容寬度，與頁面主容器保持一致；

• 字體：支持為每個(gè)小工具的標(biāo)題與正文設(shè)置字體、字號、行高等參數(shù)；

• 背景與顏色：可自定義背景色，也支持上傳背景圖像。

這些選項(xiàng)有助于實(shí)現(xiàn)統(tǒng)一的視覺風(fēng)格，讓頁腳更有質(zhì)感。

頁腳固定在頁面底部的設(shè)置方法

當(dāng)頁面內(nèi)容過少時(shí)，頁腳可能會懸空在中間，影響整體排版。

可以添加以下 CSS 代碼，讓頁腳始終貼合在底部，無論頁面長度如何都保持在底部顯示。

使用的代碼如下：

#page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.admin-bar #page {
    min-height: calc(100vh - 32px);
}
#page .site-content {
    flex-grow: 1;
}

添加方式：

• 打開 WordPress 后臺；
• 點(diǎn)擊“外觀” > “自定義”；

• 滾動(dòng)至最底部找到“額外 CSS”；

• 將代碼粘貼到編輯框中；

• 點(diǎn)擊右上角的“發(fā)布”按鈕保存。

完成以上操作后，不管頁面是否有大量內(nèi)容，頁腳都不會再上浮。

總結(jié)

Astra Pro 的頁腳模塊可以快速搭建結(jié)構(gòu)清晰、視覺統(tǒng)一的頁面底部區(qū)域。配合簡單的 CSS 代碼，頁腳展示位置也變得更加規(guī)范。這個(gè)組合非常適合用于博客、電商網(wǎng)站或企業(yè)官網(wǎng)的頁面構(gòu)建。

相關(guān)文章

聯(lián)系我們
教程看不懂？聯(lián)系我們?yōu)槟赓M(fèi)解答！免費(fèi)助力個(gè)人，小企站點(diǎn)！	客服微信
① 電話：020-2206-9892
② QQ咨詢：1025174874
③ 郵件：info@361sale.com
④ 工作時(shí)間：周一至周五，9:30-18:30，節(jié)假日休息