回到所有的课程
课程库

Webflow中的预构建布局

避免在Webflow中使用这些预先构建的布局从头开始构建通用布局。

这个视频的特点是一个旧的UI。更新版本即将发布!

将Webflow的预构建布局添加到空白画布中,启动设计,或者在已经构建的站点中包含预构建布局。有了这些预先构建的布局,你就可以避免从头开始重建相同的一组常用布局(例如导航栏、证词、页脚)。

您可以访问9个预构建布局,其中每一个都包含不同的变体。要使用布局,请打开添加面板>布局并将布局拖放到画布上。

  1. 导航
  2. 英雄
  3. 团队
  4. 标志
  5. 画廊
  6. 特性
  7. 定价
  8. 证明
  9. 页脚

导航

有三种类型导航布局,叫做导航栏.这些通常用于网站页面的顶部,方便访问网站链接和主页。所有3个导航布局都包含一个logo,链接,一个下拉,并呼吁采取行动按钮

导航标志中心

导航标志中心布局使用flexbox组织两个文本链接和一个下拉菜单在左边,一个logo占位符在中间,和一个文本链接和呼吁行动按钮在右边。

导航标志左

导航标志左布局使用flexbox在左侧组织一个logo占位符,在中央组织3个文本链接和一个下拉菜单,在右侧组织一个文本链接和呼吁行动按钮。

导航没有影子

导航没有影子布局使用flexbox组织左侧的logo占位符,中间的4个文本链接和一个下拉菜单,以及右侧的呼吁行动按钮。

额外的导航设置

断点比桌面中断点小,除了logo之外的所有内容都将自动压缩到导航栏菜单按钮中,也被称为汉堡包菜单。您可以重写此选项,使导航栏菜单按钮在所有断点上可见或不可见。

更改导航栏菜单按钮首次出现的时间:

  1. 选择导航条布局或里面的任何元素
  2. 开放设置面板>导航设置
  3. 使用设备选项滑块来选择菜单按钮第一次出现
设备选项滑块在导航栏设置中突出显示。

您还可以构建一个导航栏交互来响应滚动。了解更多关于如何显示和隐藏滚动条的信息

现实生活中的导航条例子

Airtable网站使用了一个导航栏,其中包含Airtable的logo和产品、解决方案、定价、企业和资源的链接。ob体育app苹果版欧宝体育在线首页它还有一个“联系销售”按钮、一个注册按钮和一个登录链接。

英雄

有7种英雄布局。的英雄节是将站点访问者的注意力吸引到站点页面顶部的内容上的区域,如图像、产品或行动号召。欧宝体育在线首页所有7个英雄布局都包含标题、段落和呼吁行动按钮。一些布局为图像或视频提供了额外的资产占位符,而另一些则有可编辑的订阅表单(例如,时事通讯注册、产品更新)。欧宝体育在线首页

英雄向中心

英雄向中心布局使用flexbox在中间组织一个标题,在左边组织一个段落和呼吁行动按钮,在右边组织一个占位符图像。

英雄左行

英雄左行布局使用flexbox在左侧组织标题、段落和呼吁行动按钮,在右侧组织占位符图像。

英雄向右

英雄向右布局使用flexbox在左侧组织一个占位符图像,在右侧组织一个标题、段落和呼吁行动按钮。

英雄堆栈

英雄堆栈布局在堆栈中组织标题、段落、呼吁行动按钮和占位符图像。

英雄订阅了

英雄订阅了布局使用flexbox组织标题、段落、注册表单,左侧是“注册与谷歌”链接,右侧是占位符图像。

英雄订阅吧

英雄订阅吧布局使用flexbox在左边组织一个占位符图像,在右边组织一个标题、段落、注册表单和“注册与谷歌”链接。

英雄没有图像

英雄没有图像布局使用flexbox将标题、段落和呼吁行动按钮置于部分的中央。

现实生活中的英雄例子

Figma网站首页的英雄部分,在左边有一个Figma的描述,在右边有一个装饰性的图像。

团队

有两种类型团队布局。团队布局是展示团队不同成员及其姓名、角色、bios等的部分。

团队圈子

团队圈子布局在顶部有一个标题和段落,并使用网格在每个图像下组织圆形占位符图像、团队成员名称和组合的团队成员信息。该布局有6个可编辑的团队卡片。

团队滑块

团队滑块布局有一个标题和段落在顶部和一个滑块下图,带有6个占位符团队块。每个团队块包括一个占位符图像、团队成员名称、团队成员简介和“我们可以如何帮助您”文本链接,可以编辑该链接以显示不同的行动呼吁。

标志

有5种类型标志布局。它们通常用于展示合作伙伴公司或客户的标志,尽管它们也可以包括奖状、图片等。

所有5个logo布局都包含logo占位符,可以用客户的logo替换,其中2个布局有客户证明容器。

标识引用块

标识引用块布局使用flexbox在左侧组织一个占位符客户端报价、客户端图像和客户端信息,在右侧组织6个占位符标识,以网格模式排列。

标识引用分频器

标识引用分频器布局与标识引用块布局,除了客户端卡片没有预设的背景颜色,客户端报价上方的额外占位符文本为报价增加了更多的上下文。

道大标题

道大标题布局有一个标题和下面的div块,使用flexbox组织5个占位符徽标。

道小标题

道小标题布局使用与道大标题布局,除了一个小文本块取代标题。

商标没有标题

商标没有标题布局与道大标题布局,除非它不包含标题占位符。

现实生活标识节的例子

在Figma网站定价页面上展示了标识。

画廊

有三种类型画廊布局。这些可以用于在站点的一个部分中显示多个图像或视频。

