LogoLogo
資源社群課程服務About
  • Welcome!
  • Webflow 101
    • 1 HTML 和 CSS 簡介
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - HTML
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - CSS
      • 掌握 Webflow 的關鍵概念: 網站如何構成 - Javascript
    • 2 Box 盒子模組介紹
    • 3 Designer 介面總覽
      • Webflow 中的樣式設定
      • States 狀態
      • Display settings 顯示設置
      • Position 位置
      • Size 尺寸
      • Background 背景
      • Effects 效果
      • Transitions 過渡
    • 4 元素的類型
      • 布局類型 Section
      • 布局類型 Div Block
      • 布局類型 Grid
      • 基本類型 Link Block
      • 基本類型 List
      • 基本類型 Button
      • 文字類型
      • 媒體類型 Image
      • 媒體類型 Video
      • 表單 Form
      • 組件類型
      • 網站搜索
      • lottie Animation
    • 5 元素的層級
    • 6 CMS
      • Webflow CMS介绍
      • CMS集合
      • 導入集合項目
      • 集合列表
      • 集合頁面
      • 過濾收集列表
      • 有條件的可見性
      • CMS編輯器介紹
    • 7 動畫
      • 嵌入After Effects和Lottie動畫
      • 網頁加載動畫
      • 3D介绍
      • 創建懸停(鼠標移動)時旋轉的動畫
      • 在滾動中顯示和隱藏導航欄
      • 在滾動中顯示元素
      • 建立滾動的進度指示器
      • 懸停時顯示元素
      • 點擊時顯示和隱藏元素
    • 8 項目設定
      • 在Made in Webflow上展示您的網站
      • 複製、轉移或刪除網站
      • 發布Webflow項目
      • 發布您的Webflow網站
      • 保存和恢復備份
      • 分享您的項目並邀請合作者
      • 分享您的網站並邀請合作者
      • 網頁圖標和觸摸圖標
      • Webflow品牌建設
      • 編輯品牌
      • 自定義代碼嵌入
      • 上傳自定義字體
      • 用密碼保護網站或網頁
    • 9 托管和代碼輸出
      • 網域 = 代表你的品牌
      • Webflow 網站計劃
      • 管理網站計劃
      • 透過客戶計費將托管費轉給客戶
      • 連接自定義域名
      • 設置一個默認的域名
      • 透過Webflow購買自定義域名
      • SSL托管
      • 排除網站性能問題的故障
    • 10 SEO
      • 付費搜索與自然搜索簡介
      • Google網站驗證
      • 設置Google Analytics
      • 設置301重定向以保持SEO排名
    • 11. DevLink
      • DevLink 使用指南
    • 模板
      • Webflow模板概述
      • 兌換購買的ThemeForest模板
      • 兌換購買的創意市場模板
    • 帳戶和計劃
      • 管理您的Webflow帳戶
      • 團隊帳戶
      • 帳戶計費
      • 團隊計費概述
      • 項目計費
    • 工作空間計畫
      • 工作區角色和權限
      • 將您的帳戶過渡到工作空間
      • 管理您的工作空間
    • 更新
      • 2024
        • Webflow 表單功能增強 (10-15-2024)
        • 擴充功能: .well-known 檔案支援 (12-16-2024)
        • CMS 草稿和發布工作流程的改進 (12-12-2024)
        • 優化企業數據集成 (12-12-2024)
        • 儀表板排序增強功能 (12-12-2024)
        • 定價和產品更新 (12-11-2024)
        • 棄用邏輯和用戶帳戶 (12-11-2024)
        • 在 CMS 上下文中建立 Component (12-09-2024)
        • 使用Webflow的AI助理快速產生或修改任何文字內容 (12-04-2024)
        • 文字裝飾風格 (11-26-2024)
        • 設計審核增強功能 (11-21-2024)
        • 新變數類型:數字和百分比 (11-20-2024)
        • Component style variants 現已可用 (11-19-2024)
        • 新的產品內導航 (11-18-2024)
        • 斜線指令 (11-18-2024)
        • 直接在畫布上顯示和編輯空的 CMS 綁定元素 (11-12-2024)
        • 通過支持組件插槽使頁面構建更加靈活 (11-12-2024)
        • Webflow Analyze 現已推出 (10-31-2024)
        • Webflow Analyze 現正推出 (10-28-2024)
        • Dashboard 列表視圖 (10-24-2024)
        • 增強功能以改善您的表單體驗 (10-15-2024)
        • CMS API 現在支援批量操作 (10-15-2024)
        • 為所有客戶解鎖本地化樣式,還有更多 (10-15-2024)
        • 介紹 Webflow Analyze (10-15-2024)
        • 使用 Webflow Optimize 最大化轉換 (10-15-2024)
        • 為設計審批帶來更多可見性和微調 (10-15-2024)
        • 拖放式頁面建立使行銷人員能夠更快地啟動行銷活動 (10-15-2024)
        • 使用 Webflow AI Assistant 加快建置速度 (10-15-2024)
        • 推出新的幫助中心以增強支持 (10-15-2024)
        • 簡化 Figma 到 Webflow 同步 (10-03-2024)
        • Webflow 支援 Rive
        • 調整外觀設定
        • 透過機器翻譯支援使編輯模式更加強大
        • 陰影和變數支援的 X 和 Y 偏移
        • 將組件屬性進行分組
        • 自訂暫存域支持
        • 新頁面作為分支並編輯分支中的元件
        • 透過 API 存取您的站點登入紀錄
        • 自訂 CSS 屬性和值
        • Figma 到 Webflow 應用程式
        • 新樣式面板佈局部分和控件
        • 在您的網站上顯示程式碼,無需編寫程式碼和更新有序列表
        • 改進的 API 令牌管理
        • 無需編寫程式碼即可將自訂圖像新增至區域設定切換器
        • 本地化頁面分支
        • 控制您的隊友、訪客和客戶可以訪問哪些站點
        • 使用持久 CMS ID 等自信地恢復網站備份
        • 從“應用程式”面板尋找並安裝 Webflow 應用程式
        • 查看合併摘要以安全地合併頁面分支
        • 將類別作為自訂屬性新增至元素
        • 可用於企業在地化的機器翻譯術語表
        • Lightbox的單一多圖像字段綁定
        • 支援 Figma 中的 Rem 和 Em 單位到 Webflow 同步
        • Webflow 中的 Apple 知名文件
        • 固定標尺和十字準線
        • 額外的尺寸和佈局控制
        • CMS 資源的 WebP 轉換工具
        • 增加了自訂程式碼字元限制
        • 擴充元素轉換
        • 為 Webflow 上的開發人員擴充了 CMS API 功能
        • !Webflow 自訂屬性中的重要標誌
        • 使用頁面模板更快建立品牌一致的頁面,並更新頁面建立模式
        • Webflow Enterprise 上的自動化 JIT 配置和 SCIM 取消配置
        • 用於帳戶復原的輔助電子郵件
        • CMS CSV 匯入/匯出現在支援 HTML 程式碼嵌入
        • 畫布上的 CMS 編輯功能現已推出
        • 學習助手
        • 快速複製組件
        • 使用情況儀表板
        • 站點訪問預設設定
        • 透過 CSV 支援簡化您的 301 重定向管理
        • Webflow 應用程式的最新更新
      • 2023
        • 引入程式碼區塊元素
        • 單一 CMS 專案的批次欄位翻譯
        • Rich Text 中的 Markdown 支持
        • 重新排序您的元件屬性
        • 防止與指標事件發生不必要的點擊和觸控交互
        • 引入自訂元素
        • 在地化現已向所有客戶推出
        • 透過分支暫存更快、更安全地在分支上測試設計
        • Webflow 服務條款的更新
        • Rich Text 編輯器的改善
        • Webflow 多語系在地化功能現可供企業使用
        • 將 Spline 3D 場景新增至您的站點
        • 控制設計元素的縱橫比
        • 為 Webflow 引入新的外觀和感覺
        • 用變數編寫您的設計系統
        • 透過對各個頁面進行 noindex 控制來提高您的 SEO
        • 導航器面板現在支援右鍵單擊
        • 透過組件可用性讓你更快的建構專案
        • Webflow API: 元件、變數和多語系
        • Webflow 留言系統
        • 透過新的切換簡化了發布權限
        • 內容編輯者的站點登入紀錄
        • 使用新的 Quick Stack 功能加快構建頁面的速度
        • 解鎖對頁面分支上的自訂動畫的支持
        • 透過增加頁面來解鎖更大的規模
        • 靜態頁面的限制從 100 頁提升至 150 頁
        • 透過改進的發布工作流程保護您的網站
        • 更好地了解 Webflow 發佈時的進度
        • 在 robots.txt 文件中自定義 sitemap.xml 地址
        • 展示客戶工作區的項目
        • 元件現在可以在集合清單中使用
        • 大型站點的編輯器性能改進
        • Library 測試版的更新
        • Webflow 的 Google Analytics 整合更新
        • 為頁面分支帶來更多控制和可見性
        • 設置默認工作區以將儀表板打開到正確的位置
        • 可變字體更新
        • 選擇您的 Workspace 配置文件 URL
        • 在自定義屬性中使用 CMS 數據
        • 更新我們的開發者平台
        • dotLottie 動畫文件支持
        • 使用過濾器在站點活動日誌中更快地找到您要查找的內容
        • 在 div 或鏈接塊中包裝元素的快捷方式
        • 支持新的 CSS 動態視口單元
        • 不受銷售限制地擴展您的業務
        • webflow.io 網站上分析 cookie 行為的變化
        • 引入文本筆劃樣式
        • 組件的可用性更新
        • SSO 功能更新 (Webflow 企業版用戶)
        • 在文件夾中嵌套集合頁面以進行更多 URL 控制
        • 引入用於移動元素的新鍵盤快捷鍵
        • 用於展開元素和包裹 H Flex 或 V Flex 元素的新快捷方式
        • DevLink 公開測試版
        • Figma 外掛程式改進了響應式設計支援
        • Designer 中大型網站的性能改進
        • 複製或刪除最後一個類別的捷徑
        • 存檔工作區以將其從儀表板中刪除
        • 現在可以在設計器中使用 Webflow 應用程式的強大功能
        • Webflow 中管理自訂網域的改進
        • 透過新的內容編輯和評論者角色不斷發展團隊合作
        • 將站點計劃從一個站點傳輸到另一個站點
        • 現在支援文字換行和斷字
        • 改進了 Figma 插件的複製貼上的功能
        • 在樣式面板中快速搜索色板
        • 透過設計器中的評論集中回饋
        • Private Staging (私人測試站)
        • Figma 到 Webflow 插件的 Combo Class 支援
        • 在資料夾中歸類 CMS 頁面,以實現更多的URL控制
      • 2022
        • 更新了託管配置以支持更安全的 TLS 1.3
        • Webflow 定價和計劃的更新
        • 新創作者頁面
        • Webflow Marketplace
        • 開發者資源
        • 會員資格測試版
        • “Symbols”進化為“Components”
        • 增加電子商務網站的商品規模
        • 頁面分支
        • 以訪客身份免費加入客戶的工作區
        • 更新了 Hosting 選項以支持更安全的 SSL TLS 1.3 協定
        • 一次發布和取消發布多個 CMS 項目
        • Webflow 新功能 Logic (Beta)
        • Webflow 會員功能 (Beta)
        • 直接預覽不同文字大小的佈局
        • 檢測網站元素中的重複 ID
        • 刪除 CMS 內容而不發布您的整個網站
        • Made in Webflow 展示區
        • 在 Designer 中準確查看您的隊友正在處理的頁面
        • 簡化團隊合作:工作區就在這裡
  • MasterClass (大師班)
    • Intro
    • Webflow Pricing
    • Webflow 服務條款
  • 資源
    • 官方 Youtube 課程
    • Webflow 學習資源
    • Webflow 官方資源
