Astra Theme教學|WordPress網站架設新手必知Astra佈景主題

Astra Theme教學|網站架設新手必知WordPress佈景主題

文章最後更新於 2023 年 09 月 07 日

Astra Theme教學 將會介紹WordPress網站架設新手必知的Astra佈景主題各種功能、使用方法。

Erian的客戶包含許多產業,像是 電商零售、娛樂、運動健身、居家用品、線上課程平台等…,我們使用過各種WordPress佈景主題,Astra Theme佈景主題 使用者介面簡單,新手也可以快速上手、輕量兼具網站速度,並提供 一次購買,終身使用方案!

 

Astra Theme佈景主題簡介

  • 是由Brainstorm Force開發的WordPress佈景主題
  • 輕量兼具網站速度
  • 採用Vanilla JavaScript / 禁用jQuery – 減少網站載入需求
  • 價格方案-分為 年費方案/ 終生方案
  • Astra佈景主題只需要50 KB 即可運作 – 其他WordPress佈景主題則需要300 KB以上
免費試用 Astra

 

Astra 佈景主題 提供各種網站模板,WordPress新手可以一鍵套用,打造不同種類品牌網站,像是 品牌形象網站、電商購物平台、線上課程網站、作品集等。

此外,Astra Theme佈景主題 付費方案,還提供 WP Portfolio 作品集、Ultimate Addons for Elementor 頁面編輯器 等實用的WordPress外掛。

Erian將在本文將逐步介紹 Astra Theme佈景主題使用教學,協助WordPress網站架設新手快速掌握Astra佈景主題的各種功能,建立客製化的品牌網站。

 

Astra Pro 免費使用1年 x Cloudways主機 獨家優惠活動

Cloudways主機 與 Astra Theme佈景主題 合作,你只需要點擊「立即取得免費 Astra Pro」,並且 註冊/安裝 Cloudways主機 + Astra Theme佈景主題,就可以免費使用1年 Astra Pro 專業版!

如果你想了解更多Cloudways各種功能/使用教學,可以點擊兩篇文章 《Cloudways主機評價》、《Cloudways主機教學》。

立即取得免費 Astra Pro

(免費使用1年 Astra Pro 專業版)

 

延伸閱讀:
Cloudways教學|用CP值最高主機架設WordPress網站(前三個月8折)
Astra Pro專業版教學 (建構中)
Astra Theme佈景主題 使用評價 (建構中)

 

WordPress 網站架設教學系列

【 WordPress 架站教學1 】WordPress 是什麼?WordPress 架設網站 8 項入門教學完整介紹

【 WordPress 架站教學2 】如何用 WordPress 架設網站-網域申請 / DNS/ 主機-完整設定教學

WordPress 架站教學3 】WordPress 後台教學|WordPress 新手必知 10 大功能完整操作指南

【 WordPress 架站教學4 】Astra Theme 教學|網站架設新手必知 WordPress佈景主題

 

Astra Theme佈景主題是什麼?

Astra Theme 是由 Brainstorm Force 開發的WordPress佈景主題,你不需要學習程式語言,就可以透過模板建立各種WordPress網站。

Astra佈景主題分為免費版、專業版,若你想要創建 品牌形象、電商購物、線上課程等類型網站,Astra Pro專業版功能完整,只要一鍵安裝模板,即可滿足各種網站外觀設計需求。

 

Astra Theme佈景主題-價格方案

  • Astra 免費版
  • Astra Pro – $49美金/年、$239美金/終身使用方案 (無網站使用數量限制)
  • Essential Bundle – $169/年、$499/終身使用方案 (無網站使用數量限制)
  • Growth Bundle: $249/年、$699/終身使用方案 (無網站使用數量限制)

(價格方案截至2022年8月 Astra官方網站)

Astra Theme佈景主題-價格方案 (價格方案截至2022年8月 Astra官方網站)
Astra Theme佈景主題-價格方案 (價格方案截至2022年8月 Astra官方網站)

 

不論你是購買哪一種方案,Astra Theme佈景主題 付費板 皆無網站使用數量限制

Erian的客戶都是使用 Essential Bundle方案,產業包含 電商零售、娛樂、運動健身、居家用品、線上課程平台、公益團體等,這個方案提供 Ultimate Addons for Elementor頁面編輯器,即使是WordPress新手也能快速上手,套用模板/客製化你的網站,適用各種類型品牌網站。

