Webflow:构建器简要概述

什么是 Webflow ?这是一个网站开发构造器。该服务提供现成的积木,使组装变得清晰、简单。使用这些工具,您可以创建在线商店、名片、作品集和其他项目。在本文中,我们将分析该服务的功能,并展示如何创建销售页面的简单示例。

在 Webfolow 注册

在您可以使用这些功能之前,您首先需要注册,您可以通过 Google 进行注册。注册后,您需要回答几个问题来确定项目类型。

  1. 您要为谁创建网站:公司、客户、您自己。
  2. 你是学生吗? “并不真地”。
  3. 网站类型:商业或在线商店。
  4. 员工——请回答“是”、“否”。

完成所有步骤后,将打开一个构造器,您可以在其中从头开始免费创建一个网站。界面为英文。控制基于拖放技术和鼠标控制。将对象转移到白纸上或直接从列表中选择它们。

最初,网站由块组成,这使得布局和适应移动设备变得更加容易。让我们添加一个元素,示例在屏幕截图中。

 

通常,页面应该包含一些文本,为此,Webfolow 具有排版。让我们输入文本。所有对象都将放置在选定的容器中。

通常,新区块的创建是按照从上到下的顺序进行的。但您可以在右侧面板中重新配置:

  • 居中或左对齐。
  •  同一级别的对象 – 为此,有 Loyout 选项,以及附加参数水平和垂直。

 

每个创建的对象都有固定的宽度和高度。您可以 手机号码数据 在设置中更改参数。如果您查看上面的示例,您会发现按钮占据了其长度的整个区域 – 现在高度参数为自动。您可以用像素、百分比或其他单位指定高度。下面我们将该值设置为50px。

 

样式和类别

所有元素均设有样式。它们可以被定制并保存为一个类以应用于其他对象。该按钮还有一个类“Button”,当我们进行更改时,样式也会发生变化。让我们将颜色改为紫色。创建新按钮时,只需指定“按钮”即可,更改将会生效,包括宽度和高度尺寸。

 

该课程可以让你更快地工作并避免重复动作。在 Webfolow 中,只要将对象放置在画布上,就会默认创建样式。您可以在“样式选择器”选项卡中找到这些样式;要查看代码,只需将鼠标悬停在选择器上。

 

样式选择器中有两个可用的图标。汉堡菜 90 年代的物品。让我们怀旧一下吧? 单 – 显示使用此类的对象列表。扳手——改变类的名称。

成分

类允许您重复使用样式,但组件可以包含带有已配置样式的链接、按钮、文本的整个容器。要创建这样的组件,您需要选择一个容器并单击面板中的“创建组件”按钮,在弹出的面板中输入一个名称,然后单击“创建”。

 

然后只需单击相应的按钮,就会出现 意大利电话号码 一个滑动面板,其中存储了组件列表。

 

数字设备的适应性

构造函数的优点在于它已经拥有一套用于创建适应性的内置工具。您无需手动编写代码即可使您的网站在浏览器和数字设备中良好显示。要进行测试,您需要在顶部面板中选择适当的按钮,工作区域将自动调整到所需的设备。

 

让我们启动如上所示的“移动肖像”并查看结果。非常方便,可以让您评估字体在不同设备上的显示效果。

下一个按钮“切换预览”切换到预览模式,即用户如何查看网站。额外的面板被隐藏,只留下顶部的工具。

可以通过抓住边缘并用鼠标移动来拉伸和压缩工作区域。所有重要按钮均显示在下图中。

 

Webfolow 工具

构造函数允许您从头开始免费创建一个网站,为此,您可以使用一些块来创建任何复杂程度的项目,而无需编程知识。要访问它们,您需要单击加号并转到元素部分。

 

