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

更新於 發佈於 閱讀時間約 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
2024/07/27
很棒的老師跟行銷公司
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
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
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更加分唷! 👉所以方格子也會有所謂的章節目錄唷!
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
承接上篇文章 架設好環境後我們要來安裝 WordPress 了 其實安裝 WordPress 非常簡單,但是其中要注意的小細節太多了,若是沒有設定好,接下來在做各種激烈操作的時候就會有一堆問題。 文章目錄: 首先,建立一個專門給 WordPress 的資料庫,開啟 phpmyadmin 解壓縮
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
Thumbnail
此版本的目標畫面成果是: *金色名字。 *金色社交按鈕圖示,點擊按鈕另開對應的網頁或著顯示comming soon。 *名字和按鈕在網頁中央,如果網頁寬度不夠會換行,夠就不換行。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News