Powered by GitBook
On this page
  • 訪問編輯器
  • 透過Webflow的界面訪問編輯器
  • 從實時網站訪問編輯器
  • 編輯器要求:支持的瀏覽器
  • 在編輯器模式和實時網站模式之間切換
  • 編輯器登錄錯誤的故障排除
  • 多用戶協作
  • 剖析編輯器的工具條
  • 頁面上的編輯
  • 編輯和格式化文本
  • 替換圖片
  • 編輯按鈕
  • 管理頁面設置
  • 創建和管理動態內容
  • 創建和編輯內容
  • 管理內容
  • 查看和發布更改
  • 查看實時網站上的修改
  • 發布
  • 訪問表單提交
  • 元素的編輯設置
  • 訪客編輯的權限

Was this helpful?

Edit on GitHub
Export as PDF
  1. Webflow 101
  2. 6 CMS

CMS編輯器介紹

編輯器讓您在一個簡單的界面中更新和添加內容,這對不需要設計器的複雜性的客戶或團隊成員來說是非常好的。

Previous有條件的可見性Next7 動畫

Last updated 2 years ago

Was this helpful?

在設計器中您可以建立和設計您的網站,而編輯器只允許您和工作區成員編輯和管理內容。憑借其簡化的界面,編輯器為您提供了多種工具來管理一個已發布的網站。

