4 min

Webflow Tips and Tricks From Our First Time

Ben Burns

As designers, the wide world of web design can be tricky and unfamiliar territory to enter. Fortunately, there's Webflow.

Webflow Tips and Tricks From Our First Time

A lot of us at The Futur don’t have sturdy backgrounds in web design, so when the time comes to design and develop a website for a client, we find ourselves feeling a little overwhelmed. There are so many areas to work through: the overall design, user experience, copy, and mobile layout. Let’s not forget all of the various tools, plugins, and software options out there to choose from to build websites.

Luckily, there’s an awesome tool out there that helps you easily design impressive, responsive websites, even if you don’t know how to code: Webflow.

We first picked up Webflow to build the Hamilton Family Brewery’s site from our Building a Brand series. At first glance, Webflow seemed just as intimidating as learning CSS, HTML, or Javascript. But after spending some time with it, we fell in love. The more we all used it, the easier it became to build a website—without any of us having a serious background in coding. We’re much more used to design programs like Photoshop and Illustrator, so we were pleasantly surprised to see how much Webflow looked and functioned like our favorite programs. During the building process, we noticed a few things that made Webflow truly stand out from other site builders.

Webflow: Adjusting element spacing for mobile

1. First Thing’s First: Flexbox

The Flexbox Layout is a CSS module that allows you to visually adjust multiple columns to be well, flexible, across different screen sizes. If you’re experienced at building websites, you know this part can get to be a little frustrating.

Normally, without Webflow, you’d have to calculate the parent container and all of the child container’s widths to set pixels. And each time the screen would resize, you’d have to do it again. And again.

But with Webflow, we just set the parent container to flex, and set the child item widths as percentages. The containers would just scale to fit automatically without us having to manually adjust them. That’s it!

Webflow also has integrated CSS grid, which we’ve heard is even better for larger scale layouts than Flexbox.

Webflow: Tablet breakpoint with updated typography

‍

2. Custom Content Types Made Easy

While building the Hamilton Brewery website, we wanted to make it easy for Josh and his team to add, edit, and remove beers from their online menu without having to go into each individual page to make changes.

Webflow has a Content Management System (CMS) that allows you to make custom content types painlessly. For the Hamilton site, we created a new CMS Collection for the beers and defined the fields each beer would need to display. This would include things like the beer’s name, alcohol content, a short description, and label color.

To style the item page, we worked with what Webflow calls Collection Pages. Think of them as templates for recurring pieces of content. So in this case, all the beers for Hamilton would share a similar page layout.

Once the page had the look and feel we wanted most, we hit publish and added the rest of the beers in the backend. With Webflow’s CMS, Josh and his team can create a new page for their beers without ever having to change the page design settings.

Webflow: Mobile view with stacked sections

3. Hack Page Layouts with Symbols

In most cases with page builders, you have to build each page individually, creating some pretty tedious work. Where page builders fall short, Webflow totally nails it.

Webflow embraces CSS classes so you can create symbols to be used repeatedly throughout your website. You can save your symbols in your preferred menu, and carry all edits throughout all of your symbols instantly.

While we were building the Hamilton site, we discovered a little trick. Full discretion: this might not be the intended use of symbols, but we’re going to tell you this anyway.

We realized we were reusing pieces and parts of the site grid pretty often, so instead of copying and pasting the elements, we saved them as symbols. It automatically saved each piece in our menu, ready to be dragged into the artboard. Then, we’d disassociate it with the symbol since each piece would have its own content.

If you need a visual explanation, check out our video below where we walk you through it.

Webflow: Responsive navigation bar on small screens

4. Create Amazing Animations, Fast

Everyone loves a little eye candy, and animations can definitely take the visuals of your website up a notch. Webflow helps you create eye-catching animations fast and easy.

We added a hover animation on the Hamilton site by keyframing the popup elements and adjusting the start and end position for each. All we had to do was create the elements and add some settings to it. No code, no stress. It was totally mind-blowing to create such a simple animation so quickly.

These are just some of the amazing things you can do in Webflow. The best part? It’s totally free to use until your website goes live. We’ll definitely keep using Webflow for future projects because, well, we’d be silly not to. Give Webflow a try for free and get ready to change the way you design websites, forever.

Want to See Us Using Webflow in Action?

ABOUT

Ben Burns

Enjoyed this? There’s more where it came from.

Get insights on design, creativity, and visual thinking.

You can unsubscribe anytime. By submitting, you agree to receive communications and to our Privacy Policy.