前2个画廊布局的特点是一个全屏网格排列占位符图像(在桌面断点处),以及可编辑的文本和链接。最后一个图库布局使用滑块一次展示2张图片。

画廊的概述

画廊的概述布局使用有3列的网格来组织内容。左列包括标题、段落、列表和呼吁行动按钮。中间和右边的列是嵌套网格,每一行都有一个占位符图像。

画廊滚动

画廊滚动使用一个布局黏糊糊的包装器在左边,它有5个占位符链接。粘性包装器确保当图像部分随页面向下滚动时,链接将保持在屏幕上的相同位置。粘性包装器中的链接也可以是有关的部分到右侧网格中的占位符图像,因此单击链接将自动将站点访问者带到该图像。

画廊滑块

画廊滑块布局使用一个网格,在左边的列中有一个标题和段落,在右边的两个列中有两个滑块占位符图像。

滑块总共有4张图片,第一张是2张,第二张是2张。当站点访问者单击箭头或使用键盘推进滑块时,第二张幻灯片将出现在第一张幻灯片的位置。

真实的画廊例子

Webflow主网站的Designer页面上的图库滚动部分。在左边,有Webflow的可重用CSS类的描述,以及下面的客户端证明。在右侧,有8个占位符链接,其中“Classes”链接突出显示。

特性

有三种类型特性布局。您可以使用功能部分布局来展示您的公司或产品的不同功能。欧宝体育在线首页

功能列表

功能列表布局使用flexbox在左侧组织标题、段落和“了解更多”链接,在右侧组织一个列表,每个列表项中都有占位符图像和文本。

功能指标

功能指标布局使用flexbox在一行中组织4个可编辑的div块。这些div块可以显示您想让站点访问者看到的重要指标。

特性表

特性表布局包括在主比较div块上的标题和段落。比较div块中的每个比较行都是自己的网格,由2列和1行组成。这种结构允许你比较或对比产品、特性等。欧宝体育在线首页

定价

有三种类型定价布局。定价布局通常用于显示产品价格、价格比较或链接到站点上的其他产品页面。欧宝体育在线首页

价格比较

价格比较布局使用网格来展示3张不同卡片的功能列表。您可以使用此布局来比较不同定价计划的定价和功能。每张卡片都包含一个占位符图像、标题、副标题、价格文本块、段落、“与专家交谈”按钮和列表,您可以编辑这些按钮以突出计划的功能。

定价物品

定价物品布局使用flexbox将3张卡居中。你可以用卡片来展示产品及其指标。欧宝体育在线首页每张卡片左侧包含一个占位符图像,右侧包含一个内容包装器。内容包装器包括产品标题、大字体价格和定价细节等元素。欧宝体育在线首页

定价的概述

定价的概述布局包括居中的标题和段落,以及下面的网格。网格包含3个定价卡,每一个都有一个占位符图像、标题、段落和一个“了解更多”链接。

证明

有6种类型证明布局。这些通常用于显示产品或服务的奖状。欧宝体育在线首页布局包括标题占位符,作者姓名和图片,以及引用。

证明列黑暗

证明列黑暗布局有一个标题和一个网格,其中包含3个证明块。左边的证言块比较大,可以用来显示最重要或最有影响力的证言。它具有一个很大的占位符图像、引用、作者名和解释文本块,您可以使用这些文本块包括作者的标题或公司。右边还有另外两个较小的鉴证,每个鉴证都包含一个较小的占位符引用、图像、作者名和解释文本块。

证明列光

证明列光布局有一个标题和3个等大小的证明卡安排使用1行网格。每个证明卡都有占位符引用、图像、作者姓名和作者职称。

证明图像左

证明图像左布局显示一个主要的证明。它使用flexbox在左侧组织占位符图像,在右侧组织证明介绍副本、引用、作者名称和作者职称。

证明滑块大

证明滑块大布局使用一个滑块元素和4个占位符证言。每个滑块卡片左侧有引用、作者名称、作者图像和作者职称,右侧有一个较大的图像。

证明小滑块

证明小滑块布局有一个居中的标题和段落,在它们下面有一个滑块。每张证明卡都有引用、占位符图像、作者姓名和作者职称。每张幻灯片有2个奖状,在这个布局中总共有4个奖状。

证明堆栈

证明堆栈布局使用flexbox展示一个单一的,重要的证明。该布局包含介绍性介绍文本、引言、作者图片、作者姓名和作者职称。

现实生活中的例子

Webflow网站主页上的一个证明示例。

页脚

有三种类型页脚布局。这些布局通常用于显示网页链接(如隐私政策、条款和条件等)副本、社交媒体链接和网站主要内容下的版权信息。

页脚黑

页脚黑布局使用flexbox和网格来显示重要的链接和信息。左边是一个公司标识的占位符图像,右边是一个包含3个部分(“公司”、“资源”和“关于”)的网格,以及社交媒体链接。该布局还包括显示版权信息的部分。

页脚光

页脚光使用flexbox显示重要链接和信息。左边有一个公司标志的占位符图像,中间有两个下面有链接的部分(“公司”和“快速链接”),右边有一个表单,网站访问者可以输入他们的电子邮件地址来订阅你的内容(例如,产品更新,每月通讯等)。欧宝体育在线首页该布局还在主页脚下面包含一个区域,用于显示版权信息和社交媒体链接。

页脚订阅

页脚订阅布局包含3个水平部分。顶部部分包含一个更大的订阅表单。中间部分包括5个导航链接和社交媒体链接。底部部分显示版权信息,一个链接到“使用条款”,一个链接到“隐私政策”。


真实的页脚示例

Figma网站页脚包含Figma标志、社交媒体链接和4个部分:用例、探索、资源和比较。
尝试Webflow——它是免费的
Baidu
map