透過訪客編輯權限,您可以邀請您的客戶在不破壞設計的情況下管理他們自己的網站。

本文會提到:

  1. 訪問編輯器

  2. 剖析編輯器的工具條

  3. 頁面上的編輯

  4. 管理頁面設置

  5. 創建和管理動態內容

  6. 查看和發布更改

  7. 訪問表單提交

  8. 元素的編輯設置

訪問編輯器

您可以在發布您的網站(無論是到webflow.io暫存子域還是到自定義域)後訪問Webflow編輯器。它允許您直接在頁面上編輯網站的內容,或透過編輯器面板管理頁面和內容。

透過Webflow的界面訪問編輯器

如果您在Webflow儀表板中或在設計器中設計網站,您可以通過以下方式訪問編輯器。

• 從儀表板的網站選單中

• 從網站設置中的頂部工具條

• 從設計器中的選單

從實時網站訪問編輯器

訪客編輯可以透過在瀏覽器地址欄中的網站URL末尾添加/?edit來訪問他們網站的編輯器(例如,yourwebsite.com/?edit)。登錄之後,訪客可以在編輯器模式下訪問他們的網站。

當他們以後回到網站時,他們可能會看到右下角的"編輯網站"按鈕,他們可以點擊它來跳到編輯模式。

讓您的訪客編輯知道,他們需要將他們的瀏覽器設置為接受來自所有第三方的cookies來使用編輯器--否則,他們在試圖登錄編輯器時可能會看到一個錯誤訊息。

