聯絡我們

你要買什麼？

經過麥伊凡
2024 年 4 月 14 日

Webflow 設計器簡介

了解 Webflow Designer 的方法。

Webflow Designer 使您能夠建立網站框架，概念化網站的外觀和氛圍，並包括內容、互動、動畫和客製化程式碼，以建立完全可操作的網站、登陸頁面、原型、簡報等。

在設計器中，您可以處理 HTML 元素、定義 CSS 樣式並建立交互，而無需編寫任何程式碼。在建立您的網站時，設計器會產生原始的、語意的、針對網路最佳化的程式碼，而網頁瀏覽器將利用這些程式碼來展示您的網站。此外，設計器中的程式碼可以匯出到其他應用程式。

本教程將涵蓋：

  1. 訪問設計器的指南
  2. Designer 結構概述
  3. 多個用戶之間的協作
  4. Designer 成為線上應用程式的原因

接觸設計師

聯繫設計師：

  • 透過訪問 儀表板 然後點擊您的網站縮圖
  • 透過 站點設定 透過選擇 設計師 從頂部工具列
  • 透過 編輯 透過選擇 設計師 點擊後 選單按鈕 在左下角

設計師先決條件：相容的網頁瀏覽器

Webflow 正式支援所有當代瀏覽器最新三個主要版本的設計器，包括 Chrome、Edge、Firefox 和 Safari。

瀏覽器相容性的程度會根據所使用的功能而有所不同（例如，過濾器在 Edge 中具有部分支援）。對於特定瀏覽器中支援受限的功能，可以在各自的文章中找到更多資訊：

Webflow 不提供對 Internet Explorer 的支援。儘管 Webflow 創建的網站繼續支援當代 Web 瀏覽器中支援的所有標準功能，但不能保證與 Internet Explorer 的兼容性。 了解有關放棄 Internet Explorer 支援的更多資訊。

內幕提示： 您可以透過造訪來識別您的瀏覽器和作業系統版本 我的瀏覽器是什麼.

設計師先決條件：相容的顯示分辨率

設計者需要一個帶有滑鼠和鍵盤的設備（例如桌上型電腦或筆記型電腦），螢幕寬度為 至少 1268 像素。此寬度佔左側邊欄、設計器畫布和右側邊欄的總和。

設計器的結構

設計器包括主要 帆布 以及工具列和麵板的集合。繼續閱讀以下內容的摘要：

  • 左側工具列和麵板
  • 畫布
  • 頂部欄
  • 底部導覽麵包屑欄
  • 正確的面板

左側工具列和麵板

左側工具列顯示各種連結和工具，使您可以組織您的網站。位於左側工具列頂部的圖示可以隱藏大部分設計器面板，這些面板在點擊後會展開：

  • 主選單
  • 新增面板
  • 頁面面板
  • 導航面板
  • 元件面板
  • 變數面板
  • 風格選擇器面板
  • 資產面板
  • 內容管理系統面板
  • 邏輯面板
  • 使用者面板
  • 電子商務面板
  • 應用程式面板
  • 站點活動日誌
  • 設定面板
  • 幫助設定
  • 審核小組
  • 快速尋找
  • 影片教學面板

主選單 — Webflow 標誌

透過選擇 Webflow 圖標，會出現一個下拉式選單，允許導航至儀表板、目前查看網站的網站設定或編輯器。此外，主選單還提供：

  • 進入 快速尋找
  • 撤銷您的上一個操作
  • 重做你的最後一個動作
  • 匯出程式碼
  • 查看鍵盤快速鍵
  • 啟用設定 CSS 預覽
  • 獲得協助或提供回饋

新增面板 - 快捷方式：A

這 新增面板 能夠合併來自的元素 元素 選項卡或預先建置佈局 佈局 標籤。

配置面板

這 配置面板 允許您處理各種配置，例如 搜尋設定 和 備份設定， 也 本地化設定。在本節中，您還將發現 使用者介面 選項卡，您可以在其中為 Designer 介面選擇所需的亮度設定。

協助設定

輔助設定為您提供了簡化 Designer 使用的工具。

  • 支持與建議 — 讓您能夠直接在 Designer 中探索 Webflow 幫助指南。從這裡，您還可以訪問 Webflow 大學指南、視訊課程或 Webflow論壇。您也可以提交回饋或支援請求。‍
  • 鍵盤快速鍵 — 顯示鍵盤快速鍵以增強設計器中的設計工作流程。您也可以透過按查看這些快捷方式 轉移 + /.‍
  • CSS 預覽 — 示範為畫布上所選元素所建立的 CSS。此預覽還允許您複製生成的 CSS 以便在您喜歡的任何地方使用。

檢查面板－快捷鍵：U

這 檢查面板 顯示您網站上任何常見的與可訪問性相關的問題，並提供解決這些問題的建議。了解有關檢查面板的更多資訊。

高效率搜尋 - 快捷方式：Command + E（在 Mac 上）或 Control + E（在 Windows 上）

高效率搜尋 是一種搜尋工具，可加快您在 Webflow 中建立網站時的工作流程並提高您的效率。了解更多有關高效搜尋的資訊。

教育視訊面板

這 教育視訊面板 提供了觀看 Webflow 所有免費影片課程的實用方法。

工作區

Designer 中最廣泛的區域稱為 工作空間。您可以在此處與頁面進行即時互動並進行設計。您可以直接在頁面上選擇元素、重新定位它們以及調整內容。了解有關工作區的更多資訊。

上半部

