WordPress Astra 主題完整教學|頁首與頁尾篇(Header and Footer) 3

WordPress Astra 主題完整教學|頁首與頁尾篇(Header and Footer)

文章最後更新時間: 2021 年 5 月 25 日 by 阿德

本篇是 Astra 主題教學系列文章之一,教學主題是「頁首與頁尾(Header and Footer)」的完整詳細教學,範例會做一些簡單的示範如 Logo 的新增、網站標題與解說的新增等,如果在過程中有任何問題,歡迎透過聯絡我跟我溝通討論喔!

Astra-Theme-free-header-footer

網頁架構介紹

一般來說,絕大部分的網站都會用以下架構圖劃分,會把網頁分成四大區塊:

header-footer-content-sidebar
  • 頁首(Header): 網頁的最上方區塊,主要用來放置網站的 Logo、名稱、描述、選單或是社群網站的圖示連結等。
  • 內容(Content): 網頁的主題內容,可包含文章內容、主頁文章標題內容等。
  • 側邊欄(Sidebar): 網頁的左右兩邊欄位,主要可用來放置小工具或廣告等。
  • 頁尾(Footer): 跟頁首有類似的功能,主要會放置網站的說明、選單或小工具等等。

頁首頁尾編輯器簡介(Header/Footer Builder)

頁首與頁尾編輯器是一套視覺化的編輯器,已經在 Astra 3.0.0 版本導入,因為 Astra 主題的頁首頁尾的功能一直是讓人詬病的地方,功能少且不好用,所以官方就推出了這一套編輯器讓大家可以更輕鬆容易的編輯美化自己的頁首頁尾。

啟用方式

如果你還是使用舊版本的,可以透過以下方式啟用新版的編輯器。

Astra-Theme-free-enable-builder

編輯器外觀

在你啟用新版本的編輯器之後,不管是 Header 或 Footer 的編輯器,都會分成三層,分別是上(Above)、主要(Primary)與下(Below),在設定編輯上你不一定三個層都要設計或放東西。

WordPress Astra 主題完整教學|頁首與頁尾篇(Header and Footer) 8

電腦與手機的編輯

可以透過控制列下方按鈕切換電腦、平板與手機等模式,針對不同裝置對 Header/Footer 設定。

Astra-Theme-free-mode-change

元素種類

免費版本跟 Pro 版本編輯與使用上的方式都一樣,主要是差在可以新增編輯元件的數量,與 Pro 版本獨有的功能(Sticky Header),我把官方表格整理如下,大家可以參考。

拖拉即可改變位置

在視覺化的頁首頁尾編輯器中,只要透過拖拉的方式,就可以改變元素的位置。

Astra-Theme-free-mode-header-footer-position

頁首(Header)編輯器教學

這個章節會示範我比較常用到的頁首功能,並不會包含所有的功能示範,但是如果你只要學會或熟悉了,其他的應用都差不多,如果有什麼問題,一樣可以跟我溝通討論。

Astra-Theme-Header-Builder

就如同前面所介紹的,編輯器內會有分成三行,每一行分成三格可以放置想要的元素,並可以用拖曳的方式來改變位置,針對每一行也可以去調整高度、邊界、顏色等設定,細節後面會教學示範。

教學範例會在主要(Primary)這一行中加入 Logo 圖片,並設定 Logo 大小、網站標題、網站說明以及網站的圖示等,讓我們開始吧!

新增 Logo 圖片

Astra-Theme-Header-Logo-Picture

如果你有 Retina 顯示器的專用 Logo 圖片,在你上傳設定完成一般的 Logo 圖片後,下方會多一行「Different Logo For Retina Devices?」,可以打開設定並上傳高解析度的 Logo 圖片,這張圖片會在 Retina 顯示器中自動轉換。

Astra-Theme-Header-Logo-Retina

Logo 圖片大小

Astra-Theme-Header-Logo-Size

網站標題與說明

Astra-Theme-Header-Logo-Title

網站標題與說明有兩個選項可以設定,分別是:

  • Inline Logo & Site Title: 啟用這選項可以把 Logo 圖片和標題排成同一行,並不會分段。
  • Display Site Tagline: 可以顯示或隱藏網站的說明。
Astra-Theme-Header-Logo-Title-inline

效果如下範例。

Astra-Theme-Header-Logo-Title-inline

網站圖示

網站圖示是指你網頁分頁左邊的圖案,或是當你把網頁加入我的最愛內顯示的圖案,建議圖片為正方形,至少有 512 x 512 像素,如下圖。

Astra-Theme-Header-small-logo
WordPress Astra 主題完整教學|頁首與頁尾篇(Header and Footer) 20

網站標題與說明文字大小(含間距)

可以針對網站的標題與文字大小做修改,如下範例。

Astra-Theme-Header-Logo-Title-font-size

新增選單

教學範例會在主要(Primary)這一行中加入「選單」的功能,這邊先略過選單的設計調整方式,可以點我前往這篇文章參考選單設計新增方式。設定上會跳過大小、字型、顏色等基本設定,但會示範一些選單特有的功能如:選單呈現的動畫與滑鼠移動過去呈現的方式等。

