How To Structure Websites Efficiently With Webflow

📘 Free e-book "The Blueprint For Insanely Successful Webflow Designers" 👉 bit.ly/48OESmV
Learn how to build Custom designed websites with Webflow:
zpr.io/gQUed
🤑 FREE RESOURCE!
⚡Work faster in WEBFLOW using this style guide. Download here 👉 bit.ly/38g438u
-
📱 Find us on SOCIAL MEDIA
Ran's Instagram 👉 / ransegall
Ran's X (Twitter) 👉 / ransegall
Flux Academy's Instagram 👉 / flux.academy
Flux Academy's TikTok 👉 / fluxacademy
-
Gear & Book Recommendations: bit.ly/2ohFOuj

[@stephanbueler5051]

More best practices please!

[@artureldib7493]

Finally somebody made a tutorial about that, thanks a lot - so helpful!

[@seancampbell4648]

This is probably the most timely video ever as I struggle to make things responsive haha thanks for this!

[@bravenick]

Sean Campbell This video makes me really think about getting webflow course from Ran😉

[@hcreateutube]

Just started with webflow yesterday and this is so quick and helpful. Thanks.

[@nickmartinSFX]

Such a great video Ran! I keep coming back to it.. I feel like I've been scratching around in the dark for so long and with this one video you just turned on the lights! Many thanks for making this !

[@11vag]

The value of your videos is massive. Thank you.

[@PaytonClarkSmith]

Simple and to the point 🔥 sticking to a solid site structure definitely saves time and keeps your sites consistent. Thanks Ran 👍🏻

[@matejrovis5525]

That's great content Ran! I would love to see more of these little Webflow tutorials, maybe like like a teasers for webflow masterclass for those who aren't decided on purchase yet

[@sonimoretti]

This is the kind video I was looking for in all Webflow University. Thank Youuu !!

[@jimmykoulmann4677]

You change our lifes Ran, thank you to be there and helping with your top tricks.

[@DJalem]

This is exactly how i structure every project... coming from a frontend background. I usually build websites with GatsbyJs/React/styled components/sass and headless cms but webflow blew me away. I'm now into learning this awesome tool. Thank you 👍

[@Caden_Burleson]

I've had to come back to this tutorial so many times. It's such a big help!

[@masonperez4658]

Incredible how one little trick can make that much of a difference, great vid!

[@nightlight8201]

EXTREMELY helpful. would you consider adding more of this type of “best practices” content to the masterclass?

[@dumuniz]

That's very simple, but makes a big difference. Thnaks Ran!

[@ErikYorgason]

Man why couldn't I have found this video like 2 weeks ago... I started my first webflow project and this makes it so much easier. Thanks!

[@hugoingelhammar6163]

After one year of struggeling I eventually figured out these principles myself. But this video was a blast for beginners starting out in Webflow, and would have saved me alot of time last year

[@WilliamWeekesJr]

Wow! this made so much more sense. I truly appreciate your time. Thanks

[@bravenick]

So nice video! Thank you for sharing, really straight to the point.

[@hhiggins2639]

This helped me so much!! I will soon sign to your course. I'm looking forward to it!!

[@sassisammi]

Always helpful! Thanks Ran!!!

[@JohnHReed-xp4dy]

Wow. That really helped a ton!

[@peanutbutterfalcon7016]

man this is going to make a world of a difference...thanks!

[@Rirah]

This was brilliant! Thank you!

[@MrAndyGA]

Great video, thank you for all the industry info you provide your viewers. So I’m just wondering then, when would you use a div block and why?

[@elisaminozzi1398]

Wow very clear and efficient method. Thank you a lot!

[@fernandomedeiros744]

THIS was a helpful video! Would be great to see more best practice videos like this for Webflow.

[@swiftzy3653]

Thanks soooo much dude, Im building a website for my agency and it’s taking soo long, this is HUGE and will save me so much time

[@lenzocorner4467]