上半部提供了另一組顯示設定以及一些用於儲存、發布甚至匯出網站的有用工具。從選單按鈕旁邊的左側開始，穿過螢幕向右移動，您將看到以下一組工具：

  • 區域設定概述
  • 頁面指示器
  • 自適應斷點
  • 團隊簡介圖片
  • 狀態模式
  • 保存狀態
  • 程式碼導出
  • 內涵
  • 預覽
  • 分享
  • 出版

區域設定概述

這 區域設定概述 顯示您目前正在查看和/或編輯的位置。透過點擊， 區域設定概述 下拉式選單可讓您選擇並導航到您在網站上配置的任何輔助位置。了解有關 Webflow 中的本地化的更多資訊。

頁面指示器

這 頁面指示器 顯示您目前所在的頁面。單擊時， 頁面指示器 揭開了 頁面面板.

自適應斷點

這 自適應斷點圖標 讓您在不同的斷點視圖之間切換，以在各種裝置螢幕尺寸上預覽和修改網站的外觀。了解有關自適應斷點的更多資訊。

團隊簡介圖片

這 團隊簡介圖片 展示在網站上與您即時協作的所有同事。如果您和您的同事在網站的不同頁面上工作，這可能會顯示為團隊數量（例如「2」）。您可以點擊個人資料圖片或數量來查看有關同事正在設計或編輯哪些頁面的更多詳細資訊。

狀態模式

這 狀態模式 下拉清單表明您目前是否正在設計或編輯。點擊可以在設計模式和編輯模式之間切換，或產生頁面分支進行設計，而不會影響主網站。

保存狀態

這 保存狀態 顯示您的工作何時被保存 – 用灰色“表示”旋轉箭頭” 圖示 - 當您的工作已成功保存時 – 以綠色“表示”圓圈的複選標記" 圖示.

您在 Designer 中所做的工作會自動儲存。您也可以按手動儲存您的網站 命令 + S 在 iOS 或 控制 + S 在Windows中。點選 保存狀態 不會儲存您的網站。

程式碼導出

這 程式碼導出 按鈕使您能夠匯出目前網站的程式碼，準備以 zip 檔案形式下載。了解有關程式碼匯出的更多資訊。

內涵

這 ”內涵」圖示可讓您進入評論模式以查看設計並新增評論。了解有關評論模式的更多資訊。

預覽

預覽“玩” 圖示可讓您在設計器的預覽和設計模式之間切換，並使您能夠預覽網站在發佈時的外觀和功能。

筆記： 預覽模式不會顯示自訂程式碼嵌入或將自訂程式碼功能套用至網站預覽。任何自訂程式碼腳本或嵌入都將在網站發布或匯出時生效。了解有關預覽自訂程式碼的更多資訊。

分享

這 分享 當您需要建議或設計協助時，按鈕可讓您啟動並與您的熟人或 Webflow 社群分享設計器目前頁面的預覽連結。它還使您能夠邀請內容編輯者在您的網站上進行協作。

透過只讀鏈接，任何知道該鏈接的人都可以在設計器中打開並操作網站的佈局和設計。當您的網站以唯讀模式開啟時，無法對其進行變更 - 此模式僅用於故障排除和探索目的。了解有關共享唯讀連結的更多資訊。

您邀請的任何內容編輯者都可以查看您的網站並編輯網站內容（例如文字、連結、圖像、產品和 CMS 內容）或變更 Webflow 編輯器中的頁面設定。了解更多有關邀請內容編輯的資訊。

出版

這 出版 按鈕可讓您選擇發佈目的地（即您想要發佈到的網域）並發佈您的修改。了解有關出版的更多資訊。

路徑指示欄

路徑指示器列顯示所選元素的層次結構。它可視化元素在其父元素中的位置（例如，在下面的範例中，Body 是Section 元素的父元素），並允許透過點擊欄中的標籤來選擇任何父元素。

右側的面板

位於設計器介面右側的三個剩餘面板提供對元素樣式、配置和操作的複雜控制：

  • 造型面板
  • 元素配置面板
  • 操作面板

造型面板－縮寫：S

這 造型面板 是可管理所選元素的所有可用 CSS 屬性的區域。在適當的欄位中輸入或選擇值，以立即將樣式套用到畫布上的元素。了解有關樣式面板的更多資訊。

元素配置面板 — 縮寫：D

這 元素配置面板 提供與目前所選元素相關的各種設定的存取。

操作面板 — 縮寫：H

這 操作面板 允許創建互動並將其應用到所選元素。了解有關操作的更多資訊。

多個用戶的協作

多名團隊成員可以同時在 Webflow Designer 中編輯內容，而一名團隊成員則專注於設計和建立網站。在團隊成員之間轉移設計控制並即時追蹤他們在現場的位置有助於順利完成設計過程。了解有關 Webflow Designer 中協作的更多資訊。

設計師在線性質的優勢

Webflow 選擇線上應用方法，因為我們相信網頁設計工具應該允許直接在瀏覽器中進行設計並立即獲得結果。以下是支援 Webflow 作為託管程式而不是可下載程式的更多原因：

  • 即時可視化（所見即所得） — Webflow 中的每個操作都直接反映在網站的 HTML 和 CSS 上。您在 Webflow 中看到的內容反映了在網站發佈時看到的內容。
  • 快速更新和增強 - 作為託管應用程序，可以快速開發、測試和部署新功能和修復，確保用戶始終訪問最新版本的 Webflow，而無需手動更新。
  • 加強協作 — 鑑於協作網頁設計工作流程的趨勢，線上平台簡化了團隊範圍的訪問和網站編輯。

‍

麥伊凡
Ewan Mak 的最新帖子 (看全部)

相關文章

經過麥伊凡
更新於