免費試用 Astra

 

Astra Theme佈景主題-提供180多款網站模板

Astra提供的Starter Templates外掛,其中包含180多款網站模板,WordPress新手只需要一鍵就可以完成網站外觀設計。

Astra Theme佈景主題 提供180多款網站模板 (資料來源: Astra官方網站)
Astra Theme佈景主題 提供180多款網站模板 (資料來源: Astra官方網站)

Astra佈景主題整合多款知名WordPress視覺化頁面編輯器,如 Gutenberg、Elementor、Beaver Builder等,協助 品牌/電商/自媒體客製化網站外觀設計。

 

延伸閱讀:

Elementor頁面編輯器-使用教學 (建構中)

 

Astra Theme佈景主題網站速度測試

Astra提供輕量的佈景主題/ 禁用jQuery/ 只需要50 KB 即可運作,使安裝Astra外掛的網站速度更快!

Astra提供輕量的佈景主題 使網站速度更快! (資料來源: Astra官方網站)
Astra提供輕量的佈景主題 使網站速度更快! (資料來源: Astra官方網站)

 

Astra Theme佈景主題提供各種自訂功能-客製化網站外觀

Astra佈景主題提供多種自訂功能,品牌/電商/自媒體 可以依照自身需求,調整網站版面,客製化網站外觀,加深消費者的品牌印象。

你可以透過Astra佈景主題調整WordPress網站的 頁首/頁尾、主要品牌色、選單排序、字體、排版等,自訂功能相當完整。

此外,Astra佈景主題可以即時預覽 電腦/平板/手機 的排版畫面,WordPress新手不需要學習程式語言,就可以透過 Elementor頁面編輯器 直接在預覽畫面中,調整網站排版,滿足各種產業的網站架設需求!

免費試用 Astra

 

Astra Theme佈景主題安裝教學

Astra佈景主題分為免費版、專業版,若你想要創建 品牌形象、電商購物、線上課程等類型網站,WordPress架站新手可以先安裝免費版體驗。

如果你架設的WordPress網站為 品牌形象、電商、線上課程網站,可以選擇功能完整的 Astra Pro專業版,只要一鍵安裝模板,即可滿足各種網站外觀設計需求。

 

Astra Theme佈景主題安裝教學

step 1

  我們可以在 WordPress後台中找到 外觀 → 佈景主題 → 安裝佈景主題

在WordPress後台中找到 外觀 → 佈景主題
在WordPress後台中找到 外觀 → 佈景主題

step 2

接著,我們會看到WordPress佈景主題類別- 像是 熱門、最新上架及更新、我的最愛、自訂篩選條件等條件

WordPress佈景主題類別
WordPress佈景主題類別

step 3

 點擊特色篩選條件後,你會看到各種WordPress佈景主題篩選條件,你可以選擇 網站用途、網站功能、網站版面配置等

各種WordPress佈景主題篩選條件
各種WordPress佈景主題篩選條件

品牌/電商/自媒體 可以選擇與自身品牌相關的篩選條件,挑選與品牌調性類似的WordPress佈景主題,打造官網的品牌風格,加深消費者的品牌印象。

step 4

在WordPress佈景主題搜尋欄位輸入 Astra,點擊 安裝

在佈景主題搜尋欄位輸入 Astra,點擊安裝
在佈景主題搜尋欄位輸入 Astra,點擊安裝

step 5

Astra佈景主題安裝完成之後,點擊 啟用 網站就會套用佈景主題,你可以到網站前台確認網站外觀是否有改變

Astra佈景主題安裝完成之後,點擊 啟用
Astra佈景主題安裝完成之後,點擊 啟用

step 6

每種WordPress佈景主題都提供不同的功能,在WordPress後台 → 外觀 的位置會顯示Astra佈景主題的功能選項

在WordPress後台 → 外觀 的位置會顯示Astra佈景主題的功能選項
在WordPress後台 → 外觀 的位置會顯示Astra佈景主題的功能選項

 

Astra Child Theme子主題安裝教學

 

為什麼使用Astra Child Theme子主題?

不論你的WordPress網站使用的是什麼佈景主題,都需要升級最新功能,並維護網站狀態。

