购物车图标
7月11日

Webflow的提示和技巧从我们的第一次

作为设计师,网页设计的广阔世界可能是一个棘手和陌生的领域。

听这篇文章

我们在未来的我们在Web设计中vwin德赢 app没有坚固的背景,所以当时间来设计并开发一个客户的网站时,我们发现自己感觉有点不知所措。通过以下方式工作:整体设计,用户体验,复制和移动布局。让我们不要忘记各种工具,插件和软件选项,以便在那里选择来构建网站。

幸运的是,有一个很棒的工具可以帮助你轻松地设计令人印象深刻、响应迅速的网站,即使你不知道如何编码:Webflow。

我们首先使用Webflow建立汉密尔顿家族酿酒厂的网站打造品牌系列.乍一看,Webflow似乎和学习CSS、HTML或Javascript一样令人生畏。但在和它相处了一段时间后,我们爱上了它。我们用得越多,就越容易建立一个网站——没有任何一个人有严肃的编码背景。我们更习惯于设计像Photoshop和Illustrator这样的程序,所以我们惊喜地看到Webflvwin德赢提不了钱ow的外观和功能是多么像我们最喜欢的程序。在构建过程中,我们注意到一些使Webflow真正从其他站点构建器中脱颖而出的东西。

1.F第一件事首先:Flexbox

Flexbox Layout是一个CSS模块,可以让你在不同的屏幕尺寸上灵活地调整多个列。如果你有网站建设的经验,你知道这一部分可能会有点令人沮丧。

通常,如果没有Webflow,您必须计算父容器和所有子容器的宽度来设置像素。每次屏幕调整大小,你都得再做一次。一次又一次。

但是使用Webflow,我们只是将父容器设置为可伸缩的,并将子项目的宽度设置为百分比。这些容器可以自动调整大小,无需我们手动调整。就是这样!

Webflow还集成了CSS网格,我们听说它比Flexbox更适合用于大规模布局。


2.简化了自定义内容类型

在构建Hamilton Brewery网站时,我们希望让Josh和他的团队可以方便地从在线菜单中添加、编辑和删除啤酒,而不必进入每个单独的页面进行更改。

WebFlow具有内容管理系统(CMS),允许您轻松地进行自定义内容类型。对于汉密尔顿网站,我们为贝尔斯创建了一个新的CMS集合,并定义了每个啤酒需要显示的字段。这将包括啤酒名称,酒精内容,简短描述和标签颜色等内容。

为了样式化条目页,我们使用Webflow称为集合页的东西。可以将它们看作是重复出现的内容片段的模板。所以在这种情况下,所有的啤酒汉密尔顿将共享一个类似的页面布局。

一旦页面拥有了我们最想要的外观和感觉,我们就点击发布并在后端添加剩下的啤酒。有了Webflow的CMS, Josh和他的团队可以为他们的啤酒创建一个新页面,而无需改变页面设计设置。

3.使用符号修改页面布局

在大多数与页面构建器的案例中,您必须单独构建每个页面,创建一些非常繁琐的工作。页面构建器跌倒,WebFlow完全指甲。

Webflow包含CSS类,这样你就可以创建在你的网站中反复使用的符号。您可以保存您的符号在您的首选菜单,并携带所有编辑您的符号瞬间。

虽然我们正在建造汉密尔顿网站,但我们发现了一点技巧。完全自由裁量权:这可能不是符号的预期用途,但无论如何我们都会告诉你这个。

我们意识到我们经常重新使用网站网格的碎片和部分,而不是复制和粘贴元素,我们将它们保存为符号。它会自动保存在菜单中的每件作品,随时可以拖入地图集。然后,我们将其与符号拆除,因为每个部分都有自己的内容。

如果您需要视觉解释,请查看下面我们通过它的视频。

4.快速创建惊人的动画

每个人都喜欢一点眼睛糖果,动画肯定可以拍摄网站的视觉效果。WebFlow有助于您快速轻松地创建引人注目的动画。

我们在汉密尔顿网站上添加了一个悬停动画,通过关键帧的弹出元素和调整每个开始和结束的位置。我们所要做的就是创建元素并添加一些设置。没有代码,没有压力。这么快就能制作出这么简单的动画,真是太让人兴奋了。

这些只是一些你可以在Webflow中做的令人惊奇的事情。最好的部分?在你的网站上线之前,它是完全免费的。我们肯定会在未来的项目中继续使用Webflow,因为如果我们不这样做,那就太愚蠢了。让Webflow免费试用一下准备好永远改变你设计网站的方式吧。

想看到我们使用Webflow在行动?

关于
本烧伤

本·伯恩斯是一位设计师,他帮助成长型企业增加收入,扩大品牌知名度,并赢得更快乐的客户。目前,他担任the future的首席运营官和Blind的数字创意总监。vwin德赢 app

欢迎乘坐!我们很兴奋,拥有你。
哦,哦,出了什么问题。尝试再次提交表格。