购物车图标
7月11日

我们第一次的WebFlow提示和技巧

作为设计师,网络设计的广泛世界可能是棘手和不熟悉的领域进入。

听这篇文章

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

幸运的是,那里有一个很棒的工具,可以帮助您轻松设计令人印象深刻的响应网站,即使您不知道如何代码:WebFlow。

我们首先挑选了WebFlow来构建汉密尔顿家庭啤酒厂的网站建立一个品牌系列。乍一看,WebFlow似乎就像学习CSS,HTML或JavaScript一样恐吓。但在花一点时间后,我们坠入爱河。我们都使用它越多,建立一个网站的越突出 - 如果我们中的任何人都有一个严肃的编码背景。我们更习惯于设计Photoshop和Illustrator等程序,因此我们很惊喜,看看WebFlows.manbetx.com看起来像我们最喜欢的程序一样。在建设过程中,我们注意到一些使WebFlow真正从其他网站建设者脱颖而出的事情。

F.第一件事首先:Flexbox

Flexbox布局是CSS模块,允许您在不同的屏幕尺寸下可视地调整多个列,灵活,灵活。如果您在建设网站的经验时,您知道这部分可能会有点令人沮丧。

通常,在没有WebFlow的情况下,您必须计算父容器和所有子容器的宽度设置像素。每次屏幕调整大小时,您都必须再次执行此操作。然后再次。

但是通过WebFlow,我们刚刚将父容器设置为Flex,并将子项宽度设置为百分比。容器只会在没有我们手动调整它们的情况下自动扩展。就是这样!

WebFlow还具有集成的CSS网格,我们已经听到了比FlexBox更大的比例布局更好。


2。自定义内容类型很容易

在构建汉密尔顿啤酒厂网站时,我们希望简单地让Josh和他的团队从他们的在线菜单中添加,编辑和删除啤酒,而无需进入每个单独的页面进行更改。

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

要符合项目页面,我们使用WebFlow调用Collection页面的工作。将它们视为用于重复内容的模板。因此,在这种情况下,汉密尔顿的所有啤酒都会共享类似的页面布局。

一旦页面看起来并觉得我们最想要的,我们会在后端发布并添加了其余的贝尔。使用WebFlow的CMS,Josh和他的团队可以为啤酒创建一个新页面,而无需更改页面设计设置。

3。与符号的黑客页面布局

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

WebFlow拥有CSS类,因此您可以在整个网站中重复使用符号。您可以在您的首选菜单中保存符号,并立即在整个符号中携带所有编辑。

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

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

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

4。快速创建惊人的动画

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

我们通过关键弹出元件在汉密尔顿站点上添加了一个悬停动画,并为每个弹出元件调整开始和结束位置。我们所要做的就是创建元素并为其添加一些设置。没有代码,没有压力。完全思考令人兴奋,以便如此迅速地创造这样一个简单的动画。

这些只是您在WebFlow中可以做的一些惊人的事情。最好的部分?直到您的网站才能完全免费使用。我们肯定会继续使用WebFlow以供将来的项目,因为,我们很愚蠢而不是。免费试用WebFlow并准备好将您设计网站的方式更改。

想在操作中看到我们使用WebFlow吗?

关于
本烧伤

Ben Burns是一位设计师,可以帮助越来越多的企业增加收入,扩大品牌知名度,赢得更快乐的客户。目前,他在未来的首席运营官和盲人的数字创意总监担任双重作用。万博1.0.0下载

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