# Create onboarding tutorial for new users **URL:** \ **Category:** Need help\ **Created:** [February 23, 2018, 4:12pm UTC](https://forum.bubble.io/t/create-onboarding-tutorial-for-new-users/24908 "2018-02-23T16:12:02Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [February 23, 2018, 4:12pm UTC](https://forum.bubble.io/t/create-onboarding-tutorial-for-new-users/24908/1 "2018-02-23T16:12:03Z")
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! ---
**Author:** ![sridharan.s](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/sridharan.s/32/17881_2.png) [@sridharan.s](https://forum.bubble.io/u/sridharan.s)\ **Post date:** [February 23, 2018, 7:38pm UTC](https://forum.bubble.io/t/create-onboarding-tutorial-for-new-users/24908/2 "2018-02-23T19:38:54Z")
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. ---
**Author:** ![gnelson](https://avatars.discourse-cdn.com/v4/letter/g/6bbea6/32.png) [@gnelson](https://forum.bubble.io/u/gnelson)\ **Post date:** [February 23, 2018, 9:06pm UTC](https://forum.bubble.io/t/create-onboarding-tutorial-for-new-users/24908/3 "2018-02-23T21:06:38Z")
@romanmg has a great [tutorial](https://m.youtube.com/watch?v=bpHdw2CgT3I) on how to do this. ---
**Author:** ![eurogar](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/eurogar/32/28456_2.png) [@eurogar](https://forum.bubble.io/u/eurogar)\ **Post date:** [March 4, 2018, 11:31pm UTC](https://forum.bubble.io/t/create-onboarding-tutorial-for-new-users/24908/4 "2018-03-04T23:31:56Z")
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). ---
**Author:** ![system](https://us1.discourse-cdn.com/bubble/original/3X/2/8/2847faa74692c2ffa5d939d3dc3724cdd060d247.png) [@system](https://forum.bubble.io/u/system)\ **Post date:** [May 4, 2018, 4:12pm UTC](https://forum.bubble.io/t/create-onboarding-tutorial-for-new-users/24908/5 "2018-05-04T16:12:05Z")
Closed on May 4, 2018, 4:12pm UTC This topic was automatically closed after 70 days. New replies are no longer allowed.