編輯器要求:支持的瀏覽器

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 • 退出編輯器,清除您的瀏覽器的緩存,然後重新登錄 • 通過隱身模式的窗口登錄編輯器 • 嘗試透過一個不同的瀏覽器登錄 • 嘗試向您的內容編輯發送一個新的客人編輯邀請,並要求他們使用隱身窗口來創建他們的新帳戶 • 嘗試刪除或禁用自定義代碼 • 如果這些都不起作用,請聯繫技術支持

注意 如果您的網站上有自定義代碼,自定義代碼可能會影響編輯器。發生這種情況是因為編輯器在發布的網站上進行渲染,嘗試刪除或禁用您的自定義代碼。

多用戶協作

編輯器允許多個團隊成員和訪客編輯在同一時間編輯靜態和動態網站內容。如果兩個人同時編輯相同的內容,最後編輯的人"獲勝",所以您仍然要與您的隊友和訪客編輯協調編輯時間。編輯器還提供一個網站活動日誌,這樣您就可以在發布網站之前看到誰編輯了您的網站,以及他們做了哪些編輯。

與編輯器類似,如果您想編輯您的網站的設計,可以在設計器中與團隊成員協作。

剖析編輯器的工具條

當您訪問編輯器時,您會看到實時網站,編輯器工具欄(灰色條)折疊在屏幕的底部。透過這個工具欄,您可以訪問各種編輯器面板來管理頁面設置、動態內容、表單和您的編輯器帳戶。您還可以看到並發布您通過編輯器所做的修改。