新增主要選單

Astra-Theme-Header-Add-Menu

選單呈現動畫

呈現的方式有三種,分別是:

  • Slide up: 向上捲動
  • Slide down: 向下捲動
  • Fade: 淡入
Astra-Theme-free-header-menu-animation

分隔線(Divider)

可以針對選單的項目做分隔線的區隔,如下。

Astra-Theme-free-header-menu-divider

選單標題互動模式(Hover)

可以設定當滑鼠移動過去選單的字時,會有什麼呈現方式,總共有三種:

  • Zoom in: 放大
  • Underline: 線在底部
  • Overline: 線在上方
Astra-Theme-free-header-menu-hover

新增社交圖示

教學範例會在上方(Above)這一行中加入社交圖示,如下。

Astra-Theme-free-header-add-social-icon

預設會有 Facebook、Twitter、Instagram 三個社交圖示,可以依照自己需求增減,並可以設定只顯示圖案或是名稱也一起顯示。

Astra-Theme-free-header-add-social-icon

點擊各個項目可以進入編輯名稱、網址與顯示圖案等等,這邊用 Facebook 作為範例。

Astra-Theme-free-header-add-social-icon-setting

頁尾(Footer)編輯器教學

頁尾的編輯器使用方式跟頁首完全一樣,我這邊就不再多做說明與示範。

Astra-Theme-free-footer-add-copyright

Astra Pro 限定功能

在 Astra Pro 版本中,多了一個 Sticky Header 的功能,Sticky 是「黏」的意思,顧名思義該功能可以在當你向下捲動網頁時,頁首也可以保持(黏)在最上方,可以不用再捲動到頁面最上方才能看到頁首。

Astra-Theme-Sticky-Header

啟用的效果如下範例。

Astra-Theme-Sticky-Header

Astra 主題教學系列文章

Astra 主題文章

文章連結

全局設定篇(Global Settings)

頁首與頁尾篇(Header and Footer)

麵包屑(Breadcrumb)、側邊欄(Sidebar)與部落格設定(Blog)篇

選單(Menu)、小工具(Widget)、首頁(Homepage)設定、附加 CSS 篇

免費(Free)延伸功能篇

Astra Pro 專業版進階功能篇

常見問題

Astra Theme 是什麼?

Astra 是一款由 Brainstorm Force 所開發的一款輕量萬用型主題,並且有豐富的範例模板可以直接套用,快速建立網站。

Astra Theme 需要收費嗎?

Astra Theme 有免費版本與收費版本,免費版本可以直接下載並使用。

Astra Theme 有什麼特色?

有以下重點特色:
1. 禁用 jQuery,改使用 Vanilla JavaScript,達到更好的效能。
2. 主題大小只有 50KB,相較於其他主題非常的輕量。
3. 擁有多種內建網頁模板可以使用。
4. 完美與主流編輯器兼容,如 Elementor、Beaver Builder、Gutenberg等。
5. 在 GitHub 上擁有 100% 開源程式碼。
6. 主題自帶基本SEO 結構化資料標記。

Astra Theme 有哪些方案?

Astra Theme 總共有三種方案以及兩種合約長度,官網不定時舉辦折扣活動:
年約制:
1. ASTRA PRO:47 美金/年
2. ESSENTIAL BUNDLE:169 美金/年
3. GROWTH BUNDLE:249 美金/年
終身制:
1. ASTRA PRO:249 美金
2. ESSENTIAL BUNDLE:499 美金
3. GROWTH BUNDLE:699 美金

建議一開始就購買 Astra Pro 以上版本嗎?

不建議一開始就購買,先使用免費版本,覺得適合自己再花錢購買即可。

Starter Templates 是什麼?

Starter Templates 是 Astra Theme 所提供的免費網頁模版,可以直接套用,對於剛建立網站的新手來說,非常的方便。

Starter Templates 有幾個模板可以使用?

免費版的 Astra 主題提供的 Starter Templates 免費模板大約有 41 款,如果購買 Astra Essential Bundle 版本(Pro 版的下一階),則可以擁有 150 個以上的模板可以任意使用,數量非常之多!

Astra 主題簡介

Astra 主題
WordPress Astra 主題完整教學|頁首與頁尾篇(Header and Footer) 33

Astra 是一款由 Brainstorm Force 所開發的一款輕量萬用型主題,並且有豐富的範例模板可以直接套用,快速建立網站。

幣種: TWD

適用系統: WordPress

軟體類別: DesignApplication

推薦指數
5

  • 文章內容有誤、有任何問題或商業合作,都歡迎透過聯絡我跟我溝通討論。
  • 部落格內某些連結是聯盟行銷,詳細請參閱免責聲明
  • 部落格內所有內容版權為本站所有,如要轉載請先來信溝通,詳細資訊請看隱私權政策

留下評論

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

回到頂端