如何擺脫佈景主題的限制,以更自由的方式設計網站的頁首與頁尾?

更新 發佈閱讀 3 分鐘

不論是 AstraBlocksy 還是 Kadence 佈景主題,都有提供頁首與頁尾編輯器,你可以在外觀自訂器中以「所見即所得」的方式新增各種元素,像是選單、按鈕及社群圖示。

但是有些時候,你可能不滿足佈景主題有限的設定選項,想要突破既有的框架,以更自由的方式設計網站的頁首/頁尾。

因此,本篇文章會介紹一款免費的外掛,它能讓你使用 Elementor 編輯器自訂頁首和頁尾,即使沒有透過 Elementor Pro 也能實現。

認識頁首區域

raw-image

頁首區域是網頁版面配置的四大區域之一,位置處在頁面的最上方,一般來說不會因為換頁而消失,除非你刻意停用。

至於頁首的種類有哪些,主要有透明頁首與固定頁首兩種,如下:

  1. 透明頁首:按照字面上的意思理解是指頁首的背景為透明狀態。
  2. 固定頁首:顧名思義是指你的頁首固定在網頁上方,即使向下捲動畫面,頁首的位置仍然保持不變。

以 Astra 佈景主題為例,透明頁首是免費功能;固定頁首則要購買 Astra Pro 才能解鎖。但其實有免費方法可以實現,細節會在付費課程中說明。

如何製作頁首?(2 種方法)

製作頁首的方法主要有 2 種,第一種方法是透過佈景主題內建的頁首編輯器,目前市場上主流的 3 個佈景主題 (AstraBlocksyKadence) 都有這項功能,完全免費,不需要付費擴充。

raw-image

另一種方法是使用 Elementor Pro 主題編輯器製作,預設提供 30+ 頁首範本讓你使用,相當多元。

raw-image

重點筆記:

省錢技巧:如果你想使用 Elementor 編輯網站的頁首,但又不想購買 Elementor Pro,可以使用 Elementor Header & Footer Builder 這款免費外掛。
個人建議:我比較傾向透過佈景主題製作「頁首」,因為效能較好且比較容易掌握,建議初學者先從此種方式開始學習。

認識頁尾區域

raw-image

頁尾區域也是網頁版面配置的四大區域之一,位置處在頁面的最下方,與頁首相同都不會因為換頁而消失,除非你刻意停用。

至於頁尾的種類有哪些,原則上只有一種,頂多在外觀方面做變化,像是滾動視差的效果,細節會在付費課程中說明。

如何製作頁尾?(2 種方法)

方法一:只要你所選用的佈景主題有頁首編輯器,原則上也都會有頁尾編輯器。以 Astra、Blocksy、Kadence 佈景主題為例,頁尾編輯器已內建且不需要付費就能取得

raw-image

方法二:如果你使用的佈景主題沒有頁尾編輯器,那麼不妨試試 Elementor Pro 主題編輯器,它能以較彈性的方式製作頁尾,預設提供 30+ 頁尾範本讓你選擇,非常多樣。

raw-image

重點筆記:

省錢技巧:如果你想使用 Elementor 編輯網站的頁首,但又不想購買 Elementor Pro,可以使用 Elementor Header & Footer Builder 這款免費外掛。
個人建議:我比較傾向透過佈景主題製作「頁尾」,因為效能較好且比較容易掌握,建議初學者先從此種方式開始學習。

延伸學習:

  1. Astra Theme 介紹,一款風格簡約且快速的 WordPress 佈景主題
  2. Blocksy 佈景主題介紹,從方案、安裝到設定
  3. Elementor 教學,市占率最高的 WordPress 網站編輯器!(基礎篇)
  4. 如何建立 WordPress 選單?從操作、類型到注意事項 (新手必讀)



留言
avatar-img
驅動數位行銷
6會員
23內容數
驅動數位行銷協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。
驅動數位行銷的其他內容
2024/12/23
查詢關鍵字排名的方法很多,SERPRobot​、Keyword Rank Checker、FATRANK 都是不錯的選擇,但是這些第三方 SEO 工具所提供的數據都遠不如 Google Search Console 來得精準可靠。
Thumbnail
2024/12/23
查詢關鍵字排名的方法很多,SERPRobot​、Keyword Rank Checker、FATRANK 都是不錯的選擇,但是這些第三方 SEO 工具所提供的數據都遠不如 Google Search Console 來得精準可靠。
Thumbnail
2024/12/18
本篇文章會介紹三款實用的工具,並教你如何運用 OCR (Optical Character Recognition,光學字元辨識) 技術,輕鬆將圖片中的文字轉換成可編輯的文字!
Thumbnail
2024/12/18
本篇文章會介紹三款實用的工具,並教你如何運用 OCR (Optical Character Recognition,光學字元辨識) 技術,輕鬆將圖片中的文字轉換成可編輯的文字!
Thumbnail
2024/12/17
網站的內容應該要為讀者而寫,而非搜尋引擎,濫填關鍵字不僅會讓使用者難以閱讀,也會違反 Google 品質指南,進而使 SEO 排名下降。因此,請確保你的內容自然呈現,不要刻意堆砌關鍵字即可。
Thumbnail
2024/12/17
網站的內容應該要為讀者而寫,而非搜尋引擎,濫填關鍵字不僅會讓使用者難以閱讀,也會違反 Google 品質指南,進而使 SEO 排名下降。因此,請確保你的內容自然呈現,不要刻意堆砌關鍵字即可。
Thumbnail
看更多
你可能也想看
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
不論是 Astra、Blocksy 還是 Kadence 佈景主題,都有內建頁首與頁尾編輯器,你可以在外觀自訂器中以所見即所得的方式新增各種元素,像是選單、按鈕及社群圖示。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本文章介紹了建立網頁的整個流程,包括設置 Templates, Views, Urls 等步驟。透過這些步驟,大家便能創建一個新的網頁,並成功測試。
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
Thumbnail
本篇介紹:設定about與categories、tags相關獨立頁面,讓自己的文章利於統整與搜尋。
Thumbnail
本篇說明如何開啟首頁選單項目[關於我(about)/分類/標籤]的連結,引導讀者可以更認識作者與文章查詢更方便的功能。
Thumbnail
本篇說明如何開啟首頁選單項目[關於我(about)/分類/標籤]的連結,引導讀者可以更認識作者與文章查詢更方便的功能。
Thumbnail
此篇教學 : 自訂Hexo 提供的主題,套版在 GitHub Pages 架好部落格網站
Thumbnail
此篇教學 : 自訂Hexo 提供的主題,套版在 GitHub Pages 架好部落格網站
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
這是教你插入野頁碼從簡報的第3頁開始為編碼第1頁, 我把第2頁設計成目錄頁我不想讓他有編碼,所以從第3頁開始,這樣有懂嗎?呵呵 首先到最上方的功能選項 [ 插入 ]然後 [ 頁首及頁尾 ] ☑勾選投影片編號 ☑標題投影片中不顯示 然後按全部套用 再來到功能選項的 [ 設計 ] 然後 [ 投影片大小
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
會加入這個外掛的原因是因為,這個外掛會在內容上加上「目錄」的功能,因為加入目錄的關係,讓使用者可以一目了然清楚自己想要看的位置區塊,避免在整個網頁上花太多時間在搜尋自己想要的資訊。簡單來講,就是幫助消費者使用體驗,而使用目錄,也會讓SEO更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News