您需要自己从头开始创建网站的分步说明。在上图中,线索以数字表示,后面跟着描述。

  1. 结构 – 允许您创建更结构化的网站,例如 V Flex 和 H Flex 在容器内对齐对象。
  2. 基本 – 基本元素:div、列表、链接(块)和按钮。
  3. 排版——处理文本:标题、段落、链接(文本)、引用(相当)、富文本——包含图片和视频的内容,适合文章。
  4. CMS(集合列表)是一种设计动态内容的方式。用户可以上传一个集合,然后向其中添加对象。
  5. 媒体——加载视频、图像和动画。
  6. 表单——字段、输入、验证码、单选按钮、反馈表单和其他元素。
  7. 高级– 滑块、图库、搜索、社交网络按钮。

 

布局——在这里您可以找到现成的模板,可以使用它们而不必从头开始创建所有内容。

 

页面——添加页面。免费版本仅提供 2 页。

 

导航器——存储图层,可以从列表中选择并编辑,也可以重新排列。

这些都是您需要了解的基本工具。

发布

网站准备就绪后,即可在互联网上发布,为此有一个“发布”按钮。托管网站的过程包括几个步骤:准备、优化 HTML、CSS、打包所有内容和 CDN 部署。一旦所有流程完成,该站点将获得一个唯一的三级域名,其中包含所有者的姓名、标识符和建造者的姓名。

要更改您的域名,您需要购买资费计划。 

当客户仅对用户的技能感兴趣时,建议使用第三级进行测试和投资组合设计。

对于严肃的项目,我们建议购买第二级,其中包括“域”和区域之一“com,ru,rf”。有三个论点支持这一观点。

  1. 该网站在搜索引擎中的推广速度更快。
  2. 二级域名的信任度更高。
  3. 如果名字简单,就会被记住。他们将通过在浏览器行中输入 URL 地址来跟踪直接链接。

当网站准备就绪并发布后,您可以使用链接测试其功能。

 

可以随时通过单击“取消发布”来取消发布该资源,此后,当访问该网站时,将出现 404 错误(页面不存在)。要重新托管,请点击域名,选中“Staging”块中的复选框,然后点击“发布到选定的域”。

如何创建销售页面?

有两种类型的站点。推出博客的目的是为了收集流量和销售广告。商业——最初旨在销售。当产品很多的时候,就开设一个网上商店。对于单个产品,创建一个登陆页面。

后一种选择节省时间和预算。布局可以在一天内完成,并且成本极低。在这种情况下,优势是显而易见的:如果你设法引起用户的兴趣,那么他们就会成为购买该产品的目标客户。

销售页面可以带来比通过上下文广告赚钱的网站更多的收入。因此,信息资源所有者通常除了主站点之外,还会推出单页站点,以重定向流量并从付费内容的销售中获取利润。

在 webflow 构造函数中,您可以从头开始免费创建一个网站,而无需为该网站付费。

让我们制作一个测试页面。该服务拥有现成的图层集合,您可以在其中添加导航栏、价格、评论等。建议使用现成的库进行快速开发。我们的登陆页面将包含以下内容:

  1. 标头。
  2. 菜单,我们将在页面上只有锚点导航,用户将自动移动到一页内的所需部分。
  3. 视频演示——我们将展示有关产品的全面信息。
  4. 关于作者或团队——添加参与产品创作的人员的名字、姓氏和职业。
  5. 服务列表。
  6. 价格——我们设定价格,为此有一个现成的价格模板。
  7. 问题答案——发布用户积累的问题和答案。
  8. 反馈表。
  9. 评论是用户的意见。视频评论经常用于销售,这可以提高产品的评级。
  10. 页脚——联系信息、法律数据、版权、隐私政策、重复菜单。
  11. 聊天是一个弹出表单,客户可以在其中提出问题。

为什么在 webflow 中设置登陆页面?免费计划仅允许您创建两个页面。因此,单页网站是展示服务如何运作的理想选择。以下是有关如何免费从头开始创建网站的分步说明。

标题

该库没有标题层,因此您必须使用 div 手动创建标题。为此,请转到“元素”部分并选择 div 块。

 

新的容器是标题,高度为 300px。建议提前在设置中设置尺寸。添加 div 时它不会显示在工作区中,要编辑它,请转到导航器,单击图层并将高度设置为 300,如图所示。

 

发表评论

您的邮箱地址不会被公开。 必填项已用 * 标注

滚动至顶部