Webflow Designer 简介

Webflow 设计器使您能够构建您的网站框架，概念化您的网站的外观和氛围，并包含内容、交互、动画和自定义代码，以构建功能齐全的网站、登录页面、原型、演示文稿等。

在 Designer 中，您可以处理 HTML 元素、定义 CSS 样式并建立交互，而无需编写任何代码。在构建您的网站时，Designer 会生成原始、语义化、针对 Web 优化的代码，Web 浏览器将利用这些代码来展示您的网站。此外，Designer 中的代码可以导出到其他应用程序。

本教程将涵盖：

1. 访问设计器的指南
2. Designer 结构概述
3. 多用户协作
4. 设计师采用在线应用程序的原因

找到设计师

联系设计师：

• 通过访问 仪表板 并点击您的网站缩略图
• 通过 站点设置 通过选择 设计师 从顶部工具栏
• 通过 编辑 通过选择 设计师 点击 菜单按钮 在左下角

设计师先决条件：兼容的 Web 浏览器

Webflow 正式支持所有当代浏览器的最新三个主要版本上的设计器，包括 Chrome、Edge、Firefox 和 Safari。

浏览器兼容性的程度因所使用的功能而异（例如，Edge 中部分支持过滤器）。对于特定浏览器中受限制支持的功能，可以在其各自的文章中找到更多信息：

• CSS 变换 3d – 用于交互
• CSS 过渡 – 用于交互
• CSS 弹性框 – 受雇于 样式面板 > 布局
• CSS 过滤器 – 应用于交互
• CSS 网格 – 用于 样式面板 > 布局

Webflow 不支持 Internet Explorer。虽然 Webflow 创建的网站继续支持当代网络浏览器所支持的所有标准功能，但无法保证与 Internet Explorer 的兼容性。 了解有关放弃 Internet Explorer 支持的更多信息。

内部提示： 您可以通过访问来识别您的浏览器和操作系统版本 我的浏览器是什么.

设计师先决条件：兼容的显示分辨率

设计器需要一台配有鼠标和键盘的设备（例如台式机或笔记本电脑），屏幕宽度为 至少 1268px。此宽度占左侧边栏、设计器画布和右侧边栏的总和。

设计师的结构

设计器包括主要 帆布 以及工具栏和面板的集合。继续阅读以了解以下内容的摘要：

• 左侧工具栏和面板
• 画布
• 顶部栏
• 底部导航面包屑栏
• 正确的面板

左侧工具栏和面板

左侧工具栏提供各种链接和工具，让您可以组织您的网站。左侧工具栏顶部的图标可以隐藏大部分设计器面板，单击后即可展开：

• 主菜单
• 添加面板
• 页面面板
• 导航器面板
• 元件面板
• 变量面板
• 样式选择器面板
• 资源面板
• CMS 面板
• 逻辑面板
• 用户面板
• 电子商务面板
• 应用程序面板
• 站点活动日志
• 设置面板
• 帮助设置
• 审计小组
• 快速查找
• 视频教程面板

主菜单 — Webflow 徽标

选择 Webflow 图标后，会出现一个下拉菜单，可导航至仪表板、当前查看站点的站点设置或编辑器。此外，主菜单还提供：

• 进入 快速查找
• 撤销上一个操作
• 重做上一个动作
• 导出代码
• 查看键盘快捷键
• 激活 CSS 预览
• 获得帮助或提供反馈

添加面板——快捷键：A

这 添加面板 能够整合来自 元素 选项卡或预建布局 布局 标签。

配置面板

这 配置面板 允许您处理各种配置，例如 搜索设置 和 备份设置， 也 本地化设置。在本节中，您还将发现 用户界面 选项卡，您可以在其中选择设计师界面所需的亮度设置。

协助设置

辅助设置为您提供了简化设计器使用的工具。

• 支持和建议 — 让您能够直接在 Designer 中探索 Webflow 帮助指南。从这里，您还可以访问 Webflow 大学指南、视频课程或 Webflow 论坛。您还可以提交反馈或支持请求。‍
• 键盘快捷键 — 显示键盘快捷键，以增强您在 Designer 中的设计工作流程。您也可以通过按 转移 + /.‍
• CSS 预览 — 演示为画布上的选定元素创建的 CSS。此预览还允许您复制生成的 CSS 以供您喜欢的任何位置使用。

检查面板——快捷键：U

这 检查面板 显示您网站上普遍存在的与可访问性相关的问题，并提供解决这些问题的建议。了解有关“检查”面板的更多信息。

高效搜索——快捷键：Command + E（在 Mac 上）或 Control + E（在 Windows 上）

高效搜索 是一款搜索工具，可在您在 Webflow 中构建站点时加速您的工作流程并提高您的效率。了解有关高效搜索的更多信息。

教育视频面板

这 教育视频面板 提供了一种实用的方法来观看 Webflow 的所有免费视频课程。

工作空间

设计器中最广泛的区域称为 工作区。这是您可以与页面进行实时交互和设计的地方。您可以直接在页面上选择元素、重新定位它们并调整内容。了解有关工作区的更多信息。

上部

上部提供了另一组显示设置以及一些用于保存、发布甚至导出网站的有用工具。从左侧开始，在菜单按钮旁边，穿过屏幕向右移动，您将看到以下一组工具：

• 区域设置概述
• 页面指示器
• 自适应断点
• 团队资料图片
• 状态模式
• 保存状态
• 代码导出
• 内涵
• 预览
• 分享
• 出版

