回到所有的课程
课程库

编辑简介

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

注意:我们正在向工作区过渡,这一教训已经更新以反映该变化。访问Workspaces博客文章阅读有关这些更新和更改的更多信息。
如果您的帐户还没有切换到工作区,请请访问我们关于编辑的遗产课程.你也可以学习如何检查您的帐户是否在工作区上
本视频采用了旧的用户界面。更新版本即将到来!
克隆这个项目

不像设计师,在您构建和设计网站时,“编辑器”只允许您和工作区成员编辑和管理内容。通过简化的界面,Editor为您提供了几个工具来管理已发布的网站。

和,客座编辑访问,您可以邀请您的客户管理自己的网站而不破坏设计。在这节课中,客座编辑可以了解更多如何访问编辑器而且如何排除任何日志问题

在这节课中:
  1. 访问编辑器
  2. 剖析编辑器工具栏
  3. 页面编辑
  4. 管理页面设置
  5. 创建和管理动态内容
  6. 查看和发布更改
  7. 访问表单提交
  8. 元素的编辑器设置
编辑器工具栏突出显示在网页的底部。">
        </div>
       </figure>
       <h5>编辑器课程的客户端指南</h5>
       <p>在我们的Webflow大学课程中了解更多关于编辑器的信息<a href=编辑器课程的客户端指南,欢迎您跟随。

访问编辑器

您可以在发布站点后访问Webflow Editor(对Webflow。IO暂存子域或自定义域)。它允许您直接在页面上编辑站点上的内容,或通过编辑器面板管理页面和内容。

通过Webflow的界面访问Editor

如果你在你的Webflow仪表板或在设计器中设计一个网站,你可以通过以下方式之一访问编辑器:

  • 从“仪表板”中的“站点”菜单
左图显示了网站缩略图上的3个揭露点。右边的图像显示了扩展的菜单,并突出显示了Editor选项。
  • 的顶部工具栏网站设置
网站设置顶部工具栏中的编辑器按钮。
  • 从菜单中设计师
左边的第一步,单击Webflow W图标。步骤二在右边,从下拉菜单中选择Editor按钮。">
        </div>
        <figcaption>
         打开设计器左上角的菜单按钮(“W”图标),选择“编辑器”</figcaption>
       </figure>
       <h3>从活动站点访问Editor</h3>
       <p><a href=客人编辑可以通过添加/?在浏览器地址栏(如yourwebsite.com/?edit)编辑到他们网站的URL的结尾。一旦他们登录,他们就可以在编辑模式中访问他们的网站。

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

让您的来宾编辑器知道,他们需要将浏览器设置为接受来自所有第三方的cookie才能使用Editor—否则,在尝试登录到Editor时,他们可能会看到错误消息。了解关于编辑器登录错误故障排除的更多信息

网站页面上的“编辑网站”按钮。">
        </div>
       </figure>
       <figure class=
编辑器中的编辑器工具栏。">
        </div>
       </figure>
       <h3>编辑器需求:支持的浏览器</h3>
       <p>Webflow官方支持编辑器的最新版本的Chrome或Safari的常青发行,加上2个版本的不同更新周期。Webflow还非正式地支持所有现代浏览器的使用。</p>
       <div class=
平台功能
边缘
Safari
火狐
iOS狩猎
铬为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部分支持filter)。详情可浏览以下网页:

2022年6月15日,微软正式停止对IE11 (IE11)的支持。虽然Webflow发布的站点使用了现代web浏览器支持的行业标准特性,但一些不被IE11支持的特性可能在该浏览器上运行不正确。从微软了解关于IE11支持的更多信息

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

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

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

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

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

当你打开编辑器时,你可以在预览模式或“实时网站”模式下浏览网站。要切换到编辑模式,点击页面右下角的“编辑站点”按钮。

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

编辑器登录错误

如果您、工作区成员或来宾编辑器在尝试登录编辑器时看到错误消息,请尝试以下修复之一:

  • 检查您的浏览器是否接受cookie,如果不接受,请打开它
  • 退出编辑器,清除浏览器的缓存,然后重新登录
  • 通过匿名模式窗口登录编辑器
  • 尝试通过不同的浏览器登录
  • 试着向你的内容编辑发送一个新的客座编辑邀请,并要求他们使用一个匿名窗口来创建他们的新帐户
  • 尝试删除或禁用自定义代码
  • 如果这些都不管用,请联络支持