編輯器工具欄上有以下標籤和圖標:

• 選單--使用此選單可進入儀表板、網站設置或設計器。這個按鈕有Webflow的標誌。

• 頁面--打開頁面面板,其中列出了網站的靜態頁面和動態集合頁面。在這裡您可以瀏覽一個頁面,點擊查看實時頁面並管理任何頁面的設置。

• 收藏--打開收藏面板,它列出了您所有的集合。點擊一個集合,在工具欄上打開一個新的標籤,打開集合項目的面板,列出該集合中的所有項目。在這裡您可以編輯任何項目或創建新項目。這與設計器中的CMS面板非常相似。

• 表格--打開表格面板,您可以看到和下載網站上提交的表格。

• 帳戶設置(圖標)--打開帳戶設置面板,您可以編輯您的訪客編輯帳戶訊息和上傳個人資料圖片。

• 幫助和支持(圖標)--打開幫助和支持面板,在這裡您可以找到關於使用編輯器的一些常見問題的答案。

• 註銷(圖標)--在確認後將您從編輯器中註銷。

• 回到真實網站(按鈕)--從編輯器模式切換到真實網站模式,這樣您就可以像您的網站訪問者看到的那樣查看您的網站。

• 節省/保存--所有的改變都會自動保存在編輯器中。當您在編輯器中對您的網站進行修改時,您會看到 "保存..."或 "已保存"狀態。

• 更新日誌--這顯示了左下方發布按鈕旁邊的未發布變化的數量。點擊變更日誌可以看到有未發布變更的項目和頁面的列表,您可以看到是哪個訪客編輯或工作區成員做了這些變更。

• 發布(按鈕)--允許您在編輯器中發布您所做的所有修改。

頁面上的編輯

您可以用編輯器在頁面上進行編輯。當您把鼠標懸停在各種元素上時,在可編輯元素的右上方會出現一個"鉛筆"圖標或"圖片"圖標。要編輯任何這些元素,只需點擊該圖標。

注意 一些造型和自定義代碼不會以它們應該出現在發布的網站上的方式顯示。這是您在編輯器中的正常行為。

編輯和格式化文本

當懸停在可編輯的文本元素上時,您會看到文本元素周圍有一個淺灰色的輪廓,右上方有一個"鉛筆"圖標。您可以透過點擊進入該方框來編輯文本。

您也可以通過選擇單詞或短語,並從出現的浮動工具欄中選擇格式化。

對於副文本元素,您可以做更多的事情:添加媒體,創建列表,樣式,以及進一步格式化您的文本。

替換圖片

您也可以在網站上直接替換圖片。只要將您的光標懸停在想替換的圖片上,然後點擊"圖片"圖標。這將允許您從電腦中選擇並上傳一個新的圖片。

注意 您在設計器中為一個元素創建的任何視覺樣式,如純色覆蓋、邊框顏色或陰影,將自動適用於您通過編輯器替換的任何圖像或背景圖片。

編輯按鈕

要編輯一個按鈕元素,將鼠標懸停在按鈕上,點擊右上方出現的設置"齒輪"圖標。

您會看到兩個選項:

• 編輯連結設置

• 編輯文本

管理頁面設置