為了避免原本網站設定被修改,因此有些WordPress網站會創建 子主題,保留原本設定的 程式碼/功能,降低網站重新設定的時間成本。

 

step 1

前往官方網站的 Astra Child Theme子主題 生成網頁,就可以命名/創建Astra子主題,點擊 Generate按鈕後,下載 Astra子主題的zip檔

創建Astra子主題
創建Astra子主題

step 2

我們可以在 WordPress後台中找到 外觀 → 佈景主題 → 安裝佈景主題

外觀 → 佈景主題 → 安裝佈景主題
外觀 → 佈景主題 → 安裝佈景主題

step 3

接著,我們可以點擊 上傳佈景主題 → 將剛剛下載的Astra子主題的zip檔進行上傳

上傳佈景主題- Astra子主題
上傳佈景主題- Astra子主題

step 4

接著,我們可以點擊 上傳佈景主題 → 上傳將剛剛下載的 Astra子主題zip檔 → 點擊 啟用 確認Astra子主題可以使用

啟用 Astra Child Theme子主題
啟用 Astra Child Theme子主題

不論你的WordPress網站是使用Astra佈景主題、Astra子主題,只能啟用一種佈景主題

免費試用 Astra

 

Astra Theme佈景主題模板套用教學

Astra Theme佈景主題中的Starter Templates外掛-包含180多款網站模板,WordPress新手只需要一鍵套用,就可以快速完成網站外觀設計。

WordPress新手在套用Astra佈景主題模板前,必須先安裝Starter Templates外掛。

 

step 1

登入WordPress網站後台 → 選擇 外觀 → Astra Options

Astra Options
Astra Options

step 2

接著,找到右上角的 Starter Templates位置 →  點擊 Install Importer Plugin 網站就會開始安裝外掛

點擊 Install Importer Plugin
點擊 Install Importer Plugin

step 3

在Starter Templates安裝完成後,模板外掛會需要你選擇常使用的頁面編輯器,這篇教學會以 Elementor頁面編輯器 為例

選擇 Elementor頁面編輯器
選擇 Elementor頁面編輯器

step 4

你可以選擇安裝適合自身品牌的網站外觀模板

你可以選擇安裝適合自身品牌的網站外觀模板
你可以選擇安裝適合自身品牌的網站外觀模板

品牌/電商/自媒體 可以依照自身需求- 整個網站都安裝模板/單一網頁安裝模板。

如果看到模板右上角有標註PREMIUM,表示網站必須安裝Astra Pro專業版才可以使用。

免費試用 Astra

 

Astra Theme佈景主題功能選單教學

Astra Theme佈景主題安裝完成後,我們可以先了解Astra有什麼主要功能? 以下Erian將逐一介紹Astra的每項功能。

 

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

選擇Astra自訂功能
選擇Astra自訂功能

step 2

進入Astra佈景主題功能選單後,你可以依據網站需求進行客製化修改

Astra Theme佈景主題功能選單
Astra Theme佈景主題功能選單

 

Astra佈景主題將網站每個區塊分類的非常明確,即使是WordPress網站架設新手也可以快速上手,品牌可以依照網站需求,調整網站的外觀、排版、文字等等……。

 

Astra Theme佈景主題功能選單

  • Global 全站設定: Typography 文字設定、Colors 網站顏色設定、Container 容器設定、Buttons 按鈕設定 等
  • Header Builder 頁首編輯器: 網站主選單設定、網站 Logo設定、網站主選單排版設定、頁首顏色設定、透明頁首設定 等
  • Breadcrumb 網站路徑/麵包屑: 你可以設定 網站路徑出現的位置,像是 顯示在文章標題前方/後方 等
  • Blog 部落格設定: Blog / Archive 文章列表設定、Single Post 單篇文章設定 等
  • Sidebar 側邊欄設定: 你可以設定 網站側邊欄位置、隱藏網站側邊欄、調整網站側邊欄寬度 等
  • Footer Builder 頁尾編輯器: Copyright © 版權宣告設定、頁尾 上層/中層/下層 設定、頁尾社群按鈕設定、頁尾排版設定 等
  • Performance 字體託管: 你可以上傳字體至網站上、託管 Google Fonts字體,提升網站載入速度,增進消費者體驗
  • WooCommerce 電商設定: 如果你想架設的是電商購物網站,推薦使用WooCommerce電商外掛,你可以設定產品目錄、產品頁面、購物車、結帳頁面 等

 