注意:如果您的网站上有自定义代码,自定义代码可能会影响编辑器。这是因为Editor在发布的站点上呈现。尝试删除或禁用您的自定义代码。

多用户协作

编辑器允许多个团队成员和客人编辑编辑静态和动态网站内容在同一时间。如果两个人同时编辑相同的内容,最后的编辑会“胜出”,所以你仍然需要与你的队友和客座编辑协调编辑时间。编辑器还提供了一个站点活动日志,这样您就可以在发布站点之前看到谁编辑了您的站点,以及他们进行了哪些编辑。

与编辑器类似,如果您想编辑站点的,可以在设计器中与团队成员协作设计在Webflow Designer中了解关于协作的更多信息

剖析编辑器工具栏

当你访问编辑器时,你会看到编辑器工具栏(灰色条)折叠在屏幕底部。通过这个工具栏,您可以访问各种编辑器面板来管理页面设置、动态内容、表单和您的编辑器帐户。您还可以查看并发布通过Editor所做的更改。

编辑器工具栏显示页面,订单,电子商务和表单标签,以及“1未发布的更改”。">
        </div>
       </figure>
       <p>编辑器工具栏有以下选项卡和图标:</p>
       <p><strong>菜单</strong>-使用此菜单进入仪表板,您的网站设置,或设计器。这个按钮的特点是Webflow徽标。</p>
       <p><strong>页面</strong>-打开页面面板,列出你的网站的静态页面和动态收集页面。在这里,您可以浏览某个页面,单击查看活动页面并管理任何页面的设置。</p>
       <p><strong>集合</strong>打开集合面板,它列出了你所有的集合。单击Collection将在工具栏中打开一个新选项卡,该选项卡将打开Collection项的面板,列出该Collection中的所有项。在这里,您可以编辑任何项或创建新项。这与设计器中的CMS面板非常相似。<a href=阅读更多关于CMS面板的内容.

形式打开表单面板,你可以看到和下载网站上提交的表单。

帐户设置(图标)-打开帐户设置面板,您可以编辑您的客座编辑帐户信息和上传个人资料图像。

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

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

返回现场(按钮)-从编辑模式切换到现场模式,允许您查看您的网站,您的网站访问者将看到它。

保存/保存-所有的更改都会自动保存在编辑器中。当你在编辑器中修改你的网站时,你会看到一个“保存…”或“保存”状态。

更新日志在左下角的发布按钮旁边显示了未发布的修改的数量。单击变更日志会显示带有未发布更改的项和页面列表,您可以看到是哪个来宾编辑器或Workspace成员进行了这些更改。

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

页面编辑

您可以使用Editor在页面上进行编辑。当您将鼠标悬停在各种元素上时,一个"铅笔图标或图片图标将出现在可编辑元素的右上角。要编辑任何这些元素,只需单击图标。

出现在可编辑标题上方的“铅笔”图标。">
        </div>
       </figure>
       <figure class=
出现在可编辑图像上的“图片”图标。">
        </div>
       </figure>
       <h6><strong>注意:</strong>一些样式和自定义代码在发布的站点上显示不出它们应该显示的样子。在编辑器中,这是正常的行为。</h6>
       <h3>编辑和格式化文本</h3>
       <p>当鼠标悬停在可编辑文本元素上时,你会看到文本元素周围有一个浅灰色的轮廓和一个铅笔右上角的图标。您可以通过点击进入该框来编辑文本。

在编辑器中选择一个段落,“铅笔”图标可见。">
        </div>
       </figure>
       <p>您还可以通过选择单词或短语并从出现的浮动工具栏中选择格式来格式化它们。<a href=阅读更多关于内联文本格式的信息.

当单词在编辑器中高亮显示时出现的格式化工具栏。">
        </div>
       </figure>
       <p>为<strong>富文本</strong>元素,你可以做更多:添加媒体,创建列表,样式,并进一步格式化你的文本。<a href=了解关于富文本元素的更多信息.

