指南/編輯網站/編輯器/使用編輯器/變更區塊設定

變更區塊設定

使用 WordPress 編輯器在網站新增內容區塊後,你可以自訂該區塊的外觀。本指南將說明如何存取每個區塊的設定和自訂選項。

影片教學

這部影片會教你如何在 WordPress 編輯器中調整區塊設定,透過區塊工具列和設定側邊欄自訂區塊的選項、樣式和外觀。

此影片使用英文字幕。
YouTube 提供自動翻譯功能,讓你可以用自己的語言觀看:

開啟自動翻譯字幕的方法:

  1. 播放影片。
  2. 點擊影片右下角的 ⚙️ 設定 圖示。
  3. 選擇 字幕/副本
  4. 選擇 自動翻譯
  5. 從清單中選擇你的偏好語言。

使用自動配音(測試版)的方法:

  1. 點擊 ⚙️ 設定 圖示。
  2. 選擇 音訊曲目
  3. 選擇你想收聽的語言:

ℹ️ 翻譯與配音由 Google 自動產生,可能不夠精確,且自動配音功能仍在測試階段,暫未向所有語言開放。

如何自訂區塊

第一步是選取要自訂的區塊。你可以按一下區塊,或使用清單檢視來找到特定區塊。

接著,你可以在兩個地方找到區塊自訂選項:區塊工具列區塊設定

WordPress 編輯器中選取了一個圖片區塊。圖片上方的區塊工具列和編輯器右側的區塊設定已標示突顯。

區塊工具列

按一下區塊後,區塊工具列會出現在區塊的上方或下方。工具列包含操作該區塊的基本選項:

段落區塊的工具列顯示在區塊正上方。

全域區塊工具列選項

有些選項在大多數區塊的工具列中都找得到。以下將加以說明:

區塊工具列中,全域工具列設定已標示突顯。
  • 轉換:將區塊轉換成其他類型,或套用不同的樣式。詳情請參閱變更區塊類型或樣式
  • 拖曳:按住看起來像六個點的圖示,即可將區塊拖曳到頁面的其他部分。
  • 上移/下移:按向上鍵或向下鍵,可在頁面上將區塊上移或下移一個位置。
  • 對齊:變更區塊的位置。通常有靠左、靠右和置中選項,如果佈景主題支援,還會有寬幅和全寬選項。
  • 更多選項:工具列末端的三個垂直點圖示可開啟包含其他設定的選單:
    • 複製:將區塊複製到剪貼簿,以便在其他地方貼上。
    • 剪下:將選取的區塊移至剪貼簿,從原來的位置移除,以便貼到其他地方。
    • 複製:直接在原區塊下方建立區塊副本。
    • 插在前面:在目前區塊的上方建立空間以便新增區塊。
    • 插入下方:在目前區塊的下方建立空間以便新增區塊。
    • 新增備註新增備註以便與其他作者協作。
    • 複製樣式:複製區塊上使用的樣式
    • 貼上樣式:複製區塊的樣式後,將該樣式貼到選取的區塊上。
    • 群組化/取消群組化:此選項可讓你將多個區塊群組化,方便一次套用顏色和邊距等設定。深入瞭解群組區塊。
    • 鎖定:停用移動及/或刪除區塊的選項。
    • 重新命名:為區塊指定新名稱,該名稱會顯示在清單檢視中。
    • 隱藏:在特定裝置上隱藏區塊,或從已發表的頁面中移除。進一步瞭解如何在特定裝置上隱藏區塊。
    • 建立版面配置:儲存已自訂的區塊,讓你可以在網站各處重複使用。深入瞭解版面配置。
    • 設為精選圖片:此選項專屬於圖片區塊,可將該圖片設為頁面/文章的精選圖片
    • 移動到:按一下此選項後,再按一下頁面中的其他位置,即可將區塊移到那裡。
    • 以 HTML 格式編輯:以 HTML 格式編輯區塊內容。
    • 刪除:刪除頁面上目前的區塊。

區塊專屬工具列選項

每個區塊都有自己專屬的工具列選項。例如,圖片區塊的工具列包含新增連結、裁切圖片等設定:

區塊工具列中,區塊專屬圖示已標示突顯。
區塊專屬的區塊工具列選項範例。

將游標暫留在區塊工具列的圖示上即會顯示工具提示,說明各個圖示的功能:

區塊工具列中,雙色調濾鏡圖示的工具提示已標示突顯。

