# CMS編輯器介紹 在設計器中您可以建立和設計您的網站，而編輯器只允許您和工作區成員編輯和管理內容。憑借其簡化的界面，編輯器為您提供了多種工具來管理一個已發布的網站。 透過訪客編輯權限，您可以邀請您的客戶在不破壞設計的情況下管理他們自己的網站。 本文會提到： 1. 訪問編輯器 2. 剖析編輯器的工具條 3. 頁面上的編輯 4. 管理頁面設置 5. 創建和管理動態內容 6. 查看和發布更改 7. 訪問表單提交 8. 元素的編輯設置 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FDQO9p2lnclFl0Ni7k5wu%2Fimage.png?alt=media\&token=60ac3e9c-cef6-4a35-b532-3eefcd938884) ## 訪問編輯器 您可以在發布您的網站（無論是到webflow\.io暫存子域還是到自定義域）後訪問Webflow編輯器。它允許您直接在頁面上編輯網站的內容，或透過編輯器面板管理頁面和內容。 ### 透過Webflow的界面訪問編輯器 如果您在Webflow儀表板中或在設計器中設計網站，您可以通過以下方式訪問編輯器。 • 從儀表板的網站選單中 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FBYN9W8UXdvmIMYQ7TwkF%2Fimage.png?alt=media\&token=5e69d706-7c05-4c80-a3ea-90e796c49cd4) • 從網站設置中的頂部工具條 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F8xMNbqh3I1RiXJvVsIyO%2Fimage.png?alt=media\&token=95b6ee39-3057-4180-92cd-50ac03c5f157) • 從設計器中的選單 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FoNF5J2fMtDbgK8soXCxy%2Fimage.png?alt=media\&token=d79484fc-399d-4be8-a062-27facbe3f674) ### 從實時網站訪問編輯器 訪客編輯可以透過在瀏覽器地址欄中的網站URL末尾添加/?edit來訪問他們網站的編輯器（例如，yourwebsite.com/?edit）。登錄之後，訪客可以在編輯器模式下訪問他們的網站。 當他們以後回到網站時，他們可能會看到右下角的"編輯網站"按鈕，他們可以點擊它來跳到編輯模式。 讓您的訪客編輯知道，他們需要將他們的瀏覽器設置為接受來自所有第三方的cookies來使用編輯器--否則，他們在試圖登錄編輯器時可能會看到一個錯誤訊息。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FjzwEmxyuVVxtGRQP6bV4%2Fimage.png?alt=media\&token=0b0034ca-849d-45c2-8bc2-a8485fe47cf1) ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FE6xS6aXx8AiEWl3OYvTL%2Fimage.png?alt=media\&token=557ce737-31be-48f8-996c-e34e7a1e217a) ### 編輯器要求：支持的瀏覽器 Webflow官方支持編輯器在最新版本的Chrome或Safari的常青版本上使用，另外還有2個版本用於不同的更新周期。Webflow還非官方地支持使用所有現代瀏覽器。 • CSS變換3D--由交互式使用\ • CSS過渡--被交互使用\ • CSS flexbox--被樣式布局面板所使用\ • CSS過濾器--由交互使用\ • CSS網格--將被樣式布局面板所使用 2022年6月15日，微軟正式終止了對Internet Explorer 11（IE11）的支持。雖然在Webflow中發布的網站使用了現代網絡瀏覽器支持的行業標準功能，但IE11不支持的一些功能在該瀏覽器上可能會出現錯誤的功能。 Webflow在任何情況下都不支持IE9或IE10。 **注意**\ 常青的瀏覽器是指能自動更新的瀏覽器，意思是大多數人擁有最新的、自動更新的版本。\ 如果您在實驗性瀏覽器上使用Webflow時遇到問題，請在Webflow論壇的實驗性瀏覽器類別下報告您的問題。 **注意**\ 您可以透過"我的瀏覽器是什麽"來確定您所使用的瀏覽器和操作系統版本。 ### 在編輯器模式和實時網站模式之間切換 當您打開編輯器時，您可以在預覽模式或"實時網站"模式下探索網站。要切換到編輯模式，點擊頁面右下方的"編輯網站"按鈕。 當您想在預覽模式下看到網站時，去"回到實時網站"。 ### 編輯器登錄錯誤的故障排除 如果您、您的工作區成員，或者您的訪客編輯在嘗試登錄編輯器時看到錯誤信息，請嘗試以下修復方法： • 檢查您的瀏覽器是否接受cookies\ • 退出編輯器，清除您的瀏覽器的緩存，然後重新登錄\ • 通過隱身模式的窗口登錄編輯器\ • 嘗試透過一個不同的瀏覽器登錄\ • 嘗試向您的內容編輯發送一個新的客人編輯邀請，並要求他們使用隱身窗口來創建他們的新帳戶\ • 嘗試刪除或禁用自定義代碼\ • 如果這些都不起作用，請聯繫技術支持 **注意**\ 如果您的網站上有自定義代碼，自定義代碼可能會影響編輯器。發生這種情況是因為編輯器在發布的網站上進行渲染，嘗試刪除或禁用您的自定義代碼。 ### 多用戶協作 編輯器允許多個團隊成員和訪客編輯在同一時間編輯靜態和動態網站內容。如果兩個人同時編輯相同的內容，最後編輯的人"獲勝"，所以您仍然要與您的隊友和訪客編輯協調編輯時間。編輯器還提供一個網站活動日誌，這樣您就可以在發布網站之前看到誰編輯了您的網站，以及他們做了哪些編輯。 與編輯器類似，如果您想編輯您的網站的設計，可以在設計器中與團隊成員協作。 ## 剖析編輯器的工具條 當您訪問編輯器時，您會看到實時網站，編輯器工具欄（灰色條）折疊在屏幕的底部。透過這個工具欄，您可以訪問各種編輯器面板來管理頁面設置、動態內容、表單和您的編輯器帳戶。您還可以看到並發布您通過編輯器所做的修改。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FeB8vBTcd8twUPRZDeDXS%2Fimage.png?alt=media\&token=c3332d8a-ae7a-4c48-b7f8-95f28600ae32) 編輯器工具欄上有以下標籤和圖標： • 選單--使用此選單可進入儀表板、網站設置或設計器。這個按鈕有Webflow的標誌。 • 頁面--打開頁面面板，其中列出了網站的靜態頁面和動態集合頁面。在這裡您可以瀏覽一個頁面，點擊查看實時頁面並管理任何頁面的設置。 • 收藏--打開收藏面板，它列出了您所有的集合。點擊一個集合，在工具欄上打開一個新的標籤，打開集合項目的面板，列出該集合中的所有項目。在這裡您可以編輯任何項目或創建新項目。這與設計器中的CMS面板非常相似。 • 表格--打開表格面板，您可以看到和下載網站上提交的表格。 • 帳戶設置（圖標）--打開帳戶設置面板，您可以編輯您的訪客編輯帳戶訊息和上傳個人資料圖片。 • 幫助和支持（圖標）--打開幫助和支持面板，在這裡您可以找到關於使用編輯器的一些常見問題的答案。 • 註銷（圖標）--在確認後將您從編輯器中註銷。 • 回到真實網站（按鈕）--從編輯器模式切換到真實網站模式，這樣您就可以像您的網站訪問者看到的那樣查看您的網站。 • 節省/保存--所有的改變都會自動保存在編輯器中。當您在編輯器中對您的網站進行修改時，您會看到 "保存..."或 "已保存"狀態。 • 更新日誌--這顯示了左下方發布按鈕旁邊的未發布變化的數量。點擊變更日誌可以看到有未發布變更的項目和頁面的列表，您可以看到是哪個訪客編輯或工作區成員做了這些變更。 • 發布（按鈕）--允許您在編輯器中發布您所做的所有修改。 ## 頁面上的編輯 您可以用編輯器在頁面上進行編輯。當您把鼠標懸停在各種元素上時，在可編輯元素的右上方會出現一個"鉛筆"圖標或"圖片"圖標。要編輯任何這些元素，只需點擊該圖標。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FtvtF69th7U8958gdCXQU%2Fimage.png?alt=media\&token=129cea35-7a60-4b4e-a42c-c1a5f497aae2) ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FGLFZctd783ezcC9rHzvc%2Fimage.png?alt=media\&token=dff325e8-d3e9-404f-9f7b-e050b0d17c8f) **注意**\ 一些造型和自定義代碼不會以它們應該出現在發布的網站上的方式顯示。這是您在編輯器中的正常行為。 ### 編輯和格式化文本 當懸停在可編輯的文本元素上時，您會看到文本元素周圍有一個淺灰色的輪廓，右上方有一個"鉛筆"圖標。您可以透過點擊進入該方框來編輯文本。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FcoUXebYW6vMUC3uXOHcZ%2Fimage.png?alt=media\&token=a014bf04-a714-48eb-b637-e43022c38523) 您也可以通過選擇單詞或短語，並從出現的浮動工具欄中選擇格式化。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fzp8bTiadQLY8QnlGBTFJ%2Fimage.png?alt=media\&token=a7609eb8-faad-49e0-b978-c3a765a8bf73) 對於副文本元素，您可以做更多的事情：添加媒體，創建列表，樣式，以及進一步格式化您的文本。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fj5lVk7lu8jTG9NJrAuZl%2Fimage.png?alt=media\&token=7a571ea0-458f-4ec6-b9f1-399da7cf2622) ### 替換圖片 您也可以在網站上直接替換圖片。只要將您的光標懸停在想替換的圖片上，然後點擊"圖片"圖標。這將允許您從電腦中選擇並上傳一個新的圖片。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FLQmGIuWvIYzNsmY26MwL%2Fimage.png?alt=media\&token=48f572b9-ed39-4aac-b89e-e752f841476a) **注意**\ 您在設計器中為一個元素創建的任何視覺樣式，如純色覆蓋、邊框顏色或陰影，將自動適用於您通過編輯器替換的任何圖像或背景圖片。 ### 編輯按鈕 要編輯一個按鈕元素，將鼠標懸停在按鈕上，點擊右上方出現的設置"齒輪"圖標。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FcYGIGJVoNNS5wAA6b59B%2Fimage.png?alt=media\&token=f72cea84-15c3-428d-beea-836df2d4e738) 您會看到兩個選項： • 編輯連結設置 • 編輯文本 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FQCWH5yblaSmlkdp5DGvG%2Fimage.png?alt=media\&token=c01d321b-c995-40c9-8838-926bb3bb6206) ## 管理頁面設置 在編輯器的頁面面板中，您可以管理重要的頁面設置，如SEO元標題和描述，Open Graph標題和描述，以及Open Graph圖片。您還可以管理靜態頁面的頁面密碼保護設置和收集頁面的RSS訂閱設置。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FqY5oVDuASZn7XFFX3DJw%2Fimage.png?alt=media\&token=9d28d735-b0f1-4b92-b599-cf06ef565e7c) 要訪問一個頁面的設定： 1. 打開編輯器面板中的"頁面"選項卡 2. 將您的鼠標懸停在列表中的一個頁面上 3. 點擊出現的"設置"按鈕 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FmCR9CC2wcbGwIU1nSxBT%2Fimage.png?alt=media\&token=5b4eed02-1eac-42e5-9e5b-6a31b2717dec) 您也可以使用搜索欄按名稱搜索頁面。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FrtJ6ZOHBdTzHwbccfKKD%2Fimage.png?alt=media\&token=e9762fba-2d80-46a5-8395-2263f3872c25) **注意**\ 點擊頁面而非設置按鈕，將關閉頁面面板並打開相應的頁面。 ## 創建和管理動態內容 如果您的網站有收藏，您可以在編輯器中透過收藏標籤訪問它們。集合面板列出了您所有的集合。點擊一個集合，會打開一個新的標籤，標題是該集合的名稱。這個選項卡包含了該集合中的所有集合項目。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FYknYxq6Ltd4BCVBS2Hv1%2Fimage.png?alt=media\&token=deb8b7c4-9093-4e3e-ac94-17b13d4bc824) ### 創建和編輯內容 您可以透過點擊現有項目來編輯它們，或者點擊"新建"按鈕來創建新項目，並填寫項目的各個字段。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FoxbjQOHkjW7lYBPEXCSm%2Fimage.png?alt=media\&token=88b29053-57f1-4080-b9cc-49e23d139b79) 完成輸入內容或更新字段時，您可以選擇： • 創建一個新項目或保存一個現有項目。它將被分期發布，在您下次發布時在您的網站上上線\ • 立即發布您的項目（無需等待下一次全站發布）\ • 如果您還沒有準備好在網站上發布該項目，可以保存為草稿\ • 取消以放棄修改 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F2hLVdZzqRjOXqVATPENM%2Fimage.png?alt=media\&token=d295392e-3f33-4086-8a04-26c9319d6a07) 您可以點擊項目名稱右側的"頁面"圖標來查看該項目收藏的頁面。這將折疊面板，讓您在瀏覽器中看到您目前正在查看的項目的頁面。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FELXR9YMJwnSxxDNF7r2F%2Fimage.png?alt=media\&token=ff26596a-d0a8-4bf2-8cb5-8f1d242b94ae) 要回到收藏項目的列表，請點擊"返回"按鈕。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F1KnwDSG7QWsFJKlyPAYY%2Fimage.png?alt=media\&token=fb55ca0e-75af-48cd-acc1-c6557e6886da) ### 管理內容 在"集合面板"中，您可以看到您所有的收集項目和它們的狀態。您可以同時刪除、草稿或存檔幾個項目： 1. 點擊"選擇"按鈕 2. 選擇您要管理的項目 3. 從頂部的工具欄中選擇您想要的操作（刪除、草稿或存檔） ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2F24j2bgitAB8vSqo6Hs6q%2Fimage.png?alt=media\&token=a713f355-2c26-43c8-93f0-c60129e090a7) 要關閉收藏標籤，請點擊標籤右上方的"關閉"（X）按鈕。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FfZOU6fJkZintQc4jasQm%2Fimage.png?alt=media\&token=6f35c65f-fcf9-4549-b52b-6ea5968545a5) ## 查看和發布更改 在做完所有這些修改後，您會想查看它們，並確保它們被保存並準備好在點擊發布前發布。 ### 查看實時網站上的修改 在編輯器中工作時，編輯器面板覆蓋了您的網站的大部分內容。要折疊編輯器面板並查看您的網站，點擊頂部的查看網站按鈕。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FgeINv3gMgptCScsN84DF%2Fimage.png?alt=media\&token=ca4c9236-7f1b-47b1-a59c-9ae26665bded) 在這個視窗中，您可以像平時一樣瀏覽您的網站，並對任何頁面進行修改或查看。 ### 發布 在編輯器中所做的修改不會在實時網站上進行，直到您單獨發布所編輯的項目或按下"發布"按鈕來發布所有的階段性修改。 ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2FzeHTzNLRyJl9kI8f7QyJ%2Fimage.png?alt=media\&token=ad7a65e9-ec8b-47e6-9db2-12738033d004) **重要提示**\ 當您從編輯器發布時，您的網站將同時發布到webflow\.io的暫存域和自定義域。為了避免這種情況，請從設計器或網站設置中發布。 ## 訪問表單提交 如果您的網站上有任何表格，編輯器將包括一個表格標籤。在這裡，您可以查看人們提交的表格的一些基本訊息，但它最有用的地方是您可以下載完整的表格數據。在下載的CSV文件中（這種格式適用於所有主要的電子表格應用程序），您將能夠看到所有提交的訊息。 ## 元素的編輯設置 默認情況下，您、工作區成員和訪客編輯可以使用編輯器來編輯實時網站上的所有內容，但您也可以讓訪客編輯無法編輯的元素： 1. 在設計器中打開網站 2. 選擇您想使之不可編輯的元素 3. 轉到元素設置（D）。 4. 取消勾選"合作者可以編輯此元素" ![](https://3898762810-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUL7tT1ncFWq0egj5syeq%2Fuploads%2Fhg3bWFKsioXxukshAxKS%2Fimage.png?alt=media\&token=a3ec02e3-1cc9-4b59-8e85-f8195a405074) 您也可以使用Command + Shift + L (在Mac上)或Control + Shift + L (在Windows上)在一個選定的元素上切換客人編輯。 **重要提示**\ CMS元素總是可以在編輯器中進行編輯。 ## 訪客編輯的權限 如果您的Workspace網站有一個CMS、Business或Ecommerce網站計劃，您可以邀請訪客編輯在您的網站上進行合作。除了在編輯器中打開網站、編輯內容和暫存更改之外，訪客編輯還可以添加CMS內容和編輯頁面設置。 訪客編輯也有與工作區成員不同的發布權限。