接著,Erian將會介紹Astra Theme每項主要功能的使用教學。

免費試用 Astra

 

Astra Theme佈景主題教學- Global 全網站設定

Astra Theme佈景主題- Global 全網站設定,就是你可以一次套用整個網站所有頁面的設定,如: 網站的顏色、圖片、文字、排版等等……。

 

Global 全網站設定的主要功能

  • Typography 文字設定
  • Colors 網站顏色設定
  • Container 網站容器設定
  • Buttons 網站按鈕設定

 

WordPress網站架設新手如果遇到網站前台,因為外掛顯示成英文,推薦你使用 Loco Translate外掛,這款外掛可以協助你將網站的英文一次翻譯為中文,我們有客戶也使用這款外掛,節省許多網站修改的時間成本!

 

Astra Theme佈景主題- Typography 文字設定

 

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Global 全網站設定

step 3

點擊 Typography 文字設定 → 選擇 Body Font

→ 在 Body Font 中,你可以修改網站的 內文字體、字體類型、字體大小、字體粗細、字體行高等

→ 你可以切換不同裝置預覽網站排版外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Body Font
Astra Theme佈景主題- Body Font

step 4

點擊 Typography 文字設定 → 選擇 Headings Font

→ 在 Headings Font 中,你可以修改網站的 標題字體、字體類型、字體粗細、字體行高等

→ 你可以切換不同裝置預覽網站字體設定,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Headings Font
Astra Theme佈景主題- Headings Font

網站標題的 HTML 程式碼標籤為 H1 ~ H6。其中,H1標題 的SEO權重最高;H2標題 的SEO權重第二高;H3 ~ H6 依此類推。

因此,你在設定網頁標題、文章標題時,權重越高的標題,就越需要置入產品的核心關鍵字。

step 5

如果想修改 H1 ~ H6標題字體,可點擊 Typography 文字設定

→ 選擇 H1 ~ H6 的筆型符號進行修改

→ 修改完成後,點擊最上方的 發布

Astra Theme佈景主題- H1 ~ H6標題
Astra Theme佈景主題- H1 ~ H6標題
免費試用 Astra

 

Astra Theme佈景主題- Colors 網站顏色設定

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Global 全網站設定

step 3

點擊 Colors 網站顏色設定

→ 你可以修改網站 配色版型、品牌主視覺顏色、標題顏色、連結顏色、網站被景色、文章背景色等

→ 你可以切換不同裝置預覽網站排版外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Colors 網站顏色設定
Astra Theme佈景主題- Colors 網站顏色設定
免費試用 Astra

 

Astra Theme佈景主題- Container 網站容器設定

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Global 全網站設定

step 3

點擊 Container 網站容器設定

→ 你可以選擇適合的網站外觀排版

→ 如果網站有安裝 WooCommerce電商外掛,也可以調整網站的商品頁面排版

→ 你可以切換不同裝置預覽網站排版外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Container 網站容器設定
Astra Theme佈景主題- Container 網站容器設定
免費試用 Astra

 

Astra Theme佈景主題- Buttons 網站按鈕設定

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Global 全網站設定

step 3

點擊 Buttons 網站按鈕設定

你可以設定 按鈕形狀、按鈕顏色、按鈕字體、按鈕文字顏色、按鈕外框寬度、按鈕圓角等

→ 你可以切換不同裝置預覽網站按鈕外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Buttons 網站按鈕設定
Astra Theme佈景主題- Buttons 網站按鈕設定
免費試用 Astra

 

Astra Theme佈景主題教學- Header Builder 頁首編輯器

Header Builder 頁首編輯器,可以協助你客製化WordPress網站頁首,你可以透過Header Builder 修改 品牌LOGO、頁首顏色、頁首內距等。

 

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Header Builder 頁首編輯器

Astra Theme佈景主題- Header Builder 頁首編輯器主要功能
Astra Theme佈景主題- Header Builder 頁首編輯器主要功能

 

