Forum Academy Marketplace Showcase Pricing Features

Walkthrough Tour

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”

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

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.

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

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…

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

9 Likes

Hello @boston85719,

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

Could you share your demo page?

1 Like

@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

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

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.

@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

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.

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

You could check out my plugin for this!