Group elements layering

New to Bubble. Seems like a very powerful tool!

I created a home page with a full width static image as a background. In the same group I created a color overlay element covering the full size of the image. I also have a title text in the center of the group.

Is there a way to organize elements through layers in a group like you do in other editors or photoshop for instance? I can bring the title text to front, but whenever I click outside of the title text box, the color overlay jumps in front of the text, naturally also affecting the color of the text.

I’d like to specify layered positions of my elements. Can you and how to do that?

Hi!
I know that you can right click on the element and choose “bring to front” or “bring to back”.

2 Likes

Thanks. Yes, but it doesn’t really stick, which to me indicates the “bring to front/back” tool is more a visual tool for the developer than a layering function.

Traditionally, HTML layering is defined by nested

-tags. In Bubble, the closest you get to this is grouping elements. However, the elements in groups appears to be treated equally without hierarchy.

I could hard-edit the color overlay of the image in Photoshop, but it’s much easier to alter it in Bubble on screen.

Working through this as well. Did you come up with a solution that works well?

Well. The tools available are the same as when I made the post.

You get into how the editor handles elements and groups pretty quick. You also learn how to press, where to press etc. but like said, the tools are the same. One update is that you can command/ctrl click on an element to cycle through the stacked groups.

I guess I’m curious to hear a bit more about your strategy for layering groups. I’m working on pulling in an existing design with a full-width hero at the top of the page. In HTML/CSS, I have a div with multiple backgrounds – a nearly transparent gradient over the image. The right half of the image has a blurred background that works well with the text. At or below 640px, the text moves over the primary subject, and I need a darker gradient to make it clear.

In Bubble, I have group “Hero Image” with background set to the image. I created an additional group inside this called “Full Hero Gradient” with the gradient I use on wider screens. Inside this, I created “Small Hero Gradient” with higher opacity to make the text pop on phone screens. Lastly, I added a “Hero Content” group to hold together my text. After I had the groups nested properly, I cycled through each gradient and resized to completely overlap the main hero image. I also set up responsive hiding rules.

At the moment, this only works at low width. To keep “Hero Content” visible at all sizes, I’m assuming I need to duplicate the element into both Gradient groups. It seems like I am also having trouble controlling the nesting of the groups. “Full Hero Gradient” disappears right along with “Phone Hero Gradient”. I can’t decide whether this is just a weakness of fully nested groups. I was previously using shapes for the gradients, but had trouble with the height of the overlay.

That’s quite a text. Add sample pictures to make it easier to understand your setup.

What I can say about nested groups, is that they tend to re-arrange when you click on any of the groups in the editor. Say you want to select a group to edit it or make changes. That also re-orders the stack of groups/elements, and is pushed through in preview and live mode. That’s super annoying because you always have to re-arrange them to have it they way you’d designed.

The only tools available for arranging a stack of elements/groups, is “arrange > send to back/send to front”. When you build more complex stacks like in your example, this becomes extremely time consuming and questionably viable. I think it should work like in Photoshop, with layers. The issue here is that the layers lack params of order, except for [front] or [back].

In traditional HTML nested divs handles this. Groups don’t work quite the same way (yet at least). Better layering functionality would solve it. Another rather simple way, (I think) would be to use an order definition, e.g. A-Z, for each group.

1 Like

I hear you on the challenges of groups. Given how integral groups are to responsiveness, you end up with a fairly deep stack. I could see some challenges trying to convert Adobe style layers into HTML/CSS, but I do think we need some better control on groups. We were just talking about the need for some sort of group palette/explorer (or even a layout builder mode to rough out a wireframe based on groups).

The technique I’ve adopted is to plan the order of my groups very carefully, building up back to front. When I want to nest a new group that goes right up to an edge, I draw it within the parent groups boundaries and use the edit mode to modify the length/width and offsets. It’s definitely tedious, but it keeps the swearing to a minimum. Currently trying to map all parts of an existing grid layout into this way of working: https://grids.bubbleapps.io/version-test?debug_mode=true. The top row demonstrates what I was attempting to describe earlier. Posted another topic about the challenges I’m hitting on the bottom row.

I do the same more or less. When I’m happy with a look, I try not to touch it. If I need to edit, I use the element picker not to screw up the layering.

Hi everyone!

Is there any solution to this problem yet? I have run into the same issue.
I have a filter with 6 fields, 4 of them have tooltips for user to better understand, what is this search field for. These 4 filters are grouped in 2 Groups of 2 dropdowns and 2 tooltips.

The issue is that I have 3 tooltips working properly, showing a GroupFocus on click, but one of the tooltips is not even clickable on hover. I tried moving it to front, recreating the Group from scratch, but it won’t help.