Astra Theme佈景主題- Header Builder 頁首編輯器主要功能

  • Elements 頁首元素設定: 你可以設定 網站頁首名稱、頁首品牌LOGO、頁首按鈕、頁首主選單等
  • Design 頁首設計設定: 你可以修改 頁首內距、頁首外框寬度等
  • Transparent Header 透明頁首: 有些Astra佈景主題模板會直接套用透明頁首,因此如果你在修改網站設定後,網站外觀沒有變化,可以嘗試使用透明設定
  • 小工具編輯: 頁首主要分為 上層/主要/下層頁首,你可以將滑鼠停留在需要編輯的位置,就會出現 「+」符號 → 點擊「+」即可新增小工具

 

你可以透過小工具新增-像是 社群連結按鈕、站內搜尋欄、購物車按鈕、網站按鈕等。

免費試用 Astra

 

Astra Theme佈景主題- 編輯網站Logo

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

將滑鼠移動到 網站Logo 位置,點擊 筆型符號,即可開始Logo設定

Astra Theme佈景主題- 編輯網站Logo
Astra Theme佈景主題- 編輯網站Logo

step 3

點擊 變更圖片,即可上傳品牌Logo

→ 你可以調整 Logo大小、Display Site Title 是否隱藏網站標題、編輯網站標題等

→ 你也可以切換裝置,確認品牌Logo在頁首呈現的排版外觀,確認完成修改後,點擊 發布

Astra Theme佈景主題- 品牌Logo設定
Astra Theme佈景主題- 品牌Logo設定
免費試用 Astra

 

Astra Theme佈景主題- 編輯網站主選單

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

將滑鼠移動到 網站主選單 位置,點擊 筆型符號,即可開始設定網站選單

Astra Theme佈景主題- 編輯網站主選單
Astra Theme佈景主題- 編輯網站主選單

step 3

你會先看到可以修改 子選單寬度 的位置 → 點擊 Configure Menu from Here.

Astra Theme佈景主題- 子選單寬度
Astra Theme佈景主題- 子選單寬度

step 4

點擊 建立選單

Astra Theme佈景主題- 建立選單
Astra Theme佈景主題- 建立選單

 

step 5

輸入 選單名稱 → 點擊最下方的 下一步

Astra Theme佈景主題- 輸入 選單名稱
Astra Theme佈景主題- 輸入 選單名稱

step 6

點擊 新增選單項目 → 你可以開始新增 原本建立好的WordPress網站頁面,或是新增分類

Astra Theme佈景主題- 新增選單項目
Astra Theme佈景主題- 新增選單項目

step 7

點擊 分類名稱 → 你可以修改 分類名稱、內容說明、CSS類別等

Astra Theme佈景主題- 修改選單分類名稱
Astra Theme佈景主題- 修改選單分類名稱

step 8

將滑鼠移動到 網站主選單 位置 → 再次點擊 筆型符號

→ 點擊 Design 設計

→ 你可以修改選單設計樣式

  • Menu Color選單顏色
  • Text / Link 選單文字/連結顏色
  • Background 選單背景色
  • Menu Font 選單字體
  • Menu Spacing 選單內距
  • Margin 選單外距

→ 你可以切換不同裝置預覽網站主選單外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Design 設計
Astra Theme佈景主題- Design 設計
免費試用 Astra

 

Astra Theme佈景主題- 編輯 Above Header 上層頁首

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Header Builder 頁首編輯器

Astra Theme佈景主題- 編輯Above Header 上層頁首
Astra Theme佈景主題- 編輯Above Header 上層頁首

step 3

你可以將滑鼠停留在 Above Header 上層頁首 會出現 「+」符號

→ 點擊「+」即可新增小工具

→ 我們以新增 Social 社群連結按鈕 為例

Astra Theme佈景主題- Above Header 上層頁首
Astra Theme佈景主題- Above Header 上層頁首

step 4

你可以設定 社群圖示、社群連結

Astra Theme佈景主題- 設定 社群圖示、社群連結
Astra Theme佈景主題- 設定 社群圖示、社群連結

step 5

點擊 Above Header 上層頁首 左側 齒輪符號 → 設定 上層頁首高度

Astra Theme佈景主題- 設定 上層頁首高度
Astra Theme佈景主題- 設定 上層頁首高度

step 6

