Streaming live at 10am (PST)

Poll: Navigator Panel showing invisible elements


#13

In my opinion the second option should be considered as implementation. If I set something to be invisible I don't see ANY reason why it should be visible on published website. If I hide it in Navigator and it will appear on the published website I might need to go back to the designer mode and figure out why isn't that working as I wanted. Definately Option #2.


#14

@rowan and those voted for Option 1, can you give me some examples of where you would want to set an element to "invisible" only in the designer and not when published?


#15

Yea, I'm really having an issue figuring out what the purpose would be of option one.


#16

The only reason I can see for #1, is if you happen to have a lot of divs that are on the page, and a user wants to have less items visible to them while they are working on the site. I use this for example when I am creating div sections that will be displayed when published, but I use jquery to toggle the divs for slideDown etc. When I am working on the different divs in the design view, after I finish a div that I know I will not need to work on anymore, I just set it to display:none so that my workspace is less cluttered.

Now not everyone works that way, and that is fine, I am not opposed to option #2 either, whatever works best for the larger community.

Cheers


#17

@thesergie
Let me think... Yes, I think the biggest issue is what cyberdave describes. 3 recente examples of works I've done where this issue occurs:


The blue overlay with the drawn circle and arrow starts as display:none but appears after some specific moment. I don't want this to be visible while designing the page!


The blue text block is only visible after clicking 1 specific link, it's set to display:none by default. It's just 1 detail of a complete page, so I don't want this to be visible while designing the page!


The right sidebar (contact form) is only visible after clicking the contact link, default state is display:none. It's annoying when this is visible while designing!

Now we can easily set the object to display:none when we don't use it... But it's not user friendly, and it's always hard to explain to clients who don't have a clue what's happening in the Navigator.


#18

I´m would love to have option one when working with interactions like @rowan last example. Just hide it when I working on other things in different views and on export or preview it is visible when interacted with.

Edit: If you want display none also on export you set it to display none in the styles section.


#19

Exactly this. My reasons are the same as @rowan's argument.


#20

An example of using the option 1, would create a div for loading (or popup), which should be visible but not editing.
Actually this question is very complicated, but I think it will have more reasons to use option 2 than option 1.

I liked the option of multiple status @cyberdave

But I agree that option 2 can already be made, even if more slowly. Option 1 would be a new possibility.
Or it could have a status "visible when published" in the style panel. A solution to add the option 2 in the navigator pane. and leaving the option 1 in the style panel. (basically leaving the most used in the navigator and have 2 options in style)


#21

@rowan, @jorn, @Jonas76 whenever I have a sidebar or anything that "appears" on a click interaction or any other interaction I just set it to Display:none so it doesn't take up space on the canvas. If your interaction has it become Display Block in one of the steps then, it's 100% okay to set that element to display none and publish it that way.

So looks like option #2 will solve your problem.


#22

Did not know that, thanks.


#23

Is that new, or what? I might have missed it, hmmm goberserk

Well if that's the solution, than option 2 is obviously the option to go with


#24

I've been using this technique with interactions from the beginning. Interactions always override CSS you put on a class because the CSS is placed inline (which has more specificity and always wins). Even if you have an element with Display None and have an Interaction with Initial Appearance (or a trigger) set to Display:Block, then it will appear. Yeah you can test it out and see that everything works fine when the site is published.

With the navigator UI improvements you will be able to see which elements on the canvas you have hidden. This will be super handy (currently there's no way of seeing that right now besides knowing which element you set display:none to, select it, go to style and select a different display property.


#25

@thesergie

Sounds like the solution then! Because currently it's hard to explain clients which elements are set to Display none, but with that update it will be very obvious I can imagine.


#26

I should re-read this thread earlier in the day when I'm sharper - cognitive walkthoughs of multiple states always need your best stuff...

But my fuzzy-headed end of day reflection is: I've been doing something similar to what I understand @thesergie is doing, and just setting appearance to None in the editor except when actively editing the item. Then I select it from the Navigator panel, which is what prompted this thread: http://forum.webflow.com/t/collapsable-navigator/2958/2

Just collapse/expand (which from the screenshot at the top is clearly being worked on) would have been a nice relief. The eyeball icon in version #2 seems like it's a really nice enhancement of that, to let me more easily spot layers that are off, with the bonus of controlling visibility from a second context.

One thought for that use case: Some innocuous way to signal that there's a hidden object inside of a collapsed section of the Navigation panel would be the cherry on the top of the solution.


#27

BTW, however the eyeball icon is used in the Navigator panel, it would be good to make it semiotically consistent with the one being used to highlight selectors:

... I've finally broken the habit of clicking the Editor Home button (which takes you to the Settings page that oddly is accessed via a gear icon from every other location) to switch to my site's home page, but it was an uphill effort stuck_out_tongue

(I know it's not logical or desirable to put an icon there in the Editor's tool panel to take me to my site's home page, but years of training from, oh, every site in the world still made me instinctively click on it when that was my intent. Now that I've broken that habit, I've probably ingrained a hesitation to use Home icons everywhere else!)


#28

That would be a great addition.

BTW, however the eyeball icon is used in the Navigator panel, it would be good to make it semiotically consistent with the one being used to highlight selectors:

Yeah that is going to change to a more fitting "pinpoint" icon so it's not confused with visibility.

Btw, The home icon will be replaced with something less confusing. Thanks for all the helpful feedback Allen!


#29

@thesergie I had 90 food "Nutrition Facts" labels open in the designer, but hidden when published.

I just hid them all in the designer based on what you said here:

@rowan, @jorn, @Jonas76 whenever I have a sidebar or anything that "appears" on a click interaction or any other interaction I just set it to Display:none so it doesn't take up space on the canvas. If your interaction has it become Display Block in one of the steps then, it's 100% okay to set that element to display none and publish it that way.

So looks like option #2 will solve my problem.


#30

@thesergie Hi Sergie! This is missing part I've been looking forward to for a long time in Webflow. Actually was going to create the suggestion for this and already did this smile I prefer Option 2 as it seems focus on my workflow better.

So the question is when will it be released?


#31

@Nick_Herasimenka they updated the navbar a while back and this was not part of the launch so my guess is it didn't make the cut, I think the best option is to submit a wish list: http://forum.webflow.com/c/feedback/wish-list request for it, it is something I would use too smile

Arthur


#32