This is extremely helpful! Thank you.

[@23919711]

Great video, you make it so easy to understand, thanks so much.

[@hoshinorobin]

Super clear and helpful! Thank you.

[@mrzachblk]

Very Helpful!!! Thanks, Ran!

[@lovejko]

A great lesson. Thank you Ran!

[@danilo_z]

So useful! Thanks Ran!

[@Skxng]

Awesome Content Ran!

[@changecollar]

This is the tip i want.. This is really help as a starter in webflow

[@vidronin]

Thank you so much for this video, this will really make my workflow go a bit faster in creating my pfolio.

[@Red_Rebel]

Wow this saved my life a lot! Thank you so much!

[@1WillyDAVID]

awesome, thanks Ran, really useful!

[@al3n3cula]

Anybody would be a fool to dislike this tutorial. Super useful structure tips, Ran! Love when a tutorial is short and straight to the point!

[@crowley144]

Great teaching, thank you so much for the info.

[@pietrolago]

Excellent video! Thanks!! 👏🏻👏🏻

[@backpacker57]

Best explanation yet!

[@ayrtonart]

fast and clear. Congrats

[@ckochek]

Hugely helpful Ran!

[@jevgenisuija]

Cool! Thanks for tips!

[@ramonalisa4187]

I can't wait to get enrolled in your course when it re-opens

[@chloelitchfield7089]

So helpful! You're the man!

[@jacobnorman5420]

Amazing and much needed video.

[@wildschieters3692]

lmfao this 9 min video taught me more than other 30min+ 'crash courses'

[@Rirah]

haha same here

[@kaiserloiro]

+1

[@ragulan2929]

Amazing, loved it!

[@yea_shh]

You are the best man! Just wanna let you know.

[@thabangjphosa]

Wow, thank broo, this helps a lot

[@marlonbrando205]

Good as always, thank you for good content :D

[@manuels8138]

Thanks! this is a great tip

[@rmcellig]

Great video! Thanks!!! I'm still not clear when to use a div and/or a container. I always thought the structure was section/container/div but I see that you can just put a section/div and that's acceptable?

[@JohnBeatty]

Nice! Thanks, Ran!!

[@johnleighdesigns]

I always find myself coming back to this to remind me! Would anyone have any thoughts on wheether it matters if you put padding on the section or maybe margin on the container?

[@bilboloko100]

Thank you so much!

[@DannyDaRocha]

Exactly what I needed ! Thanks Flux

[@FluxAcademy]

Glad to help!

[@caroldanvers265]

Ran, I am learning so much from this video. But i wish I watched it earlier because the tablet view seems a little off for me. How do I set the break points to be responsive?

[@karinahernandez9132]

Thanks, I love youuuuu, I was struggling a lot ):

[@sorianosoul]

HI, thanx for the tips!✌ Question: how do you deal with cookies banners in Webflow ?

[@yuzen6812]

This is so important!!!

[@DanBorgia]

Good for you to show an alternative to containers. What I don’t like about default containers is that you can’t edit the max-width.

[@pamelam2470]

Thank you very much for this! I'm new with webflow and this was very helpful ! 😃 Also, I love your logo

[@FluxAcademy]

Happy to hear that! And thanks! 🙌

[@jneb748]

Would be great to have a 'webflow, start here' playlist. Watched the mental model video first but not sure which to watch next so would be good to have a playlist in the best order to learn from square one.

[@Rigson]

It's also a good idea to use Semantic HTML tags for your divs. Wrap everything except for your Nav and Footer in a div and then inside of that, wrap your content in an div. Then make each section within the article a div since you can't nest Webflow's section element.

[@losbones]

Ah, I was trying to think of the downside of using Webflow section. Not being able to nest a Webflow section is a reason not to use Webflow section. Same as I see reasons not to use Webflow container because of the overly small max-width.

[@Rigson]

@@losbones Yeah I just stick to the div element over the section and container elements.