點擊 Design 設計 → 你可以設定 網站頁首 設計樣式

  • Background 頁首背景色
  • Bottom Border Color 頁首邊界顏色
  • Menu Font 選單字體
  • Padding 頁首內距
  • Margin 頁首外距

→ 你可以切換不同裝置預覽網站頁首外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- 設定 上層頁首高度
Astra Theme佈景主題- 設定 上層頁首高度
免費試用 Astra

 

Astra Theme佈景主題- 編輯 Transparent Header 透明頁首

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Header Builder 頁首編輯器

step 3

點擊 Transparent Header 透明頁首

Astra Theme佈景主題- Transparent Header 透明頁首
Astra Theme佈景主題- Transparent Header 透明頁首

step 4

你可以進行 Transparent Header 透明頁首 的各種設定

  • Enable on Complete Website 啟用/關閉 整個網站的透明頁首
  • Enable On 開啟哪一種裝置的透明頁首
  • Different Logo for Transparent Header 啟用透明頁首後,是否使用不同的品牌Logo

→ 你可以切換不同裝置預覽網站透明頁首,修改完成後,點擊最上方的 發布

Astra Theme佈景主題- Transparent Header 透明頁首
Astra Theme佈景主題- Transparent Header 透明頁首
免費試用 Astra

 

Astra Theme佈景主題教學- Breadcrumb 網站路徑/麵包屑 設定

Breadcrumb 網站路徑/麵包屑 可以幫助瀏覽網站的消費者,了解目前正在瀏覽網站的什麼位置。

例如: 消費者目前正在瀏覽商品頁,他們可以透過 Breadcrumb 網站路徑/麵包屑 快速回到首頁、其他網站選單位置等。

Breadcrumb 網站路徑/麵包屑
Breadcrumb 網站路徑/麵包屑

通常 Breadcrumb 網站路徑/麵包屑 會使用預設的設定,或是透過其他WordPress外掛設定。

如果你需要調整 Breadcrumb 網站路徑/麵包屑 顯示的位置,可以根據自身品牌需求,跟著以下步驟進行調整。

 

Astra Theme佈景主題- 編輯 Breadcrumb 網站路徑/麵包屑

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Breadcrumb 網站路徑/麵包屑

Astra Theme佈景主題- Breadcrumb 網站路徑/麵包屑
Astra Theme佈景主題- Breadcrumb 網站路徑/麵包屑

step 3

你可以選擇 Breadcrumb 網站路徑/麵包屑 顯示的位置

  • None 不顯示
  • Inside 顯示在頁首中
  • After 顯示在頁首後
  • Before Title 顯示在標題前
選擇 Breadcrumb 網站路徑/麵包屑 顯示的位置
選擇 Breadcrumb 網站路徑/麵包屑 顯示的位置
免費試用 Astra

 

延伸閱讀:

Facebook SEO優化– 經營臉書-FB粉絲專頁必學的11大技巧

 

Astra Theme佈景主題教學- Blog 部落格 設定

Astra Theme佈景主題可以設定 Blog 部落格的 文章列表、單一文章頁面中 標題大小、文章內容寬度、文章顯示方式等。

  • Blog / Archieve 文章列表
  • Single Post 單一文章頁面

 

其中,Blog / Archieve 文章列表、Single Post 單一文章頁面 可以設定的功能類似,只是 Single Post 單一文章頁面 可以選擇是否顯示相關文章

因此,以下我們將以Blog / Archieve 文章列表為例。

 

Astra Theme佈景主題- Blog 部落格 設定

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Blog 部落格

step 3

點擊 Blog / ArchieveSingle Post

Astra Theme佈景主題教學- Blog / Archieve 與 Single Post
Astra Theme佈景主題教學- Blog / Archieve 與 Single Post

step 4

你可以修改 文章結構 各種元素

  • Content Width 內容寬度
  • Post Structure 文章結構 → 點擊 眼睛圖示 可以選擇是否顯示文章圖片、文章標題、文章描述等,你也可以拖曳調整文章內容的顯示順序
  • Post Content 內容顯示方式 → 可以選擇顯示 Excerpt 文章摘要Full Content 完整文章,通常會選擇 Excerpt 避免頁面過長的情況
Astra Theme佈景主題教學- 文章結構
Astra Theme佈景主題教學- 文章結構

step 5

