Layers visualisation?

thepiper · June 6, 2016, 9:19am

Hello there. This is my first post here, so please be gentle.

When designing web pages in Bubble, I have a hard time to realise which elements are on top of the others. This usually results in a lot of “Bring to front” and “bring to back” clicks, and not always with the best results.

Would it be feasible to implement this, possibly in the Responsive viewer? It would be nice to have a way to see the first layer, second layer, …, until the last layer, as well as to be able to “bring layer up” one layer at a time instead of just bringing it to front (first layer) or to back (last layer).

Thanks a bunch for any feedback, including alternative ways to deal with this.

PS: BTW, I know about the X-Ray mode, but sometimes it doesn’t really help, especially when you have several elements stacked on top of one another.

raymond · June 6, 2016, 9:33am

I place my elements in groups and them visible / not visible on page load. This way I can select a group in edit mode and only see those elements.

Kfawcett · June 6, 2016, 3:36pm

I agree! Many products do this (e.g. Pinegrow, Webflow, Photoshop, Illustrator).

Examples:

Kfawcett · June 9, 2016, 5:51pm

Here’s an idea of how this works in PineGrow. You can easily move elements around and hide/show with ease.

emmanuel · June 9, 2016, 6:19pm

Thanks. We’re looking into this these days. Can’t guarantee we’ll have everything, but we’ll do our best.

thepiper · June 11, 2016, 8:14am

@emmanuel: Wow, it is happening! The elements tree that is showing up since I started developing on Bubble this morning is even better than had envisioned, and on the same line of @Kfawcett’s suggestion. This is absolutely beautiful, and it makes it so much easier to really understand what is in the page, what is visible and what not.

I have to say am absolutely astounded how you not only listen to user’s feedback, but also how quickly you manage to implement it. Thank you so much!

turkishblanket · September 25, 2020, 10:41pm

To be clear, to control the layering, you can now right click on the element in the elements tree and select “Bring to front” or “Send to back”.

saxon · January 18, 2021, 7:10am

This just moves the element back and forward on the page, it would be nice to be able to move elements back or forward one layer at a time instead of to the absolutes.

Also would be nice to be able to move elements in and out of groups (in the element viewer) rather than trying to get them inside by dragging and dropping

I feel like there’s a few more things that could be done here

lisa.holmquest · March 24, 2021, 7:10pm

Please make layer movement in the left panel a thing. It’s typically how designers approach layer management. Clicking elements (when possible) in the main workspace is challenging and doesn’t provide the fine-grained control needed.