用 Canvas 視覺化編輯網站
透過聊天對話很適合處理大幅度的修改。但有時候,你只想直接指著頁面上的某個地方修改,這正是 Canvas 的用武之地。在本教學中,我會直接點擊餐廳網站 Hinoki Udon 的頁面來進行編輯。
作者:Oberon Lai。我是 ShipPress(Codotx, LLC)的開發者,所以這是我們自己的產品。
-
開啟 Canvas
在預覽畫面正上方,點擊 全部頁面。這會開啟 Canvas:並排顯示網站的所有頁面。
第一次開啟時,會有一段簡短提示說明操作方式:點擊標題、文字或圖片即可修改,也可以在下方的輸入框輸入要修改的內容。點擊 知道了 即可將提示關閉。
-
移動與瀏覽:縮放、縮放至全部與跳到…
使用 − 和 + 來縮小與放大。縮放至全部 能一次顯示整個網站:最上方是頁面,接著是文章與分類。
若想直接前往特定頁面,請打開 跳到…。這裡列出了所有頁面、文章與分類。點選其中一個,Canvas 就會直接放大聚焦到該項目。
-
自己動手修改文字
點擊標題或任一段文字。這時會開啟一個顯示其 文字 的小面板。輸入新的文字後,點擊 儲存。
在影片中,我將「Made by hand, every morning」改為 Handmade noodles, every single morning。標題隨即變更。因為這是你親自輸入的文字,所以不會消耗任何 AI token。改變心意了嗎?點擊確認儲存訊息中的 復原 即可。
-
針對特定部分請 AI 調整
如果要做的不只是修改文字,可以直接請 AI 針對你點選的部分進行修改。點擊圖片或某個區塊,下方的輸入框就會顯示你選取的項目,例如 圖片。接著輸入想修改的內容並按下 Enter:
替這張圖片加上圓角與柔和陰影。
AI 只會修改該部分。它在聊天室中的回覆會說明修改了哪些內容,並提供按鈕讓你復原或繼續調整。
-
修復編輯器標記的區塊
Canvas 會檢查每個頁面上的每個區塊。如果 WordPress 編輯器判定某個區塊包含無效內容,頁面名稱旁就會出現紅色的 N 個區塊要修正 標籤。
點擊該標籤,Canvas 就會帶你前往該區塊並以紅框標示。點擊 請 AI 修好它,AI 便會在不改變外觀的情況下修復該區塊,接著標籤就會消失。
-
聊天與 Canvas 搭配使用
在開啟 Canvas 的同時,你仍然可以繼續使用左側的聊天室。在影片中,我輸入了:
在「聯絡我們」頁面的簡介下方加上一行短字:提供英文菜單。
AI 一完成,這行新文字就會立即出現在 Canvas 中。
-
在 Canvas 中復原
在 Canvas 右上角,復原 可以撤回最近一次的修改。若想回到更早的狀態,可以使用 紀錄 中的還原點。
-
實用技巧
- 打錯字與修改文字:直接點擊文字並輸入。變更立即生效,而且不會消耗任何 AI token。
- 外觀與版面配置:先點擊圖片或區塊,再告訴 AI 要修改什麼。它能精準辨識你指的是哪一部分。
- 大型網站:善用 跳到… 與 縮放至全部,省去手動捲動的麻煩。
- 看到紅色標籤?點擊 個區塊要修正,接著點擊 請 AI 修好它。
-
下一步
若想進行大幅修改,請參閱用聊天修改網站。每一次 AI 修改都能復原:請參閱用還原點復原任何 AI 修改。當網站外觀滿意後,即可用 ShipPress 免費網址發佈網站。