每個區塊都有專屬的使用指南可供你查看,幫助你深入瞭解各項設定。

頂端工具列與浮動工具列

預設情況下,區塊工具列會直接顯示在你正在編輯的區塊上方或下方:

一個段落區塊,工具列顯示在其正上方。

你也可以將區塊工具列固定在螢幕頂端,步驟如下:

  1. 在編輯器中,按一下螢幕右上角的省略符號(三個點)以開啟編輯器偏好設定。
  2. 按一下「頂端工具列」選項。旁邊會出現勾號,表示已啟用此功能。
  3. 區塊工具列現在會固定在螢幕頂端:
區塊工具列顯示在編輯器的頂端工具列中。

區塊設定

區塊設定側邊欄包含你正在編輯的區塊的更多自訂選項。每個區塊都有自己的設定,可以在設定側邊欄中找到。

若要開啟區塊設定側邊欄:

  1. 選取你想自訂的區塊。
  2. 按一下編輯器右上角的設定圖示。這個圖示看起來像一個有兩個寬度不一欄位的方形:
箭頭指向 WordPress 編輯器右上角的「設定」圖示。
  1. 按一下側邊欄頂端的區塊分頁,即可檢視所選區塊的設定。

許多區塊包含顏色文字排版尺寸進階區塊設定等選項。每個區塊也都有專屬的使用指南可供你查看,幫助你深入瞭解各區塊的專屬設定。

區塊樣式

許多區塊提供樣式設定,可用來變更顏色文字排版尺寸等。

在某些情況下,樣式設定會直接顯示在區塊設定側邊欄中。大多數區塊會有獨立的樣式分頁,以黑白圓形圖示表示。

區塊設定側邊欄中,箭頭指向「樣式」選項。

部分區塊還提供樣式變化——預先定義的視覺外觀,只需按一下即可套用。若要瞭解如何尋找和套用樣式變化,請參閱變更區塊類型或樣式

複製並貼上區塊樣式

複製並貼上區塊樣式,即可將某個區塊的格式設定(例如顏色、字型和對齊方式)套用到另一個區塊,而不會變更其內容。當你希望兩個區塊的外觀一致時,這個功能非常實用。

若要複製並貼上區塊樣式,請依照下列步驟操作:

  1. 按一下含有你想複製樣式的區塊。
  2. 在區塊工具列中,按一下省略符號(三個點)以開啟「更多選項」選單。
  3. 按一下「複製樣式」
  4. 按一下你想套用樣式的區塊。
  5. 再次開啟「更多選項」選單,然後按一下「貼上樣式」。第二個區塊現在就會使用與第一個區塊相同的樣式
箭頭從工具列的「更多選項」選單項目指向下拉選單中的「複製樣式」和「貼上樣式」選項。

複製樣式只會變更區塊的格式設定。若要複製區塊的內容,請參閱在編輯器中複製內容

使用 WordPress 代理程式自訂區塊

The WordPress Agent four-pointed star icon.

本節適用於透過 AI 網站建置器建立的網站(所有付費方案)或已啟用 WordPress 代理程式的網站(所有付費方案)。按一下畫面底部的 AI 圖示(四角星形)即可開啟 WordPress 代理程式。

WordPress 代理程式可以協助你調整並改善區塊的外觀。以下是一些你可以複製使用的提示範例:

  • 「請為我的首頁建議一組與 Logo 顏色相配的顏色配置。」
  • 「專業網站的標題和內文應該使用多大的字型大小?」
  • 「將我的『關於』頁面上所有圖片區塊置中。」
  • 「為我首頁上所有區段區塊新增 40 像素的內距。」

使用外部 AI 代理程式自訂區塊

The WordPress Agent four-pointed star icon.

你可以使用 Claude、Cursor、ChatGPT、OpenClaw 等外部 AI 代理程式,安全地讀取和編輯你的網站。為外部 AI 代理程式啟用 MCP 工具存取權限

AI 代理程式可以透過自然語言提示,更新你頁面和文章中的區塊設定,例如顏色、字型大小和樣式。以下是更多你可以嘗試的提示:

  • 「將我首頁上所有標題區塊設定為使用大字型大小。」
  • 「將我的『服務』頁面上的按鈕樣式改為外框設計。」
  • 「建議如何為這個行動呼籲區塊設定樣式,讓它更加醒目。」
  • 「將我首頁上封面區塊的背景顏色改為深藍色。」
Copied to clipboard!