cloudwp | WooCommerce 繁體中文使用手冊

認識網站編輯器

網站編輯器是使用模板和區塊對網站進行自訂的地方。本頁提供 WordPress 網站編輯器的概述,這是編輯商店模板和頁面內容的中央工具。將學習如何存取編輯器、透過列表視圖導航區塊和內容,以及重做或復原動作。此外,我們涵蓋網站範圍的樣式選項,包括排版、顏色、版面配置和網站範圍的區塊樣式設定。

存取編輯器

在網站上啟用區塊主題後,會看到外觀選單下的選項變更為顯示編輯器選項。

編輯器的組成

編輯器由三個主要區域組成:

  • 左側邊欄區域,根據當前選擇顯示區塊插入器或列表視圖。
  • 內容區域,顯示正在編輯的當前頁面、文章、模板或模板部件的內容。
  • 右側邊欄區域,當點擊右上角的「設定」或「樣式」圖示時展開以顯示區塊設定或網站樣式設定

1 – 區塊插入器, 2 – 內容區域, 3 – 設定側邊欄

在編輯器中重做或復原動作

在頁面左上方,區塊插入器旁邊,可以復原和重做頁面上的動作。

編輯器中的復原和重做動作按鈕

列表視圖

區塊大綱是導航具有許多區塊的文件的有用選項,因此不必無止境地捲動。

若要開啟區塊大綱並查看構成文章或頁面的所有區塊的列表視圖,請點擊由三行組成的圖示,看起來像項目符號列表。透過點擊給定的區塊,將被引導至編輯器欄位中的該區塊。

有關列表視圖的更多資訊可在此處找到。

退出編輯器

若要返回商店的管理區域,請點擊位於螢幕左上方、網站名稱左側的商店圖示。

樣式

為商店選擇的主題定義商店設計的許多方面,例如背景顏色和排版設定,如字體系列和字體大小。

透過樣式,可以根據需要自訂這些元素。可以為區塊設定預設顏色,並建立自己的自訂調色盤。有關樣式的更多資訊可在此處找到。

若要自訂商店的樣式:

  1. 從 WP 管理控制台,前往 外觀 > 編輯器
  2. 點擊編輯器右上角的樣式圖示,看起來像一個有深色一半和淺色一半的圓圈。
  3. 選擇排版、顏色、版面配置或區塊並自訂其選項。

排版

使用排版設定管理整個網站使用的文字外觀。可以分別調整常規文字和連結的設定。

文字的排版設定。

顏色

使用顏色設定管理商店全域元素的調色盤。

可以將主題的預設顏色調整為喜歡的顏色,或向商店的調色盤新增新顏色。

版面配置

使用版面配置設定為整個網站結構設定尺寸、區塊間距並新增內距。

區塊

使用區塊樣式設定自訂整個商店的區塊外觀。

在這裡,會看到可以在網站範圍層級自訂的所有區塊清單。選擇一個區塊以查看該區塊的可用選項。例如,可以為網站上的每個圖片區塊新增邊框半徑,如下所示。

使用樣式變更圖片區塊的外觀。

使用樣式對區塊所做的變更將影響商店中新增的該類型的每個區塊,除非已單獨自訂區塊。

若要深入了解在 WooCommerce 中使用區塊編輯商店,請查看我們的 WooCommerce 區塊指南