Scrollable Product Tour

To reposition the location of a Layered Tooltip, open the List tab, and then on the canvas, click on or in the area of one of them. Afterwards, use your up arrow key on your keyboard to navigate upwards until you see an Aqua Teal highlighted container with a link icon in the upper left corner of it.

This lets you know that you have selected a Layer positioned element.

Here you will see Layered selected in the dropdown, and below it two sets of toggles and three input fields. 

Top & Bottom: Tell the web browser how close or far you would like to manually position the layered element from the top or bottom of the parent element. The Aqua Teal outline that we mentioned earlier represents the parent element, a.k.a the layered element's boundaries.

Where Top and Bottom allow you to dictate the vertical position, Left and Right allow you to dictate the horizontal positioning.

We recommend using percentages for your inpiut so that the tooltips will respond to the width of the parent element.

To update the content within your Accordion, begin by selecting it on the canvas.

Select an Accordion Section by clicking on it on the Canvas or by selecting in the Variables menu. Here in the Variables section you are able to update the Label for the specific Accordion Section, which is the front face title, and you are also able to provide it with a Tag.

To update the content within your Tabs, begin by selecting it on the canvas.

On the Canvas and within the Tabs content section, hover over the general area until you highlight the Tab Section and then select it. Within it there is currently a two column Responsive Grid, feel free to edit the grid itself, the contents within it's columns, or remove it and in other interactive elements.

To update the content within your Flow, begin by selecting it on the canvas.

At the very bottom of the Flow is a numbered navigation that is used to indicate the active Flow Step and is also used as buttons to navigate through steps. You can remove this by visiting the Variables settings and removing the Microtheme. 

To change or remove an Animation, begin by selecting the element on the Canvas.

To remove the Animation, click on the blue X to the right of the active Microtheme.

To change the Animation, click on the Trigger dropdown above the active Animation and select a Trigger.

From the second dropdown that appears, select an Animation from the available options.

To change the odometer beginning or ending numbers, select one and open one of the three text elements.

Here you can see a line of HTML code. Towards the beginning and end of the text we have our + and our % symbols. These can be replaced, removed or left alone.

data-delay dictates how many milliseconds the animation will delay before beginning to count up.

data-prev dicates the starting value of the odometer and data-val dictates the ending value.

The value 1, between the two less than and equal to signs (>1<), dictate what the default text that will be visible on the canvas within Creative Studio.

To change a field within your Form, begin by selecting the Form on the canvas.

Update the input's Data Field within the Variables settings by clicking on it and then choosing a new Data Field from within the pop-up window.

Click on the Behaviors from within the Variables settings to change the Scroll To location.
 

To remove the Behavior and add an Action, click on the trash can icon and then click on the + Actions button within the Variables settings.