Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹

Spectra 是什麼?

Spectra 是一款由 Brainstorm Force 所開發的 WordPress 頁面編輯插件,提供許多獨特且功能豐富的區塊。使用 Spectra,您可以輕鬆創建具有視覺吸引力和快速加載的 WordPress 網頁,可加強WordPress預設區塊編輯器(Gutenberg) 的不足。無需編碼即可建立超高效能的網站。

無論您是初學者、行銷人員還是專業人士,Spectra 都可以讓您輕鬆創建 WordPress網站。您可以使用多個 Spectra 區塊,隨時簡化您的網站建立流程。此外,Spectra 還提供簡單的設定和自訂選項,實現簡潔時尚的設計。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 特色功能

  • 區塊模式:您可以為網站上的不同部分匯入和自訂預先設計的區塊模式。
  • 設計範本:造訪多個預先設計的網站、頁面和區塊,可以根據您的喜好匯入和調整這些網站、頁面和區塊。
  • Popup Builder:您可以使用 Popup Builder 設計引人注目的彈出窗口,從而吸引觀眾的注意力或傳達重要訊息。
  • Copy Paste:您可以使用 Spectra Copy Paste 將一個區塊的設計(包括字體、顏色、間距、邊框、陰影和動畫)複製到另一個區塊上。
  • 版面導覽:您可以透過直覺的版面導覽輕鬆操作部分、行、列和區塊,從而簡化頁面設計流程。
  • Flexbox 容器:您可以使用疊加、偏移和其他設計元素來創建令人印象深刻且精彩的網頁,該塊利用了彈性盒技術。
  • 全域樣式支援:Spectra 讓您只需單擊即可設定網站的預設內容寬度。您也可以從主題繼承按鈕樣式,並在整個網站上保持一致的容器邊距及間距。
  • 動畫:您可以使用 Spectra 的一系列動畫(包括淡入淡出、滑動、縮放、翻轉等)來增強網站的互動性。免費用戶可以存取一系列可以輕鬆應用於任何區塊的動畫。
  • 簡潔程式碼:Spectra 採用符合最高編碼標準的簡潔程式碼構建,為您提供乾淨且有效率的程式碼輸出。這有助於創建輕量級網站,保證其快速載入時間。
  • 智慧載入:Spectra 僅會載入特定頁面上正在使用的區塊,從而確保 CSS 檔案保持最小化,減少頁面載入時間。這項智慧載入邏輯使得網站更有效率。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 優點與缺點

優點

  • 廣泛的定制
  • 功能豐富
  • 直覺的操作介面
  • 以績效為導向

缺點

  • 有限的預製模板
  • 不支援 CSS 網格
  • 學習曲線

Spectra 優錢

年費方案:

  • Spectra Pro:$49美元
  • Essential Toolkit:$79美元
  • Business Toolkit:$149美元

終身方案:

  • Spectra Pro:$199美元
  • Essential Toolkit:$399美元(推薦)
  • Business Toolkit:$599美元

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

免費版 vs 付費版

與免費版相比,付費版提供更多實用的小工具。除此之外,還包含一些進階的功能。

免費版付費版
Form
Modal
Post Carousel
Post Grid
Post Masonry
Animations
Display Conditions
Animation Effects
Dynamic Content
Loop Builder
Popup Builder
Slider Pro
Modal Pro
Image Gallery Pro

Spectra 安裝方法

安裝免費版 Spectra

您只需按照以下步驟在 WordPress 網站上安裝 Spectra 插件即可:

  1. 登入網站後台,請選擇「插件」
  2. 選擇「新增插件」
  3. 在搜尋欄位中輸入 Spectra,點擊「安裝」,然後「啟用」

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

安裝付費版 Spectra Pro

