It would be nice to have rulers, guides and units for measuring padding and margins across multiple pages. If this already exists let me know. But in the mean time I will continue to improvise the old school way and just hold a ruler up to the screen!! 
3 Likes
Love your screenshot 
I’m a bit confused byt the request…
You’re supposed to use classes to keep your margins etc consistent across pages… I’ve never felt the need for guides or rulers.
4 Likes
@vincent - I see this as a very valid request. Not everyone only initially sets their alignments via a form-UI input method. Webflow should provide both types of options & tools IMHO. Satisfy both the more form-to-visual style & the more visual-to-form style designers. This in my mind would only help Webflow attract more customers. 
So far in my use, I see Webflow as the king of web-compliant modern visual web design tools, taking the best of itself, and capitalizing on some of the healthy elements from competitors like Wix (more visual-to-form based) and Squarespace (more form-to-visual based). Since Webflow for me is a well executed combination of both, I hope eventually both alignment methods/tools will be available.
Maybe even consider adding a multi-select elements/objects alignment option via nested/unifying class to make designing w/ accuracy in mind faster for us. I really do miss Wix’s auto appearing aligning lines (same ones introduced in Illustrator, Photoshop, etc…) and instead having to rely on the form-to-visual method only.
–
Dylan // Digital Liberation
+1
I’d love rulers int he webflow designer.
YES RULERS PLEASE WITH GUIDES!!
It’s possible in webydo so i guess the master tool webflow should be able todo it - would be really helpful!!!
THANKS!!!
Rulers and Guides would, well, Rule!! (and guide, haha). I’d love this feature
1 Like
Yes this would be very helpful for certain! The need for both horizontal and vertical guides that are similar in utilization to any vector or raster based software would kick ass. I can confirm Webydo has these already and then some. I favor both platforms for certain applications yet, I still feel Webflow is much more versatile in regard to possibilities. I think the widgets they have are all tremendous ideas and work very well with work flow but they forgot to fill in the gaps that bridge ideas and layout as I am aware of anyway. Or the little things that just make it more… like home - being in a very familiar environment that it or UI.
Cheers!
PicPick - All-in-one Graphic Design, Best Screen Capture Software, Image Editor, Color Picker, Pixel Ruler and More >> on-screen pixel ruler
I design only with rulers and guides : I am totally lost in Webflow just because of it … 
Can someone share some tips, a pixel-perfect solution ?
Webflow already has guides, and if you need rulers then you probably shouldn’t be using a responsive, CSS-based platform like Webflow.
Designing in HTML/CSS means designing a flow of elements. Most likely, they stack one after another. Floats and absolute are exceptions.
That’s why there is no and there will not be guides, I’m pretty sure.
Webflow already comes with a grid to help you design your pages. If you need to separate areas, do it with sections and design your areas inside of the sections.
Try to embrace that workflow because waiting for guides is certainly vain… I’m sorry this is probably not the answer you want to read 
So now, I try to put myself in your shoes. You design solely with guides. That means, for example, you’re in Illustrator or PS and you’ll drag elements around to stick to guides. Maybe you have created guides around your document to define top, bottom and sides margins. And another guide down under at maybe 500px down, to mark the end of the header area, and maybe another down the page, at 200px from the bottom, to mark the beginning of the footer.
Well in HTML/CSS you got to think differently. Think about your elements stacking from the top. First create your header area (a big section), define a height, and define margins to separate it from the top. Place a Container inside to constraint the content to a standard 960px and center it. Activate the grid to have a sense of what your website layout is.
Design the header, then place a Navbar, design it, adjust margins and continue. a section at a time.
I’m willing to be more specific but maybe a good way to do it would be you to give me a page design you’ve made in Photoshop, Illustrator or whatever other graphical tool. Then, i’ll go through it, crafting the structure in Webflow and telling you why I do each step, and never refering or needing guides. i can make a video. That will show you the workflow of thinking HTML layouts. On thing is certain, putting things manually exactly where you want, visually, and expect them to stay there while manipulating elements before and after is not a workflow for HTML/CSS dev nor Webflow, and won’t be. This is maybe a workflow for different web live editors, but this means they work with absolute objects only and the created code must be awful.
Don’t hesitate to share an example of graphic design here and I’ll go though the steps of building the structure in HTML/CSS. Feel free, I have the feeling that will help others too, to understand the differences between graphic design and web front end design/layout.
3 Likes