回到所有的课程
课程库

编辑入门

Editor允许您在一个简单的界面中更新和添加内容,这对于不需要Designer复杂性的客户端或团队来说非常好。

注意:我们正在向工作区过渡,并且正在更新我们的内容。访问工作区博客欲了解更多有关这些更新和变化,或访问我们的更新了关于编辑器的课程。你也可以了解如何检查您的帐户是否在工作区
这个视频的特点是一个旧的UI。更新版本即将发布!
克隆此项目

不像设计师编辑器只允许你编辑和管理内容。通过简化的界面,编辑器为您提供了一些工具来管理已发布的网站。和合作者访问,你可以邀请你的客户管理他们自己的网站,而不破坏设计。

在这节课中:
  1. 访问编辑器
  2. 编辑器工具栏的剖析
  3. 页面编辑
  4. 管理页面设置
  5. 创建和管理动态内容
  6. 查看和发布更改
  7. 访问表单提交
  8. 元素的编辑器设置
“编辑器”工具栏高亮显示在所示网页的底部。
编辑器课程的客户指南

在我们的Webflow大学课程中了解更多关于编辑器的知识编辑器课程的客户指南,欢迎大家跟进。

访问编辑器

Webflow编辑器存在于你发布的网站中。它允许您直接在页面上编辑站点上的内容,或通过编辑器面板管理页面和内容。

通过Webflow的界面访问编辑器

如果您在Webflow仪表板中或在设计器中设计项目,您可以通过以下方式之一访问编辑器:

  • 从仪表板中的项目菜单
第一步在左边,点击项目缩略图右下角的省略号(高亮显示)。在右侧的第二步中,选择菜单中的Editor(高亮显示)。
单击项目缩略图右下角的省略号(…),并在菜单中选择Editor。
  • 的顶部工具栏项目设置
顶部工具栏包括项目名称、四个设置图标、一个共享按钮、一个设计器按钮、一个编辑器按钮(突出显示)和一个发布按钮。
单击右上角工具栏中的Editor按钮
  • 从菜单上设计师
第一步在左边,单击Webflow W图标。在右边的第二步,从下拉菜单中选择Editor按钮。
打开设计器左上角的菜单按钮(W图标),选择“编辑器”

从现场站点访问编辑器

合作者可以通过添加/?在浏览器地址栏中编辑到网站URL的末尾(例如,yourwebsite.com/?edit)。一旦他们登录,他们可以访问他们的网站编辑模式。

当他们稍后返回站点时,他们可能会在右下角看到“编辑站点”按钮,他们可以点击该按钮跳转到编辑模式。

让您的协作者知道,他们需要将浏览器设置为接受来自所有第三方的cookie才能使用编辑器-否则,他们在尝试登录时可能会看到错误消息编辑器

左边的第一步,点击编辑器页面右下方的Edit Site。在右边的第二步,注意已经出现了Editor工具栏。


编辑器要求:支持的浏览器

Webflow正式支持最新版本的Chrome或Safari的常青版本的编辑器,加上两个版本的不同更新周期。Webflow还非正式地支持所有现代浏览器的使用。

平台功能
边缘
Safari
火狐
iOS狩猎
Chrome for Android
设计师
x
x
常绿
+ 2
常绿
+ 2
常绿+ 2
(在制品)
x
x
编辑和数据经理
x
常绿
+ 2
常绿
+ 2
常绿
+ 2
常绿+ 2
(在制品)
x
x
指示板
x
常绿
+ 2
常绿
+ 2
常绿
+ 2
常绿+ 2
(在制品)
x
x
发布的网站/导出的代码
x
15 + *
常绿
+3
10.1 + *
常绿+ 3
常绿+ 3
常绿+ 3
的相互作用
x
12 + *
常绿
+3
10.1 + *
常绿+ 3
常绿+ 3
常绿+ 3

*浏览器的支持程度取决于使用的功能(例如,过滤器在Edge中有部分支持)。详情请浏览:

2022年6月15日,微软正式结束了对IE11的支持。虽然在Webflow上发布的网站使用现代web浏览器支持的行业标准功能,但IE11不支持的一些功能可能在该浏览器上运行不正常。从微软了解更多关于IE11支持的信息

Webflow在任何情况下都不支持IE 9或IE 10。了解更多关于这个决定的信息

很高兴知道:常青浏览器是自动更新自己的浏览器,这意味着大多数人都有最新的、自动更新的版本。

如果您在实验性浏览器上使用Webflow时遇到问题,请在实验性浏览器类别在Webflow论坛上。


注意:您可以确定所使用的浏览器和操作系统版本我的浏览器是什么

在编辑器模式和现场站点模式之间切换

当您打开编辑器时,您将能够在预览模式或“实时网站”模式下浏览该网站。要切换到编辑模式,点击页面右下方的“编辑站点”按钮。

当你想在预览模式下查看网站时,请点击“返回实时网站”。

故障排除编辑器登录错误

如果您或您的协作者在尝试登录编辑器时看到错误消息,请尝试以下修复之一:

  • 检查您的浏览器是否接受cookie,如果不接受,则打开它
  • 注销编辑器,清除浏览器缓存,然后重新登录
  • 通过匿名模式窗口登录到编辑器
  • 尝试通过不同的浏览器登录
  • 尝试向您的内容编辑器发送一个新的合作伙伴邀请,并要求他们使用匿名窗口创建他们的新帐户
  • 如果这些都不起作用,请联络支持

多用户协作

不像设计师,编辑器允许多人同时编辑静态和动态内容。需要注意的一点是:一个人可以同时在设计器中工作——许多人可以同时在编辑器中工作。如果两个人同时编辑相同的内容,最后一个编辑“赢”,所以您仍然需要与您的队友协调编辑时间。了解关于编辑器的更多信息。

编辑器工具栏的剖析

当你访问编辑器,你会看到你的现场网站与编辑器工具栏(灰色条)塌陷在你的屏幕底部。通过此工具栏,您可以访问各种Editor面板,以管理页面设置、动态内容、表单和您的Editor帐户。您还可以通过编辑器查看和发布所做的更改。

“编辑器”工具栏包含以下选项卡和图标:

编辑器工具栏包括Webflow徽标菜单按钮、页面、集合和表单按钮。有三个图标用于设置,帮助和支持和注销。在工具栏的右侧有一个“返回live site”按钮,保存的通知,未发布的更改通知和一个蓝色的发布按钮。

菜单-使用此菜单可进入仪表板、项目设置或设计器。这个按钮的特点是Webflow标志。在我们的专业计划中,您可以将此替换为您自己或客户的标志。了解关于编辑器品牌的更多信息。

页面-打开页面面板,其中列出了您的网站的静态页面和动态集合页面。从这里,您可以浏览一个页面,单击查看活动页面并管理任何页面的设置。

集合-打开集合面板,其中列出了所有的集合。单击Collection将在工具栏中打开一个新选项卡,该选项卡将打开Collection项的面板,列出该Collection中的所有项。在这里,您可以编辑任何项目或创建新的项目。这与设计器中的CMS面板非常相似。阅读更多关于CMS面板的信息

形式-打开表格面板,在那里你可以看到和下载在本网站提交的表格。

帐户设置(图标)-打开帐户设置面板,在那里你可以编辑你的合作者的帐户信息和上传档案图像。

帮助和支持(图标)-打开帮助和支持面板,在那里您可以找到关于使用编辑器的一些常见问题的答案。

注销(图标)-确认后退出编辑器。

回到现场(按钮)-从编辑器模式切换到实时站点模式,允许您以站点访问者看到的方式查看您的站点。

保存/保存-所有的更改会自动保存在编辑器中。拯救……和保存状态在左下方显示这一点。

更新日志-这显示了在左下方发布按钮旁边未发布的更改的数量。单击更改日志会显示未发布更改的项和页面列表,您可以看到是哪个Collaborator进行了更改。