如果你覺得 Spectra 免費版的功能不夠用,就可以考慮付費升級成 Spectra Pro。

  1. 進入 Astra 官網 購買付費方案,選擇上方「Login to Account」
  2. 登入帳戶後,點選上方工具列「Account > Downloads」
  3. 點擊下載「Astra Pro Addon Plugin」安裝檔,檔案為 .zip 檔
  4. 回到 WordPress 後台,點選左側工具列「外掛 > 安裝外掛」
  5. 上傳剛剛下載的 Spectra Pro.zip 檔案後,點選「立即安裝」
  6. 安裝完成後,回到外掛頁面,找到 Spectra Pro 並點選「啟用」
  7. 回到 Astra 帳戶頁面,點選上方工具列「Account > License」
  8. 找到 Spectra Pro 的金鑰密碼後,複製到剪貼簿中
  9. 回到 WordPress 後台外掛頁面,點選 Spectra Pro 的「設定」
  10. 在「Your License」貼上金鑰密碼,點選「Active」
  11. 顯示「Lisense activated」就代表 Spectra Pro 安裝且啟用完成囉!

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 設定

Editor Options:這裏可設置網站內容寬度、按鈕主題承繼、容器邊距及間距、動態內容方式等等…

Asset Generation:文件生成,預設情況下,Spectra 在頁面上內聯載入 CSS 和 JS。

Templates:啟用模設計範本

Version Control:回滾到 Spectra 的舊版本

Performance:本地加載 Google 字體及本地字體

Integrations:連結其他應用,如 Instagram, Google reCAPTCHA

Site Visibility:啟用即將推出模式 或 維護模式

License:啟用付費版 Spectra Pro License

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 界面

打開頁面編輯時,在區塊中找尋Spectra區塊,只需點擊或拖放區塊即可使用。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 使用教學

現在您已經安裝了 Spectra,讓我們一起探索如何利用這些 Spectra 區塊來實現您夢想的網站吧。

  • 從建立新貼文或頁面開始。按一下「+」圖示可存取 Spectra 的區塊陣列。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

選擇一個區塊並將其添加到工作區後,您會發現無窮無盡的選項。Spectra 在左側提供設計的即時預覽,並在右側提供用戶友好的側邊欄。我們將介紹一些最常用的選項,以幫助您快速入門。

客製化 Spectra 區塊

Spectra 使自訂您的區塊變得輕而易舉,只需在側欄中選擇並調整設定即可。 Spectra 讓您深度自訂網站的各個方面,確保您的網站完全反映您獨特的願景和風格。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

這些選項會因每個區塊而有所不同。在「樣式」標籤中,您將能夠自訂區塊的外觀,例如顏色、版式、背景等:

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

還有進階選項卡,可讓您新增動畫、決定區塊顯示條件、調整 Z-Index 以及配置其他 CSS 程式碼:

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 設計範本

點擊「Design Library 設計範本」圖示即可使用 Spectra 預製的區塊圖案和套件。有三種不同的範本,如「Patterns」、「Pages」、「Kits」

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Patterns:這裏指區塊,可插入預先設計好的區塊。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Pages:這裏指頁面,可插入整個預先設計好的頁面。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Kits:這裏套件,可插入整個系列的全部頁面。

Spectra 教學:WordPress區塊編輯器強化插件,特色功能介紹 | WordPress網頁設計

Spectra 官方影片介紹

常見問題

Spectra 是什麼?

Spectra 是一款由 Brainstorm Force 所開發的 WordPress 頁面編輯插件,提供許多獨特且功能豐富的區塊。

我可以將 Spectra 與其他主題和外掛一起使用嗎?

可以的,Spectra 塊與所有主題和外掛相容。雖然 Spectra 經過優化,可以與 Astra 主題完美配合,但我們確保它們也能與 WordPress 生態系統中可用的所有主要主題無縫配合。

我需要具備程式編碼技能才能使用 Spectra 嗎?

不需要。您無需任何程式設計知識即可使用 Spectra。 Spectra 的設計易於使用,任何人(甚至初學者)都可以輕鬆使用來建立 WordPress網站

結論

Spectra 直接整合在 WordPress 編輯器中,即使不會寫程式,也能透過內部的視覺化功能、Flexbox 容器輕鬆設計響應式網站,操作過程中無需觸碰程式,讓你直覺操作。希望這篇文章對您有幫助!如果您有任何問題或需要 WordPress網頁設計 服務,請隨時聯繫我們。

我想要找..

文章目錄

推薦服務

最新文章

結合創意、策劃、設計與科技

一站式設計及網上推廣

搵我哋傾下