[@rmcellig]

@@Rigson so you don't use sections at all? You just start out with dive?

[@losbones]

When using your example structure of

[@ozzy2k11]

Great content as usual Ran, any chance you could do one on how you create and re use style guides for your projects?

[@FluxAcademy]

will do

[@jamessmith_321]

this is super helful！！thanks a lot!!!

[@ACCA2016]

Thank You so much! Body, Section (height), Container (width), Layout and Content. I have been searching for this type of information for a long time. Once again, thank you!

[@FluxAcademy]

Glad it was helpful! 😀

[@ACCA2016]

@@FluxAcademy one question, should I treat the nav bar as layout or content? Thx

[@malu.maluqui]

Thank youuu!!! Great!!!

[@FirebrandVOCALS]

Excellent man! Cheers ☘️🍻☘️

[@anibalmercado7427]

Thank you, I makes me consider in entering on web design XD

[@avelinileva]

Great. Thank you :)

[@brianp.6237]

A great video can you do one on dynamic social media buttons that populate on a user profile after its filled in on the user dashboard?

[@justkailash]

Awesome tips..Loved it.. just made a account on webflow and start learning.. I have lot of questions about it.. and will plan to get your paid tutorial series.. I need to arrange some money for that.. BTW one question here.. you used "Section" title for each section.. but this is how you will see Section-section-section....... in the layer panel. so how will you identify through that.. I know you used secondary tag but for that i need to look at the properties panel..

[@giuntamarco]

Super Helpfull

[@jasonhebert1656]

I feel like a more efficient way to make things responsive is making your container width in the actual width box and setting the. max width to 100% that way you don't have to keep changing it on different screen sizes. Just a little tip :)

[@Caden_Burleson]

Because it will still display on left and right and the text will get very small no? Maybe I'm doing what you said wrong?

[@altingrc1924]

Can you explain it in more detail please

[@sidedishfriend]

Thank you so much!

[@stinkleaf]

Do you rename your selector ids? or leave them default?

[@amisadaipc691]

Thanks!

[@Enginerosemusic]

Use command k if you need to add any element its very much easier.. also check the keyboard shortcut for more shortcuts thanks ..

[@laurenhawkins470]

Aw man time to go redo the entire project. LOL thanks for this!

[@rcautofinish]

This guy gets it ^

[@DANNFIGDESIGNS]

Thank you. Just what I needed. Now it's time to rebuild. 🤣😳

[@hurric4n3ike]

GOD BLESS YOU G!

[@julianriise5618]

So wow, great awesome

[@learnandhavefun3754]

This is so good

[@FluxAcademy]

Glad it was helpful! 🙏

[@chandinicreates]

Hi, thank you! I am not a web designer but recently i hav got a task for designing the background images for the website, i tried some tools and it is not responsive, is it possible to just design a background in Webflow??

[@imanmachukwu]

Great video. Could you assist me with downloading the free resources on Flux's website? I couldn't download any of the free resources. Including the design portfolio handbook.

[@tenminutetokyo2643]

This tech sit never ends.

[@werallfools]

You're the best instructor! Love from Turkey. Feel free to drop a message if you are in Turkey or Toronto Canada, I will personally give you a tour if schedules and locations align! Stay safe. Much love.

[@Demirci91]

So after you create Web page can you modify it with code?? If we want to

[@laboratory-ob5np]

bestttt thank you

[@FluxAcademy]

You're welcome 🙏

[@JuanRojas956]

How do you centre the text vertically and horizontally beside the photo?

[@jmula1963]

holy shit u jus saved me thnk u fam

[@sofijae.ivsina3402]

Thank you! I need to see it before I create my first website, bruhh. Next website will be correct 😂

[@davidarmstrong8383]

Why would you create a div instead of a container and set the container width? Or is there really no difference?

[@jarich7483]

whats the difference between maserclass and webflows official tutorials?