點擊 Design 設計 你可以設定 文章標題大小

  • Archive Title Font Size 文章列表-標題大小
  • Post Title Font Size 單一文章-標題大小

→ 你可以切換不同裝置預覽 部落格外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題教學- 文章標題大小 設定
Astra Theme佈景主題教學- 文章標題大小 設定
免費試用 Astra

 

Astra Theme佈景主題教學- Sidebar 側邊欄 設定

Astra Theme佈景主題可以設定 Sidebar 側邊欄 的 網站排版外觀、側邊欄寬度等。

 

Astra Theme佈景主題教學- Sidebar 側邊欄 設定

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Sidebar 側邊欄

step 3

你可以設定 Sidebar Width 側邊欄寬度

→ 你可以切換不同裝置預覽 側邊欄外觀,修改完成後,點擊最上方的 發布

Astra Theme佈景主題教學- Sidebar 側邊欄 設定
Astra Theme佈景主題教學- Sidebar 側邊欄 設定

step 4

通常WordPress網站側邊欄內容 會使用 小工具 進行設定

→ 進入 WordPress網站後台 → 選擇 外觀 → 小工具

→ 你可以加入 站內搜尋欄、側邊欄文字、網址連結、圖片等等……

Astra Theme佈景主題教學- 小工具設定網站側邊欄
Astra Theme佈景主題教學- 小工具設定網站側邊欄
免費試用 Astra

 

Astra Theme佈景主題教學- Footer Builder 頁尾編輯器

Astra Theme佈景主題的Footer Builder 頁尾編輯器 與上述介紹的 Header Builder 頁首編輯器 功能類似,同樣分為 上層/中層/下層 頁尾,以下我們將簡單介紹 Footer Builder 頁尾編輯器 的功能。

 

Astra Theme佈景主題教學- Footer Builder 頁尾編輯器 設定

step 1

登入WordPress網站後台 → 選擇 外觀 → 自訂

step 2

進入Astra佈景主題功能選單後,點擊 Footer Builder 頁尾編輯器

step 3

你可以將滑鼠停留在 Above Footer上層頁尾 會出現 「+」符號

→ 點擊「+」即可新增小工具

→ 我們可以新增 Copyright 版權、Social 社群連結按鈕、按鈕 等等……

Astra Theme佈景主題教學- 新增頁尾小工具
Astra Theme佈景主題教學- 新增頁尾小工具

其中,Astra 小工具中的Copyright 版權功能 會自更新 網站名稱、日期等資訊,不需要手動調整。

step 4

點擊 上層/中層/下層頁尾 左側的 齒輪圖示

→ 你可以設定 頁尾顯示排版、調整頁尾寬度、頁尾元素對齊的方式等等…

→ 你可以切換不同裝置預覽 頁首外觀,修改完成後,點擊最上方的 發布

點擊 上層/中層/下層頁尾 左側的 齒輪圖示
點擊 上層/中層/下層頁尾 左側的 齒輪圖示
免費試用 Astra

 

Astra Theme佈景主題教學影片

若你是 Astra Theme佈景主題新手,可以參考 Astra 官方  Brainstorm Force 的影片(有需要可以使用中文自動翻譯),這部教學影片會手把手教你使用這款工具。

