指出你想修改的地方
要求修改時最困難的部分,就是說明修改的位置:「標題下面第二行」、「左邊那個方框」。ShipPress 在預覽上方提供三個工具,讓你直接用指的就好。Select tool 可以選取單一元素,Draw tool 可以圈出整個區域,而當你想自己動手修改時,Edit by hand 會在 WordPress 的區塊編輯器中開啟頁面。在這篇教學中,我會在 Pier 7 Coffee 的首頁上示範這些工具。
-
找到預覽上方的工具
在 ShipPress 中開啟你的網站,看看預覽上方的那一排按鈕。由左到右依序是 Refresh、Select tool、Draw tool、Edit by hand 和 Colors and fonts。左邊的頁面選單可以選擇你要查看網站的哪一個頁面。
預覽工具位於預覽的上方。 -
點一下 Select tool 並移動滑鼠
點一下 Select tool,它會變成黃色,表示已經啟用。接著把滑鼠指標移到預覽上:ShipPress 會在指標下方的元素外圍畫出藍色外框,並標示它的名稱,例如 paragraph。這時還沒有選取任何東西。你隨時都可以按 Esc 來關閉這個工具。
藍色外框會顯示點一下會選到什麼。 -
點選元素
點一下你想修改的那個元素,它會以附有文字的小標籤形式加入聊天框,同時附上它的圖片。AI 會收到這個確切的元素,所以你不需要再解釋它在哪裡。如果想取消,點一下標籤上的 × 就可以了。
選取的元素會附加在你的訊息中。
標籤與圖片會隨著你的訊息一起送出。 -
說明要改什麼並送出
就像對站在你旁邊的人說話一樣,輸入你想要的修改,然後按 Enter。只要說「這一行」就夠了,因為 AI 已經知道是哪一行。它只會修改那一行,而且送出後,Select tool 會自動關閉。AI 也會提供簡短的後續按鈕,例如 Undo this change。
AI 只會修改你選取的部分。
上方是修改前,下方是修改後。 -
用 Draw tool 圈出區域
有些修改是針對整個區塊,而不是單一元素。點一下 Draw tool,在預覽上按住滑鼠按鈕,繞著該區域畫一個圈。紅色圓圈會留在畫面上,聊天框也會收到你圈選範圍的圖片,圈內的元素也會一併附上。
圈出你想修改的部分。 -
送出後檢查結果
寫下你的需求並按 Enter。我要求把圈起來的方塊改成深綠色純色背景、搭配奶油色文字,並且文字排成一到兩行。AI 會在聊天中回覆,預覽也會隨之更新。你畫過的圖片會顯示在你的訊息中,所以你隨時都能看到自己指的是什麼。
你畫的圖會顯示在訊息中。
上方是修改前,下方是修改後。 -
想自己動手時,用 Edit by hand
點一下 Edit by hand,就會在 ShipPress 裡面直接開啟目前頁面的 WordPress 區塊編輯器。點選任何文字進行修改,然後按 Save,就和一般的 WordPress 網站一樣。第一次使用時,WordPress 會顯示簡短的歡迎導覽,點 × 關閉後就能看到你的頁面。之後點一下 Refresh,就能在預覽中看到結果。
Edit by hand 會在區塊編輯器中開啟頁面。 -
復原或回到先前的版本
如果你不喜歡 AI 做的修改,點一下回覆下方的 Undo this change。ShipPress 也會在 AI 每次處理完之後儲存一個還原點,所以你可以從右上角的 History 回到任何一個先前的版本。
-
該用哪一個
- Select tool:單一標題、一行文字、按鈕或圖片。
- Draw tool:一個區塊、區段之間的間距,或任何不只一個元素的內容。
- Edit by hand:當你只想自己重打一句話,或自己移動區塊時。
- Colors and fonts:整個網站的顏色、字體和間距。
- 按 Esc 可以關閉工具,而不選取任何東西。