在編輯器的頁面面板中,您可以管理重要的頁面設置,如SEO元標題和描述,Open Graph標題和描述,以及Open Graph圖片。您還可以管理靜態頁面的頁面密碼保護設置和收集頁面的RSS訂閱設置。

要訪問一個頁面的設定:

  1. 打開編輯器面板中的"頁面"選項卡

  2. 將您的鼠標懸停在列表中的一個頁面上

  3. 點擊出現的"設置"按鈕

您也可以使用搜索欄按名稱搜索頁面。

注意 點擊頁面而非設置按鈕,將關閉頁面面板並打開相應的頁面。

創建和管理動態內容

如果您的網站有收藏,您可以在編輯器中透過收藏標籤訪問它們。集合面板列出了您所有的集合。點擊一個集合,會打開一個新的標籤,標題是該集合的名稱。這個選項卡包含了該集合中的所有集合項目。

創建和編輯內容

您可以透過點擊現有項目來編輯它們,或者點擊"新建"按鈕來創建新項目,並填寫項目的各個字段。

完成輸入內容或更新字段時,您可以選擇:

• 創建一個新項目或保存一個現有項目。它將被分期發布,在您下次發布時在您的網站上上線 • 立即發布您的項目(無需等待下一次全站發布) • 如果您還沒有準備好在網站上發布該項目,可以保存為草稿 • 取消以放棄修改

您可以點擊項目名稱右側的"頁面"圖標來查看該項目收藏的頁面。這將折疊面板,讓您在瀏覽器中看到您目前正在查看的項目的頁面。

要回到收藏項目的列表,請點擊"返回"按鈕。

管理內容

在"集合面板"中,您可以看到您所有的收集項目和它們的狀態。您可以同時刪除、草稿或存檔幾個項目:

  1. 點擊"選擇"按鈕

  2. 選擇您要管理的項目

  3. 從頂部的工具欄中選擇您想要的操作(刪除、草稿或存檔)

要關閉收藏標籤,請點擊標籤右上方的"關閉"(X)按鈕。

查看和發布更改

在做完所有這些修改後,您會想查看它們,並確保它們被保存並準備好在點擊發布前發布。

查看實時網站上的修改

在編輯器中工作時,編輯器面板覆蓋了您的網站的大部分內容。要折疊編輯器面板並查看您的網站,點擊頂部的查看網站按鈕。

在這個視窗中,您可以像平時一樣瀏覽您的網站,並對任何頁面進行修改或查看。

發布

在編輯器中所做的修改不會在實時網站上進行,直到您單獨發布所編輯的項目或按下"發布"按鈕來發布所有的階段性修改。

重要提示 當您從編輯器發布時,您的網站將同時發布到webflow.io的暫存域和自定義域。為了避免這種情況,請從設計器或網站設置中發布。

訪問表單提交

如果您的網站上有任何表格,編輯器將包括一個表格標籤。在這裡,您可以查看人們提交的表格的一些基本訊息,但它最有用的地方是您可以下載完整的表格數據。在下載的CSV文件中(這種格式適用於所有主要的電子表格應用程序),您將能夠看到所有提交的訊息。

元素的編輯設置

默認情況下,您、工作區成員和訪客編輯可以使用編輯器來編輯實時網站上的所有內容,但您也可以讓訪客編輯無法編輯的元素:

  1. 在設計器中打開網站

  2. 選擇您想使之不可編輯的元素

  3. 轉到元素設置(D)。

  4. 取消勾選"合作者可以編輯此元素"

您也可以使用Command + Shift + L (在Mac上)或Control + Shift + L (在Windows上)在一個選定的元素上切換客人編輯。

重要提示 CMS元素總是可以在編輯器中進行編輯。

訪客編輯的權限

如果您的Workspace網站有一個CMS、Business或Ecommerce網站計劃,您可以邀請訪客編輯在您的網站上進行合作。除了在編輯器中打開網站、編輯內容和暫存更改之外,訪客編輯還可以添加CMS內容和編輯頁面設置。

訪客編輯也有與工作區成員不同的發布權限。