Building Crazy Header with Webflow

Learn Webflow the FAST way with our full Webflow Masterclass course - bit.ly/3VQJFys
In this video we’re building a header from dribbble so you can see exactly what goes into making something this creative. First we’ll take a look at the figma file where I rebuilt this header using autolayout, then we’ll jump into webflow and rebuild it so you guys can see exactly how the pro’s do it.
Original Shot:dribbble.com/s...
Figma File if you want to try and rebuild:www.figma.com/...
📽️ CHAPTERS
00:00 - Intro
00:17 - Overview of the design
02:26 - Recreating the layout in Webflow
11:47 - Adding a relative H1& image
15:50 - Adding the nav bar
20:36 - Other brake points
Have questions? Let us know in the comments!!
📱 Find us on SOCIAL MEDIA
Flux Academy's Instagram 👉 / flux.academy
Arnau Ros Channel 👉 / arnauros
Thanks for watching our video!
#webflow #webdesign #websitedesigner #webdesignbeginner #figma

[@halolabtv]

Thank you so much for using our Dribbble shot in your tutorial! We appreciate the recognition and are happy to see that Halo Lab's work inspired you. The tutorial is fantastic. It's great to see how you brought our design to life in Webflow. The way you explained everything is so easy to understand. We're sure it will be a valuable resource for many designers!

[@FluxAcademy]

Keep up the great work!

[@PaytonClarkSmith]

Love these live walkthroughs. It’s fun to see your thought process through every part of this. Well done 💪🏼

[@ArnauRos]

Let me know if you have any questions!

[@Herchioma]

Thank you for the tutorial, how would it look on mobile?

[@ducksquidbat8315]

Not only the mobile issue but where is the user’s eye drawn to? I’d genuinely not know where to look. Creativity over practicality isn’t good

[@ArnauRos]

Sure! Mobile would probably be completely different using more pragmatic layouts - that was not the purpose of the video, but more of a how to use webflow to complete a design like this!

[@kokoba5084]

Can i please know how do you calculate how much to bill a client for making a website 🤔? This has always stucked in my mind and the answer can be a good video as well

[@nikolaszsz]

Thanks for an amazing tutorial Arnau! Maybe you already know this, but little Figma tip: if you hold SPACE while moving elements, they won't interact with frames (like on 0:56).

[@dannleal]

This was pure gold. Thank you, Arnau! Great content, pretty simple. I had a little bit of front-end background prior to learning Design, so it just makes even more sense. Love the simplicity! Keep up :)

[@ArnauRos]

Thanks Daniel!

[@staticmotion1628]

im finally getting a good hold on webflow as far as design and struture but i would love to see a video on after the main desktop is done how would you go about scaling something like this down being that this design is a lot of non boxes next to each other like how do you deal with "absolute postioned" images or layers over each other when scaling down and keeping the design i know you explained a little in this video but indepth video would be amazing hope this makes sence and love your videos thanks

[@suman121069]

waiting for the mobile version shortout

[@ljubov_studio]

Now this is how you write a title, Flux :D

[@CaioGonzalez-sv3md]

tell me you are a designer without telling you are a designer "i'm not gonna style the button right now" 2s later "okay just gonna style a little" hahhaha. Great video and very easy to understand how to structure from autolayout to webflow!

[@ArnauRos]

TRUTH!

[@mariorruiz]

Cool and all but what about responsiveness?

[@suman121069]

nicely explained. Thank you so much 👍

[@yalord5378]

Thanks

[@mattmatt_mm]

Nice too see you in flux Academy

[@ArnauRos]

Thanks Matt!

[@mahdibeldjoudi3269]

This video is so underated

[@olaitankolawole5483]

Great video there....many thanks man!

[@hellobont]

Great video man! First video I see about Webflow. Have you tried Readymag? Any thoughts on it? I feel it's much more intuitive but just starting to test no-code tools.

[@Fostit]

Could you please make a full webflow tutorial from actually getting the domain name, hosting and going live?

[@osks]

Sloooooooow down bro! Some of us don’t feed on Red Bull!

[@ivankostakijev9774]

Thanks bro!

[@montrelliondakeyz]

Can you please do a tutorial on the short cuts you using in webflow. This efficiency is the stuff of legend and I want to be legend 😆

[@ArnauRos]

To bring up the search bar use command + K!

[@dragonflyjones5023]

First! And excited to check this out

[@Teryak]

Great .. Thank you 🌹

[@samueluebersax8528]

And now make it mobile responsive. this would be interesting.

[@VS-in9us]

At first I didn't realize it's Flux channel🙂Arnau does amazing job! And I know it's a bit irrelevant but OMG he is so incredibly handsome😍😍😍

[@zeeq7331]

Wow dude you are f a s t haha. Thank you so much for this though! Now i understand why designing autolayout in figma would make things easier when building in webflow.

[@AlabaOdu]

Until I check the comments here, I didn’t know this was flux channel

[@cosmincraciun3769]

How do you solve the GDPR compliance problem when building Webflow websites for EU clients?

[@gargulec6085]

Check out that Finsweet's livestream kzbin.infor27OjGkmb7w?feature=share

[@floyd1411]

So amm .. i am really struggling to figure out which to start learning for a web design business. like i cant understand how does one purchase a hosting and domain name and then transfer that to someone else? :/ any advice is good advice.. please and thank you :)

[@ash1015]

Was this navbar possible to make with columns?

[@rohansingh4327]

i am very bad in positioning like relative and all, I need a video of it explaining how to use them

[@AlabaOdu]

You’re gonna learn better with webflow universes

[@singhhoop]

Mobile first tho G

[@welling1]

Just build it in HTML/CSS.

[@evzmeniy]

Great!!! make more videos with complex designs

[@hellobont]

Great video man! First video I see about Webflow. Have you tried Readymag? Any thoughts on it? I feel it's much more intuitive but just starting to test no-code tools.

[@VS-in9us]

At first I didn't realize it's Flux channel🙂Arnau does amazing job! And I know it's a bit irrelevant but OMG he is so incredibly handsome😍😍😍