在编辑器中选择富文本时出现的富文本格式化工具栏。">
        </div>
       </figure>
       <h3>更换图片</h3>
       <p>你也可以在网站上替换图片。只需将光标悬停在想要替换的图像上,然后单击“”<strong>图片</strong>”图标。这将允许您选择并上传一个新的图像从您的计算机。</p>
       <figure class=
在满是星星的夜空图像的右上角有一个编辑图标。">
        </div>
       </figure>
       <p></p>
       <h6><strong>注意:</strong>您在设计器中为某个元素创建的任何视觉样式,例如纯色叠加、边框颜色或阴影,都将自动应用于通过编辑器替换的任何图像或背景图像。</h6>
       <h3>编辑按钮</h3>
       <p>要编辑按钮元素,请将光标悬停在按钮上,然后单击<strong>设置</strong>"<strong>齿轮</strong>出现在右上角的图标。</p>
       <figure class=
在右上角有一个带文字“了解更多关于编辑按钮”的蓝色按钮,它有一个设置图标。">
        </div>
       </figure>
       <p>你会看到两个选项:</p>
       <ul role=
  • 编辑链接设置-让你更新按钮的链接
  • 编辑文本-使您可以更改按钮文本
  • 编辑按钮下拉菜单包括两个选项:编辑链接设置和编辑文本。">
        </div>
       </figure>
       <h2>管理页面设置</h2>
       <p>在编辑器的页面面板中,您可以管理重要的页面设置,例如<a href=SEO元标题和描述,打开图表标题和描述,开放的图形图像.您还可以管理页面密码保护设置对于静态页面和RSS提要的设置收藏页。

    编辑器中的页面设置页面突出显示Pages选项卡。">
        </div>
        <figcaption>
         在编辑器中管理页面设置</figcaption>
       </figure>
       <p>访问页面设置:</p>
       <ol role=
  • 打开页面选项卡在编辑器面板中
  • 将光标悬停在列表中的某个页面上
  • 单击设置按钮,出现
  • 有六个不同的博客文章页面。博客文章页面的设置按钮在第一页突出显示,标题为电子商务产品摄影提示:初学者指南。欧宝体育在线首页">
        </div>
       </figure>
       <p>您还可以使用搜索栏按名称搜索页面。</p>
       <figure class=
    名为“搜索页面…”的搜索栏在页面顶部栏部分高亮显示。在这个集合中有五个团队成员页面。">
        </div>
       </figure>
       <h6><strong>注意:</strong>单击页面,而不是设置按钮,将关闭Pages面板并打开相应的页面。</h6>
       <h2>创建和管理动态内容</h2>
       <p>如果您的站点中有Collections,您可以通过Collections选项卡在Editor中访问它们。集合面板列出了所有的集合。单击一个集合将打开一个以该集合的名称为标题的新选项卡。此选项卡包含该集合中的所有集合项。</p>
       <figure class=
    编辑器工具栏的选项卡部分增加了一个名为Blog Posts的新选项卡。这个选项卡在其他五个选项卡中被突出显示。">
        </div>
       </figure>
       <h3>创建和编辑内容</h3>
       <p>可以通过单击现有项来编辑它们,也可以通过单击<strong></strong>"<strong>新</strong>"<strong></strong>按钮并填写项目的各个字段。</p>
       <figure class=
    在博客帖子收集页面的右上角突出显示了一个绿色的“新博客帖子”按钮。在这个页面上已经创建并发布了6个页面。">
        </div>
        <figcaption>
         “新博客文章”按钮在编辑器中高亮显示。</figcaption>
       </figure>
       <p>当你完成输入内容或更新字段时,你可以选择:</p>
       <ul role=
  • 创建新项目或保存现有的项目。它将被安排发布,并在你下次发布它的时候在你的网站上运行。
  • 发布你的项目马上(而不是等待下一个全站范围的发布发生)
  • 保存为草稿如果您还没有完全准备好让项目进入现场
  • 取消丢弃的变化
  • 按下一个绿色的“创建”按钮,下拉菜单包括发布、保存为草稿和计划选项。这个下拉菜单在收藏页面“我惊人的博客文章”设置页面中被突出显示。">
        </div>
        <figcaption>
         在“编辑器”中发布单个项目</figcaption>
       </figure>
       <p><a href=了解有关创建和发布集合项的更多信息.

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

    集合页工具栏包括页面名称右侧的一个图标,用于导航到详细信息页。此图标在顶部栏中高亮显示。">
        </div>
       </figure>
       <p>若要返回“收集”项的列表,请单击<strong>回来</strong>按钮。</p>
       <figure class=
    收集页顶部栏突出显示左侧箭头图标。旁边是一个收藏页面,名字是“我惊人的博客文章”。">
        </div>
       </figure>
       <h3>管理内容</h3>
       <p>在Collection Panel中,您可以看到所有Collection项及其状态。您可以同时删除、起草或归档多个项目。这样做:</p>
       <ol role=
  • 点击“选择”按钮
  • 选择要管理的项目
  • 选择动作(删除草案,或存档)
  • 博客文章收集设置页面右上角的选择按钮被突出显示在搜索栏和绿色的“新博客文章”按钮之间。已经出版了六页合集。">
        </div>
        <figcaption>
         在编辑器中管理集合项</figcaption>
       </figure>
       <p><a href=阅读关于管理集合项的更多信息.

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

    编辑器工具栏的“课程”选项卡中的“关闭”(x)按钮。">
        </div>
       </figure>
       <h2>查看和发布更改</h2>
       <p>在进行了所有这些更改之后,您将希望查看它们,并确保它们已保存并可以在单击之前发布<strong>发布</strong>.</p>
       <h3>在现场观看变化</h3>
       <p>在编辑器中工作时,编辑器面板覆盖了你的网站的大部分内容。要折叠编辑器面板并查看您的网站,请单击<strong>查看网站</strong>顶部的按钮。</p>
       <figure class=
    查看站点按钮在编辑器工具栏上方的位置高亮显示。">
        </div>
       </figure>
       <p>在这个视图中,您可以像往常一样浏览您的网站,并对任何页面进行更改或查看更改。</p>
       <h3>出版</h3>
       <p>在编辑器中所做的更改将不会在实时站点上进行,除非您单独发布已编辑的项目或按下<strong>发布</strong>按钮,以发布所有分阶段的更改。在实际发布站点之前,您需要确认是否希望发布所有更改。绿色的<strong>发表</strong>按钮将确认这一点。</p>
       <figure class=
    点击绿色的Published按钮,会出现一个通知,上面写着“Publish successful”和“You Published 1 change to your site”。在“返回活动站点”按钮旁边有一个复选标记,表示已保存更改。">
        </div>
       </figure>
       <blockquote>
        <strong>重要的是:</strong>当你从编辑器发布时,你的网站将发布到两个webflow。IO暂存域和自定义域。为了避免这种情况,<a href=从设计器或站点设置发布.

    访问表单提交

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

    元素的编辑器设置

    默认情况下,您、Workspace成员和来宾编辑器可以使用Editor编辑活动站点上的所有内容,但是如果您愿意,也可以使来宾编辑器无法编辑元素。

    1. 在设计器中打开站点
    2. 选择要使之不可编辑的元素
    3. 元素设置(D)
    4. 取消"合作者可以编辑此元素"
    在编辑器设置部分,协作者可以编辑此元素设置被选中。">
        </div>
       </figure>
       <p>还可以使用在选定元素上切换来宾编辑器<strong>Command + Shift + L</strong>(在Mac)或<strong>Control + Shift + L</strong>(在Windows上)。</p>
       <blockquote>
        <strong>重要的是:</strong>CMS元素在编辑器中总是可编辑的。</blockquote>
       <h2>客座编辑权限</h2>
       <p>如果您的工作区站点有CMS、商业或电子商务站点计划,您可以邀请客座编辑在您的站点上进行协作。除了在Editor中打开站点、编辑内容和进行更改外,来宾编辑器还可以添加CMS内容和编辑页面设置。</p>
       <p>来宾编辑器还具有与工作区成员不同的发布权限。<a href=了解有关来宾编辑器发布权限的更多信息.

    尝试Webflow——它是免费的
    Baidu