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.