发布(按钮)—允许您发布在编辑器中所做的所有更改。

页面编辑

使用编辑器在页面上进行编辑非常直观。当您将鼠标悬停在各种元素上时,一个编辑图标将出现在可编辑元素的右上角。要编辑这些元素,只需单击图标。

左边的第一步,点击文本框右侧的编辑图标。在右边的第二步,在Photography前面添加单词“Outdoor”。
第三步,点击相机图标图像右上方的编辑按钮。步骤四,将右侧的相机图标图像替换为户外摄影图标。
一些样式和自定义代码在发布的站点上不会显示出来。当你在编辑器中,这是正常的行为。

编辑和格式化文本

当鼠标悬停在可编辑的文本元素上时,您将看到文本元素周围有一个浅灰色的轮廓,右上角有一个铅笔图标。你可以通过点击方框来编辑文本。

一段文字用浅灰色矩形勾勒出来,右上角有一个编辑图标。

您还可以通过选择单词或短语并从出现的浮动工具栏中选择格式来格式化它们。阅读更多关于内联文本格式的信息。

浮动工具栏包括以下格式选项:粗体、斜体、插入链接、跨换行和清晰格式。

富文本元素,你可以做更多:添加媒体,创建列表,样式,并进一步格式化你的文本。了解关于富文本元素的更多信息。

单词“段落”在富文本元素中的段落中突出显示。浮动工具栏包括粗体、斜体、插入链接、H1到H6和块引号。

更换图片

你也可以在网站上替换图片。只需将光标悬停在您想要替换的图像上,然后单击图片图标。这将允许您从您的计算机选择和上传一个新图像。

一张布满星星的夜空的图片在右上角有一个编辑图标。

您在设计器中为元素创建的任何视觉样式,如纯色叠加、边框颜色或阴影,都将自动应用于您通过编辑器替换的任何图像或背景图像。

编辑按钮

要编辑按钮元素,请将光标悬停在按钮上并单击设置出现在右上角的图标。

一个蓝色的按钮,上面写着“了解更多关于编辑按钮的信息”,右上角有一个设置图标。

你会看到两个选项:

  • 编辑链接设置-让你更新按钮的链接
  • 编辑文本-允许您更改按钮文本
编辑按钮下拉菜单包括两个选项:编辑链接设置和编辑文本。

管理页面设置

在编辑器的页面面板中,您可以管理重要的页面设置,如SEO元标题和描述打开图形标题和描述,打开图形图像。你也可以管理页面密码保护设置对于静态页面和RSS频道设置收集页。

“页面”选项卡在“编辑器”中的“页面设置”页面中突出显示。
在编辑器中管理页面设置

访问某一页面的设置。

  1. 打开页面选项卡在编辑器面板中
  2. 将光标悬停在列表中的一页上
  3. 按一下设置出现的按钮
有六个不同的博客页面。博客帖子页面的设置按钮突出显示在题为“电子商务产品摄影技巧:初学者指南”的第一页上。欧宝体育在线首页

您还可以使用搜索栏按名称搜索页面。

被称为“搜索页面”的搜索栏在页面顶部栏突出显示。关于这个集合有五个团队成员页面。
单击页面,而不是单击Settings按钮,将关闭Pages面板并打开相应的页面。

创建和管理动态内容

如果项目中有集合,则可以通过集合选项卡在编辑器中访问它们。收藏面板列出所有收藏。单击集合打开一个新选项卡,标题为集合的名称。此选项卡包含该集合中的所有集合项。

在编辑器工具栏的选项卡部分添加了一个名为Blog Posts的新选项卡。此选项卡在其他五个选项卡中突出显示。

创建和编辑内容

可以通过单击编辑现有项,或通过单击创建新项+新按钮并填写项目的各个字段。

在名为blog posts的集合页面的右上角突出显示了一个绿色的“new blog post”按钮。这个页面上已经创建和发布了6个页面。
在编辑器中创建一个新的集合项