Astra Theme佈景主題教學影片(影片來源:Astra 官方  Brainstorm Force

免費試用 Astra

 

結論

Astra Theme佈景主題 提供各種網站模板,WordPress新手可以一鍵套用,適合打造不同產業的網站,如: 品牌形象網站、電商購物平台、線上課程平台、網路論壇、自媒體作品集等。

Astra Theme佈景主題 輕量兼具網站速度,使消費者瀏覽網站速度更快,並提供 一次購買,終身使用方案! 你可以先試用Astra,若適合自身品牌、需要更多客製化功能,再購買Astra的付費方案。

免費試用 Astra

 

Astra Theme佈景主題-常見問題

 

Astra Theme佈景主題是什麼?

Astra Theme 是由 Brainstorm Force 開發的佈景主題外掛,即使是不熟悉程式語言的WordPress新手,也可以一鍵套用Astra佈景主題模板,架設各種不同功能的網站排版外觀。

Astra佈景主題分為免費版、專業版,若你想要建立 品牌形象網站、電商購物平台、線上課程網站等,推薦你使用Astra Pro專業版

如果想要使用Elementor 頁面編輯器 客製化你的網站,你可以選擇Astra佈景主題的 Essential Bundle方案,功能完整,適合各種網站排版設計需求。

免費試用 Astra

 

Astra Theme佈景主題的WordPress網站模板可以直接套用嗎?

Astra佈景主題提供的Starter Templates外掛,其中包含180多款網站模板,WordPress新手不熟悉網頁設計,也能馬上套用各種網站排版風格,打造不同類型的品牌網站,並且無網站使用數量限制

 

Astra Theme佈景主題整合什麼頁面編輯器?

Astra佈景主題整合多款知名WordPress頁面編輯器,如 Gutenberg、Elementor、Beaver Builder等,協助你客製化 品牌形象網站、電商平台、網路論壇、自媒體作品集、線上課程網站等。

WordPress網站架設新手,可以透過 Elementor頁面編輯器 直接在預覽畫面中,直接調整網站排版,使用者介面相當直覺,滿足各種產業的網站架設需求!

 

Astra Theme佈景主題會使WordPress網站變慢嗎?

Astra提供輕量的佈景主題/ 禁用jQuery/ 只需要50 KB 即可運作,使消費者瀏覽網站速度更快!

 

Starter Templates 是什麼?

Starter Templates 是 Astra Theme佈景主題提供的網站模板,選擇Astra佈景主題的 Essential Bundle方案,其中包含180多款網站模板,你可以一鍵套用網站排版,適合各種產業的網站。

 

Astra Theme佈景主題有什麼獨家優惠嗎?

Cloudways主機 與 Astra Theme佈景主題 合作,你只需要點擊「立即取得免費 Astra Pro」並同時註冊/安裝 Cloudways主機 + Astra Theme佈景主題,就可以免費使用1年 Astra Pro 專業版!

如果你想了解更多Cloudways的使用教學、主機評價,歡迎點擊這兩篇文章 《Cloudways主機評價》、《Cloudways主機教學》。

立即取得免費 Astra Pro

(免費使用1年 Astra Pro 專業版)

 

WordPress 網站架設教學系列

【 WordPress 架站教學1 】WordPress 是什麼?WordPress 架設網站 8 項入門教學完整介紹

【 WordPress 架站教學2 】如何用 WordPress 架設網站-網域申請 / DNS/ 主機-完整設定教學

WordPress 架站教學3 】WordPress 後台教學|WordPress 新手必知 10 大功能完整操作指南

【 WordPress 架站教學4 】Astra Theme 教學|網站架設新手必知 WordPress佈景主題

 


大家好,我是 Erian

在這裡我們將提供許多數位行銷、電商經營、創業職涯、實用軟體推薦、WordPress 教學等相關主題,協助 MIT 台灣企業打造知名品牌!

我們提供部落格 SEO 顧問文案撰寫顧問服務,想了解更多 Erian 創立網站的故事嗎?

查看影響立-Erian 的起源

如果你喜歡我的文章,歡迎你按讚、追蹤、分享影響立的 Facebook 粉絲專頁 行銷電商教學 Instagram 行銷電商懶人包,隨時收到第一手資訊,歡迎在文章下方留言分享。

【現任】


【曾任】
  • ViewEC 視宇 行銷部經理 / Wiser 秩宇
  • 曾任職知名連鎖零售通路,帶領團隊屢創公司業績、知名媒體採訪(非付費採訪)
擁有 9 年行銷、電商營運經驗,曾從零打造近 10 萬人社群。

【曾合作知名品牌】
Amazon 亞馬遜、Rakuten 樂天、蝦皮大學 Shopee、國際知名物流 DHL、華碩 ASUS、三立新聞、ET Today、Marie Claire 美麗佳人雜誌、美國探索頻道 Discovery、日本角川-Taipei Walker、MOMO 摩天商城、台新銀行等。

【行銷宗旨】
自身成為消費者體驗產品,必能創造亮點行銷。

【企業使命】
協助 MIT 台灣企業打造知名品牌!

影響立 Facebook 粉絲專頁 行銷電商教學】

Instagram 行銷電商懶人包】

影響立 Medium 部落格

【合作可洽 [email protected]

文章引用請來信索取授權,否則將保留法律追訴權。

 

 

發表迴響

error: Content is protected !!