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

更新於 發佈於 閱讀時間約 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
留言分享你的想法!
avatar-img
驅動數位行銷
6會員
21內容數
驅動數位行銷協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。
驅動數位行銷的其他內容
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
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
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