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

更新於 2024/08/17閱讀時間約 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內容數
驅動數位行銷協助中小企業提升網站在搜尋結果頁上的能見度,以便獲取更多流量進而增加成交機率。
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
驅動數位行銷 的其他內容
本篇文章是根據知名 SEO 軟體開發商 Ahrefs 在分析一百多萬個網址後,所整理出來的技術性 SEO 問題以及對應的解決方案。
與普通文字相比,具有畫重點樣式的文字更能抓住使用者的目光。那麼要如何在 WordPress 實現畫重點的功能?本篇文章將介紹 2 種常見的方法。
在 WordPress 網站管理後台中,「顯示項目設定」是一項容易遭人忽略的功能。乍看似乎不起眼,但卻能在特定場合發揮作用。本篇文章將為你說明什麼是「顯示項目設定」及 3 種常見的應用情境。
更換 WordPress 佈景主題會影響網站 SEO 排名嗎?先講結論,答案是肯定的。至於原因是什麼,你可以參考 John Mueller 在 AskGooglebot 系列影片中的說明。
「四處一詞」顧名思義是指關鍵字要出現在 4 個地方,分別是標題、中繼說明、內容、錨定文字。本篇文章將與你分享什麼是四處一詞、程式碼範例及注意事項。
截至目前為止,在 WordPress.org 外掛目錄上架的外掛接近 60,000 種,如果你正在煩惱要安裝哪些外掛,不妨從 WordPress 外掛元素週期表取得靈感。
本篇文章是根據知名 SEO 軟體開發商 Ahrefs 在分析一百多萬個網址後,所整理出來的技術性 SEO 問題以及對應的解決方案。
與普通文字相比,具有畫重點樣式的文字更能抓住使用者的目光。那麼要如何在 WordPress 實現畫重點的功能?本篇文章將介紹 2 種常見的方法。
在 WordPress 網站管理後台中,「顯示項目設定」是一項容易遭人忽略的功能。乍看似乎不起眼,但卻能在特定場合發揮作用。本篇文章將為你說明什麼是「顯示項目設定」及 3 種常見的應用情境。
更換 WordPress 佈景主題會影響網站 SEO 排名嗎?先講結論,答案是肯定的。至於原因是什麼,你可以參考 John Mueller 在 AskGooglebot 系列影片中的說明。
「四處一詞」顧名思義是指關鍵字要出現在 4 個地方,分別是標題、中繼說明、內容、錨定文字。本篇文章將與你分享什麼是四處一詞、程式碼範例及注意事項。
截至目前為止,在 WordPress.org 外掛目錄上架的外掛接近 60,000 種,如果你正在煩惱要安裝哪些外掛,不妨從 WordPress 外掛元素週期表取得靈感。
你可能也想看
Google News 追蹤
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
群聯近期表現優異,並推出新的AI相關產品,aiDAPTIV+。本文將介紹群聯的財報解密及策略佈局,以及aiDAPTIV+產品特點和未來發展前景。
Thumbnail
男性女乳症是男性乳房組織過度發育的現象,可能導致心理壓力和自尊心下降。本文介紹男性女乳症的原因、檢測方法以及最新的手術治療方式,並提供了專家治療建議。
Thumbnail
#人性 #貪婪 #欲望迴圈 #知足#財務富足 #善用悲觀的力量#威廉.歐文#漫遊者文化事業#斯多噶學派#哲學#生存之道#簡單#快樂#消極想像#借來的 #二分法 #三分法#預防力#風險#失去#小倉鼠 #社畜逃脫筆記 #自我成長 #財務自由 #PODCASTS #說書 #思考 #筆記
Thumbnail
當看到別人的成功時,是否會有點嫉妒呢?
Thumbnail
回想一下,你現在生活中有否有想要戒除的惡習,例如:晚上不自覺一直划手機到凌晨兩三點、不受控制一直吃零食,導致體重變重,即使曾經嘗試著戒掉,卻一直不斷的失敗。
這次我想談的問題,不單單是星星兒遇到霸凌,連星星兒受到惡劣地球人的任由擺佈,因此無法脫困。 這種情況,照顧者如何解決和協助? 見到星星兒說不出口,就可以用密錄器,得到證據 事實上,在星星兒的立場,是在開學後就帶密錄器。 如此一來,一得到證據,就可以上傳到臉書和社團,讓惡劣地球人感到丟臉。
Thumbnail
現今網路發達,大多人都會靠通訊軟體來維繫感情、聯絡工作上的大小事,但不管是被朋友、曖昧對象還是工作夥伴已讀不回,相信都會讓人或多或少的覺得不被重視,甚至內心有許多小劇場上演,今天要來教你破解已讀不回心態,男女都適用!
Thumbnail
「做做社會」引發社會、人生觀及價值觀負向循環 生產者「過度生產」讓職場及社會變成壓力鍋 消費者「過度消費」反映內心不安 用聽吸收筆記,請點連結:https://player.soundon.fm/p/8f9a30e1-8c62-4f72-b0f5-5366030d3c45
Thumbnail
在拜讀《不節食的美好生活提案》這本書前,我與食物的關係一直都還滿糟的,我曾歷經厭食、暴食等飲食失調的症狀,而這一切這還要從我很小的時候說起: 從小我的身形就一直發育的比同年齡的小孩快⋯⋯
Thumbnail
*合作聲明與警語: 本文係由國泰世華銀行邀稿。 證券服務係由國泰世華銀行辦理共同行銷證券經紀開戶業務,定期定額(股)服務由國泰綜合證券提供。   剛出社會的時候,很常在各種 Podcast 或 YouTube 甚至是在朋友間聊天,都會聽到各種市場動態、理財話題,像是:聯準會降息或是近期哪些科
Thumbnail
群聯近期表現優異,並推出新的AI相關產品,aiDAPTIV+。本文將介紹群聯的財報解密及策略佈局,以及aiDAPTIV+產品特點和未來發展前景。
Thumbnail
男性女乳症是男性乳房組織過度發育的現象,可能導致心理壓力和自尊心下降。本文介紹男性女乳症的原因、檢測方法以及最新的手術治療方式,並提供了專家治療建議。
Thumbnail
#人性 #貪婪 #欲望迴圈 #知足#財務富足 #善用悲觀的力量#威廉.歐文#漫遊者文化事業#斯多噶學派#哲學#生存之道#簡單#快樂#消極想像#借來的 #二分法 #三分法#預防力#風險#失去#小倉鼠 #社畜逃脫筆記 #自我成長 #財務自由 #PODCASTS #說書 #思考 #筆記
Thumbnail
當看到別人的成功時,是否會有點嫉妒呢?
Thumbnail
回想一下,你現在生活中有否有想要戒除的惡習,例如:晚上不自覺一直划手機到凌晨兩三點、不受控制一直吃零食,導致體重變重,即使曾經嘗試著戒掉,卻一直不斷的失敗。
這次我想談的問題,不單單是星星兒遇到霸凌,連星星兒受到惡劣地球人的任由擺佈,因此無法脫困。 這種情況,照顧者如何解決和協助? 見到星星兒說不出口,就可以用密錄器,得到證據 事實上,在星星兒的立場,是在開學後就帶密錄器。 如此一來,一得到證據,就可以上傳到臉書和社團,讓惡劣地球人感到丟臉。
Thumbnail
現今網路發達,大多人都會靠通訊軟體來維繫感情、聯絡工作上的大小事,但不管是被朋友、曖昧對象還是工作夥伴已讀不回,相信都會讓人或多或少的覺得不被重視,甚至內心有許多小劇場上演,今天要來教你破解已讀不回心態,男女都適用!
Thumbnail
「做做社會」引發社會、人生觀及價值觀負向循環 生產者「過度生產」讓職場及社會變成壓力鍋 消費者「過度消費」反映內心不安 用聽吸收筆記,請點連結:https://player.soundon.fm/p/8f9a30e1-8c62-4f72-b0f5-5366030d3c45
Thumbnail
在拜讀《不節食的美好生活提案》這本書前,我與食物的關係一直都還滿糟的,我曾歷經厭食、暴食等飲食失調的症狀,而這一切這還要從我很小的時候說起: 從小我的身形就一直發育的比同年齡的小孩快⋯⋯