当你完成输入内容或更新字段时,你可以选择:

创建新项目或保存已存在的项。它将在你下次发布它的时候在你的网站上进行发布和直播。

发布立即发布您的条目(无需等待下一个站点范围内的发布)。

另存为汇票如果你还没有完全准备好把项目放到现场。

取消丢弃更改。

一个绿色的“创建”按钮被按下一个下拉菜单,包括发布,保存为草稿和计划选项。这个下拉菜单在集合页面“My amazing blog post”设置页面中突出显示。
在编辑器中发布单个项

了解有关创建和发布集合项的详细信息。阅读有关出版限制的内容

通过单击项目名称右侧的图标,可以查看该项目的Collection页面。这将折叠面板,向您显示当前正在浏览器中查看的项目的页面。如果你愿意,你可以在那里编辑它,而不是在面板中。

集合页面工具栏包括页面名称右侧的图标,用于导航到详细信息页面。这个图标高亮显示在顶部栏上。

要返回“集合”项的列表,请单击(←)按钮。

左边的箭头图标突出显示在集合页面的顶部栏上。旁边是集合页面的名字“我的惊人的博客帖子”。

管理内容

在收集面板中,您可以看到所有收集项及其状态。您可以同时删除、存档或更改多个项目的状态。做某事:

  1. 单击选择……按钮
  2. 选择要管理的项目
  3. 从顶部工具栏中选择您想要的操作
博客文章集合设置页面右上角的选择按钮突出显示在搜索栏和绿色的“新博客文章”按钮之间。已经出版了6个出版集页。
在编辑器中管理集合项

阅读有关管理集合项的详细信息。

要关闭Collection选项卡,请单击选项卡右上角的关闭(x)按钮。

一个名为courses的集合页面在页面选项卡的右上角包含一个灰色的x图标。这个图标被高亮显示。

查看和发布更改

在完成所有这些更改后,您将希望查看它们,确保它们已保存并准备好发布后再单击发布

在现场查看更改

在编辑器中工作时,编辑器面板涵盖了您网站的大部分内容。若要折叠编辑器面板并查看网站,请单击查看网站按钮在顶部。

“查看站点”按钮在编辑器工具栏上方的位置突出显示。

在这个视图中,您可以像往常一样浏览您的网站,并对任何页面进行或查看更改。

出版

在编辑器中所做的更改不会在活动站点上进行,直到您单独发布编辑过的项目或按发布按钮以发布所有分阶段更改。在实际发布站点之前,您需要确认您希望发布所有更改。绿色的发表巴顿会证实的。

绿色的Published按钮已经被点击,并且出现了一个通知,上面写着Publish successful and“您发布了对您的站点的1个更改”。在Back to live site按钮旁边有一个复选标记,表示更改已保存。
重要的
从编辑器发布时,站点将同时发布到登台域和自定义域。为了避免这种情况,从设计器或项目设置中发布

访问表单提交

如果您的项目中有任何表单,编辑器将包括一个forms选项卡。在这里,您将能够查看人们提交的表单的一些基本信息,但作为下载完整表单数据的地方,它是最有用的。在下载的CSV文件(一种与所有主流电子表格应用程序兼容的格式)中,你将能够看到所有提交的信息。

元素的编辑器设置

默认情况下,您和站点协作者可以使用编辑器编辑活动站点上的所有内容,但如果您愿意,也可以使元素不可编辑。

  1. 在设计器中打开项目
  2. 选择要使其不可编辑的元素
  3. 设置(D)
  4. 取消合作者可以编辑这个元素
在编辑器设置部分,合作者可以编辑这个元素设置被选中。
快捷键

你也可以使用快捷键在选定的元素上切换合作者:

  • 麦克:Command + Shift + L
  • 窗口:Control + Shift + L
必须知道
CMS元素总是可以在编辑器中编辑的。
尝试Webflow-它是免费的
Baidu
map