Walkthrough Tour

Tips
1

This is how you can create the effects needed for a more visually appealing walkthrough tour

You can use a bit of HTML and Javascript to build your own tour

First thing is to “blackout/greyout/blur” your page…to do so you will need a group element that covers your page…you can set whatever color you want; how about a “redout”

15%20AM
15%20AM1369×723 51 KB

Then in workflows you should have a button that you use to show it, which would be the start of the tour.

To get a blur effect, you will need an html element on your page

23%20AM
23%20AM344×700 26.2 KB

After you got your blur group all set up you need to use the Javascript to set the z-index of the elements you want to have “highlighted”…what is actually happening is the element is being “sent to the front” and sitting on top of the blur group.

13%20AM
13%20AM871×379 32.7 KB

make sure you have your element ID exposed so you can set it…this is needed for both the HTML and JS

06%20AM
06%20AM341×695 30 KB

You will obviously also need the JS plugin ( search toolbox to get the right one ) and the html plugin…both are free

then you would set up all the other stuff needed to guide the user from element to element…

04%20AM
04%20AM1265×668 30.9 KB

Notice how the navigation button is brighter and not blurry like the rest of the elements on the page…that’s the Z-index from JS and the blur from html

You could even use this to guide your users through their first transaction or adding a listing since the elements that are set on top of the blur group using the z-index are accessible and can be used

10 Likes
2

Hello @boston85719,

I didn’t find the way to make the blur works, I probably forgot something.

Could you share your demo page?

3
1 Like
4

@boston85719 I’ve got the blur part working but I am not able to highlight the elements.

The button that I want to highlight is in a reusable group.
brave_agsdiUp1oJ

brave_6IsQiEGJsS
brave_6IsQiEGJsS329×538 11.1 KB

I’ve added ID attribute to this button and referencing it in the workflow. What am I doing wrong?

I want the red button to be highlighted here
brave_wlcYROZoJ9

5

I don’t know, I think there is the possibility the red button ID is not recognized by your javascript. I’d try to put the ID on the reusable element itself instead of the red button, if your reusable element is simply the button itself.

6

@boston85719 It’s not working when I put it for the entire reusable element as well. I tried putting in on another Group, the same error. Maybe I have set it up incorrectly. Do you mind taking a look?


The page that I am trying it on is index-onboard

7

Understood why it wasn’t working. A child group cannot be un-blurred if the parent group is blurred. We need to either un-blur both of them or ungroup them. It doesn’t work on one single element.

8

Oh no! It’s not allowing me to access this in the editor. Can you please share again? It would be solve my problem!

9

You could check out my plugin for this!