I want to make a simple onboarding tutorial for my users during their first visit. For that, I need to darken (shadow) all the page except for a specific area/element of the page that I want to highlight and explain more in detail. The effect would be similar to what happens when a popup is opened (background is shadown). Is there a way to do so in Bubble? I was thinking about using different shapes (dark background and play with the transparency), but I think I will have problems with the location of the shapes in responsive view (and placing things on top dynamicly. Thanks a lot!
There are numerous solutions that may work, but one of the more straightforward ones = Add a shape that’s full page width and height, hidden by default, has the color you want and is semi-transparent.
Then, when the onboarding tutorial is triggered, you can show that shape. And, run javascript to change the z-index of the element you want displayed on top of that shape. This way, that element will be easily visible and you won’t have to duplicate content.
3 Likes
Cool @sridharan.s, thanks for the suggestion! I’ve been playing with the z-index of certain elements, but if the shadow shape fits the whole space, the z-index of the element is never bigger than the z-index of the shadow shape… It only works if I use the shadow shape in the same group than the element to highlight (but I want to shadow the whole screen, not only the group in which the element to highlight is included…). I don’t know if this is a problem caused by setting a different element with “bring to front”…
How do you change the z-index? I first enable the tags for elements and then I add a javascript to set the z-index of the element with such tag to a different z-index.
BTW @romanmg thanks a lot! However, that video doesn’t use the shapes with a translucent color only showing a specific element highlighted (apart from the tutorial box).
This topic was automatically closed after 70 days. New replies are no longer allowed.