从这里开始

导言

很高兴你在这里

无论你是刚刚购买了 Tech Tribe 模板，还是只是在看看，我们都很高兴你在这里。你可能知道，Tech Tribe建立在Webflow之上，Webflow是用于创建网站的强大无代码工具。如果你已经熟悉了，我敢肯定，编辑这个模板将是小菜一碟。

本文档涵盖了我们认为值得分享的使用 Webflow 的一般规则。

如果你是 Webflow 的新手

另一方面，如果你是第一次使用Webflow，你可能需要看看 Webflow 大学 还有他们的 101 速成课程。

造型

您可以在下面找到有关模板样式的一些一般规则。

颜色

在 Tech Tribe 模板模板中，我们使用了颜色样本。这意味着你可以在一个地方更改颜色，它将应用于共享相同样本的所有元素。

要更改色板，请执行以下操作：

1. 点击具有要编辑颜色的元素。
2. 在右侧的样式选项卡中，找到颜色选项（例如文字颜色）
3. 点击颜色方块。
4. 小弹出窗口打开后，点击编辑图标并选择一种新颜色。
5. 单击 “保存”。

有关迷你教程，请参见下面的视频。

字体

科技部落只使用一种字体：蒙特塞拉特。它是一个 谷歌字体 并且每个 Webflow 项目都默认自带此功能。该字体 100% 免费用于个人和商业用途。

蒙特塞拉特 应用于网站正文，因此，它会自动应用于所有段落和文本块。 你可以通过以下方式在全球范围内对其进行更改：

1. 选择 “身体”
2. 在右侧的样式选项卡中，单击选择器并选择 “正文（所有页面）”
3. 向下滚动到 “排版”，然后更改为所需的字体。

有关迷你教程，请参见下面的视频：

‍

蒙特塞拉特也适用于标题（H1-H6）。 您也可以通过以下方式以相同的方式对其进行编辑：

1. 选择要编辑的标题类型
2. 在右侧的样式选项卡中，单击选择器并选择 “所有 H (1、2、3、4、5、6) 标题”
3. 向下滚动到 “排版”，然后更改为所需的字体。

图标

所有图标均为.svg 格式，因此更改网站上的颜色样本不会对其产生影响。你可以从 “资源->图标” 选项卡下载这些图标，然后在你的设计软件（Photoshop、Figma、Sketch等）中对其进行编辑。您也可以直接上传自己的图标。

正在编辑

您可以在下面找到有关编辑模板副本和图像的一些一般提示。

静态内容与动态内容

在复制方面，在 Webflow 中，我们区分了两种不同的副本类型——静态内容和动态内容 (CMS)。

要快速区分这些副本类型，可以在导航器选项卡中查看，静态内容将使用白色字体显示。

‍

‍

动态内容将使用紫色字体颜色显示。

‍

‍

您还可以直接在设计器空间中将鼠标悬停在元素上方，直接查看哪个元素是静态的，哪个是动态的。静态内容周围将有一个蓝色边框。

‍

动态内容的边框将为紫色。

编辑静态内容

除与 CMS 相关的副本外，每个副本都是静态内容。这意味着你需要直接在页面上对其进行编辑。

您可以通过两种方式编辑静态内容：

1. 在 “设计器模式” 中，只需双击要编辑的文本，然后进行更改。Webflow 会自动为你保存。
2. 在 “编辑器模式” 中，同样点击文本并进行更改。

观看以下视频，了解如何在 “设计者模式” 下编辑静态内容。

编辑动态内容

编辑动态内容非常简单，但一开始可能会有点混乱。这类内容你需要通过收藏夹进行编辑。一旦你得到了，就像填写网络表单一样简单。

要编辑动态内容，请执行以下操作：

1. 转到左侧的 CMS 收藏夹，找到你要编辑的收藏集（例如项目）。
2. 点击收藏品（例如项目名称）。
3. 更改要编辑的输入（例如博客文章标题）
4. 保存就完成了。

你可以在其上阅读有关编辑馆藏和使用 Webflow CMS 的更多信息 大学页面。

编辑（静态）图像

此模板中使用了两种不同的图像类型——普通图像和背景图像。你可能会注意到，我们主要使用普通图像作为图标，而大图像是作为背景图像实现的。

要编辑普通图像，请执行以下操作：

1. 找到要更改的图像并将其选中。
2. 在 “设置” 选项卡中，右键单击 “替换图像”，然后选择新图像。

要编辑背景图片，请执行以下操作：

1. 使用背景图像查找元素（例如Section，Div），然后将其选中。
2. 在样式选项卡中，向下滚动到背景图像设置，然后单击图像设置。
3. 在小弹出窗口中选择 “选择图像” 以选择其他图像。

看看下面的视频，看看如何编辑背景图片。

支持

如果您购买了科技部落模板，我们将为您提供基本支持。如有与我们的模板直接相关的问题，请给我们发电子邮件 templates@wavesdesign.io

有关使用 Webflow 作为工具的问题，请查看他们的 大学 要么 联系他们的支持人员。