Some Ideas from a new user

  1. When you drag on the right margin (or right padding for that matter) you quickly run into the wall of the right edge of your browser window. So, you have to go back to that right-pointing arrow and drag again to go up in pixels, whereas on the left-pointing arrow, for left margin, you can drag a much longer distance. Is there any way to fix this so that you can keep dragging rightward on that right margin arrow so that the numbers keep going up?

  2. In the Navigator, can you come up with a different icon to designate that a Div Block is different than a Section? Also, color-coding those horizontal bars in that Navigator might help to easily see what kind of structural element it is, in addition to the icons. I would also love to be able to double-click a style name in this section to be able to change it. Speaking of that, how is it possible to change the style names anywhere? Double-clicking a style name once created does nothing. I would also love to be able to turn on and off the visibility of elements/objects in the navigator, so I could make sure I’m selecting the item I want to select, as I’m figuring out which element I need to adjust in the style tab.

  3. I wish there was more popup hints for example in the Properties panel on the right. If I’m in the Style tab, for example, hovering over the style icon does nothing. The word “style” is not at the top of the tab, so I might forget what tab I’m in, especially as a new user. Hovering over inactive tab icons does cause a hint name to appear. I would like to see hover hints in more places, basically everywhere there’s an icon or button. For example, there’s an icon that looks like a scope or gun sight in the selector section of the style tab. It’s clickable and causes all items sharing the same class to be highlighted on the stage, but there’s no text saying what that does. I think that engineers like to feel smart, and like to feel that if they don’t know what something does then they click on it, and notice what it does, and then memorize that to use in from then on. But making things sort of fool-proof seems a better a idea for something aimed at people who are not engineers.

  4. If I’ve added an image, and then want to delete it, how do I do that? Not just from the stage or editor, but from the whole project? The obvious answer would be to go to the assets tab, and I could either select the image and then hit the delete key, or there would be an icon of trash can that would appear, and clicking that would delete it. Neither of those happen, and if there’s another way to remove it, that I can find from reading the documentation, that’s too much work. It should be the obvious way.

2 Likes

What system are you on? It shouldn’t do that, the browser should continue to capture the scrolling event even when the cursor hovers out of the browser, even if it reaches screen edges actually. Just checked, works for OS X Chrome.

I’m sure there will be an option to delete assets from the asset manager soon. Right now, you need to duplicate your site after having cleaned unused styles, to get rid of unused and unlinked images.

1 Like

In regards to the margins, I’m using Safari 8.0.6, on my macbook running Yosemite. Dragging the right margin past the screen edge doesn’t work. In regards to the asset manager, I hope that’s implemented soon, as duplicating the site to get rid of unused assets sounds painful.

On a completely different note, I forgot to add a few more features: when is Webflow going to have CSS3 Filters? I had an idea of maybe an image being blurred and then hovering over it causing it to unblur. Not possible in Webflow?

In regards to the interface, is it possible to have the properties panel be able to disappear, perhaps an arrow that points rightward, that when clicked causes the panel to move offscreen to the right, showing just a small tab that then displays a left pointing arrow that, when clicked brings the panel back out?

I think I thought you meant clicking on the right margin button to set a value… so you also click and drag, but you were speaking about the actual viewport right edge, right?

You can use the CSS filters and blend modes through custom code.

I’m taking about clicking and dragging on the margin bar with the right pointing arrow, next to the words “Click and Drag” in the attached screenshot. If I click and drag that to the right to increase that margin, with an element selected, it stops increasing when I hit the edge of my screen or browser window (I usually make my browser windows fill the screen horizontally).

In regards to the CSS filter through custom code, that’s not really a satisfactory solution. I know it’s possible to have these filters and parameters available through a visual interface, as Hype, the hmtl5 interactive animation tool, allows it. But since webflow is dedicated to websites, I want to use it to design a website, but I want to do it via the interface.

Ok so it was that I was speaking about. I tested again but with a trackpad, and it still work for me.

https://v.usetapes.com/a4edvEN3zN

It does stop when reaching the edge of the screen though.

I watched your screen capture video, and I don’t know how you have that much space to the right of that panel. I guess you have to resize your window so it’s not horizontally filling the screen. I think it should keep going when it reaches the edge of the screen.

Can you point me to the page where it tells me how to delete classes? I’m adding classes super fast as I’m experimenting with how to style, and I’m finding myself running out of easy to remember class names. I want to pretty much get rid of all the ones that have accumulated and start over.

I’m demoing on a 27 inches iMac.

http://vincent.polenordstudio.fr/snap/kn6bd.jpg

Is it possible to shift select several elements in the Navigator tab in order to move drag them to a different level in the hierarchy?

“Is it possible to shift select several elements in the Navigator tab in order to move drag them to a different level in the hierarchy?”

No.