Layers allow you to group Elements together on a Claro page to organize the page or allow for easily targeting for actions.
This lesson shows the steps to assign a Show action to a button, targeting a Layer.
Steps to set a button to show a Pop Up panel as well as include the text string saved to a variable as part of the feedback text on the Pop Up panel.
A Pop Up panel gets shown as a modal window above the main page, which will be shown as grayed-out while the panel is open.
Steps to add a new Layer to a Claro Page.
The Layers feature lets you group together elements on a Claro page to better organize the page or to target for actions like Show or Hide.
Steps to use the Show Variables setting to display either the default {x} variable placeholder or the full variable string in a text element.
Steps to set up a Show Action where the learner will click on a button to show another element on the Page.
This exampe uses a Button but any element can be set up as the item the learner will interact with, including text elements, image elements and more.
Similarly, this example Shows an image element but any element can be selected as the Target of the Show Action. You can also select multiple elements as targets, to Show more than one thing at a time.
Use Layers to group elements together on a Claro page for organizing the page and for targeting with actions
Steps to add a Standard Button element to a Page.
In this example, we add the button as a new element within a Group that is already on the Page.
Steps to Snap an element to a specific location on a Page in Claro.
How to set a button to increase a variable by 1 when a button is clicked.
In a Flow page, the height of a Section is set by the height of the content it contains by default. You can override that default height, though, and tell the Section to behave as if its height is a ratio based on the height of the browser window it’s being viewed within. Along with that height setting, you can set the content within the Section to align within the Section’s new height. It’s a great design idea for creating a dramatic full-height Section on your page.
In this lesson we’ll s...
Setting a Show action using the Timeline feature
Steps to set a button to show a Pop Up panel as well as include the text string saved to a variable as part of the feedback text on the Pop Up panel.
A Pop Up panel gets shown as a modal window above the main page, which will be shown as grayed-out while the panel is open.
Steps to add a new Layer to a Claro Page.
The Layers feature lets you group together elements on a Claro page to better organize the page or to target for actions like Show or Hide.
Steps to use the Show Variables setting to display either the default {x} variable placeholder or the full variable string in a text element.
Steps to set up a Show Action where the learner will click on a button to show another element on the Page.
This exampe uses a Button but any element can be set up as the item the learner will interact with, including text elements, image elements and more.
Similarly, this example Shows an image element but any element can be selected as the Target of the Show Action. You can also select multiple elements as targets, to Show more than one thing at a time.
Use Layers to group elements together on a Claro page for organizing the page and for targeting with actions
Steps to add a Standard Button element to a Page.
In this example, we add the button as a new element within a Group that is already on the Page.
Steps to Snap an element to a specific location on a Page in Claro.
How to set a button to increase a variable by 1 when a button is clicked.
In a Flow page, the height of a Section is set by the height of the content it contains by default. You can override that default height, though, and tell the Section to behave as if its height is a ratio based on the height of the browser window it’s being viewed within. Along with that height setting, you can set the content within the Section to align within the Section’s new height. It’s a great design idea for creating a dramatic full-height Section on your page.
In this lesson we’ll s...
Setting a Show action using the Timeline feature
Comments ( 0 )
Sign in to join the discussion.