Webflow is an instant website building software that’s you don’t need to coding that you can create an incredible website easily (actually you can coding if you made create some complex function for your website). In my opinion I think this website can do more complex than another codeless website builder, but it’s little bit harder, so don’t worry it’s easy to learning, and if you understand it you might understand website structure and style too.
First thing you need to understand that Webflow isn’t design by drag element everywhere like photoshop or XD, you have to adjust a number for padding margin or setting a layout, aligning, etc. like coding, but you don’t have to code it for whole website, you just drag element, drop in the website body, and adjust it.
Now you know about how to create it basically about drag drop and adjust. Now we will talk about the structure on web design, I can explain you in easy language like you put a small box in bigger box and put it in bigger box and bigger something like that.
Section is the largest box for website structure that just smaller than body, section are using for separate content on webpage to made designer and developer are easily to manage.
Div block is the flexible block that we can place it everywhere on website and also we can place many element inside them too.
I usually use only this two element, actually Webflow have another element like container or column that’s easily using, but I didn’t use it by the reason of limiting adjust, we can use div block and set the max width for it that’s more freely adjusting than container, because sometime I didn’t want to using standard width for container. As the same with column that’s actually I can put div block in div block and adjust the parent div block to made it like column, and it more freely adjust it.
Now we got the web structure, the next step is put some element like text, image, link block, etc. in their, just click in element tool or you can press ctrl+K (windows) or command+K (Mac) and searching for the element that you want to place in, and then drag it to the block.
After you place it you should adjust the alignment, size, spacing, etc. for made it look good like a prototype that you have design it.
And after we finish the structure and element, now we should adjust the web style to made it look incredible by your designing sense, like color, border, image background, text style, etc.
Layout for desktop actually not compatible with mobile size, for mobile mode you need to adjust new layout, text size, image size, etc. to made your content fit in with mobile screen size, and give user a good experience.
Don’t worry anything you change it in mobile size will not change on desktop size, after you click to mobile screen mode and adjust something the adjustment are separate out but if you did it by mistake you can just reset that adjustment.