区域设置概述

这 区域设置概述 演示您当前正在查看和/或编辑的位置。通过单击， 区域设置概述 下拉菜单允许您选择并导航到您在网站上配置的任何辅助位置。了解有关 Webflow 中的本地化的更多信息。

页面指示器

这 页面指示器 显示您当前所在的页面。单击后， 页面指示器 揭开 页面面板.

自适应断点

这 自适应断点图标 允许您在不同的断点视图之间切换，以预览和修改网站在不同设备屏幕尺寸上的外观。了解有关自适应断点的更多信息。

团队资料图片

这 团队资料图片 实时显示与您在网站上合作的所有同事。如果您和您的同事正在处理网站的不同页面，则可能会显示为团队编号（例如“2”）。您可以点击个人资料图片或编号来查看有关您的同事正在设计或编辑哪些页面的更多详细信息。

状态模式

这 状态模式 下拉菜单显示您当前是在设计还是在编辑。单击可在设计模式和编辑模式之间切换，或生成页面分支进行设计，而不会影响主站点。

保存状态

这 保存状态 表示您的工作正在保存——用灰色“旋转箭头”图标，当您的工作已成功保存时，会显示绿色“带圆圈的复选标记“ 图标。

您在设计器中的工作会自动保存。您也可以通过按 命令 + 年代 在 iOS 或 控制 + 年代 在 Windows 中。单击 保存状态 将不会保存您的网站。

代码导出

这 代码导出 按钮可让您导出当前网站的代码，以 zip 文件形式下载。了解有关代码导出的更多信息。

内涵

这 ”内涵”图标可让您进入评论模式，以查看和添加设计评论。了解有关评论模式的更多信息。

预览

预览 “玩”图标允许您在设计器的预览和设计模式之间切换，并允许您预览网站发布后的外观和功能。

笔记： 预览模式不会显示自定义代码嵌入或将自定义代码功能应用于您的网站预览。任何自定义代码脚本或嵌入都将在网站发布或导出时生效。了解有关预览自定义代码的更多信息。

分享

这 分享 当您需要建议或设计帮助时，按钮可激活并与您的熟人或 Webflow 社区共享 Designer 当前页面的预览链接。它还允许您邀请内容编辑者在您的网站上进行协作。

使用只读链接，任何拥有该链接的人都可以在设计器中打开和操作您网站的布局和设计。当您的网站以只读模式打开时，无法对其进行更改 - 此模式仅用于故障排除和探索目的。了解有关共享只读链接的更多信息。

您邀请的任何内容编辑者都可以查看您的网站并编辑网站内容（例如文本、链接、图片、产品和 CMS 内容）或在 Webflow 编辑器中更改页面设置。了解有关邀请内容编辑者的更多信息。

出版

这 出版 按钮可让您选择发布目标（即要发布到哪些域）并发布您的修改。了解有关发布的更多信息。

路径指示栏

路径指示栏显示所选元素的层次结构。它直观地显示元素在其父元素中的位置（例如，在下面的示例中，Body 是 Section 元素的父元素），并允许通过单击栏中的标签来选择任何父元素。

右侧的面板

位于设计器界面右侧的其余三个面板提供对元素样式、配置和操作的复杂控制：

• 样式面板
• 元素配置面板
• 操作面板

造型面板——缩写：S

这 样式面板 是可管理所选元素的所有可用 CSS 属性的区域。在相应的字段中输入或选择值，即可立即将样式应用于画布上的元素。了解有关样式面板的更多信息。

元素配置面板——缩写：D

这 元素配置面板 提供对与当前选定元素相关的各种设置的访问。

操作面板——缩写：H

这 操作面板 允许创建和应用与所选元素的交互。了解有关操作的更多信息。

多用户协作

多名团队成员可以同时在 Webflow Designer 中编辑内容，而一名团队成员则专注于设计和构建网站。在团队成员之间转移设计控制权并实时跟踪他们在网站内的位置有助于实现顺畅的设计流程。了解有关 Webflow Designer 中的协作的更多信息。

设计师在线特性的优势

Webflow 选择在线应用方式，因为我们认为网页设计工具应该允许直接在浏览器中进行设计并立即获得结果。以下是支持 Webflow 作为托管程序而不是可下载程序的更多原因：

• 实时可视化（所见即所得） — Webflow 中的每个操作都会直接反映在网站的 HTML 和 CSS 上。您在 Webflow 中看到的内容反映了网站发布时将看到的内容。
• 快速更新和增强 — 作为托管应用程序，可以快速开发、测试和部署新功能和修复，确保用户始终可以访问最新版本的 Webflow，而无需手动更新。
• 增强协作 — 鉴于协作网页设计工作流程的趋势，在线平台简化了团队范围内的访问和网站编辑。

‍

• 关于
• 最新帖子

麦宜云

Webflow 专家 在 Tenten

Webflow 专家和前端开发人员，拥有 4 年以上经验。我拥有多种技能（HTML、CSS、JS、Figma、Adobe），可打造出色的 Webflow 体验。70 多个项目磨练了我无缝融合自定义代码和视觉开发的能力。我做事有条理、按时完成任务、热衷于成长，在动态环境中表现出色。让我们突破界限，创造非凡。

Ewan Mak 的最新帖子 (查看全部)

• 包括或删除工作区位置和成员 - 2024 年 4 月 15 日
• 定心盒摘要 - 2024 年 4 月 15 日
• 存储网站以供将来参考 - 2024 年 4 月 15 日