Insert or add a pre-built button to a page (and edit it)

A wide variety of pre-built buttons with an assortment of colors is available in Claro. Simply pick a button from the color palette and then add a label and an action or link event to it.

You can re-size the button on the page to accomodate a long label. You can also edit a button later in order to change the label or other properties.

To insert a pre-built button:

  1. Click the Insert tab.
  2. Click Button in the Widget section.
  3. Select a button color from the Button Interaction palette.
  4. Click your page to place the button into position.
  5. The Button Properties right-panel opens.
  6. Give your button a Title (this makes it easier to identify in the Layers or Actions panel).
  7. Add Alt Text, if desired.
  8. Enter the Label text for your button. Click the arrow in the top right corner to format your label text.
  9. You can also use Advanced Styles to enter Custom CSS Properties if you'd like. See Advanced CSS Styles for more information.
  10. Click the Actions button at the bottom of the properties panel to choose an event for the button right away. Or, click Update and then add an action or link event later.

To re-size a button to fit a long text label:

  1. Select the button on your page.
  2. Drag the side handle to the right to fit the long text label onto the button. The text remains centred on the button.
  3. You can also drag a corner handle or the bottom side handle to make a taller button.

To edit a pre-built button:

  1. Select the button on your page.
  2. Press the Enter key on your keyboard OR double-click OR click the Edit button on the Home tab ribbon. The Button Properties right-panel opens.
  3. Make the changes you required and then click Update.

Interactivity and Animation

  1. How do I add interactions or interactivity to my page? Add links, actions, timed events, animations, hotspots, and image maps.
  2. How do I insert a Hotspot to add interactions?
  3. How do I add an action to an element that when trigger will Show or Hide or Toggle other elements (mouse event interaction)?
  4. Insert or add a pre-built button to a page (and edit it)
  5. How do I add an Action to Animate elements?
  6. How do I add a Swap Content Action to an element?
  7. How do I add a Light Box Action to an element?
  8. How do I insert a Text Input box on a page that learners can enter text into?
  9. How do I add an Action for Player Controls (Course Player navigation buttons: e.g., Forward, Back, Audio, Transcript buttons)?
  10. Media event actions and interaction (sync or time events to audio and video)
  11. What are the Animate Effects I can apply to element interactions or page actions?
  12. Adding a Link to URL using a modal target does not work for some sites (produces empty box)
  13. How do I add a link or hyperlink to a URL website, email or ftp site?
  14. How do I add a drag and drop interaction to my content page?
  15. How do I create an image with interactive hotspots?
  16. How do I allow the user to print a course page?
  17. How do I edit or remove an Action from an element on my page?
  18. How do I edit, delete, or remove Hotspots (Image Map) from an element?
  19. How do I get audio to play when a Hotspot or Action is triggered?
  20. How do I hide all mouse event targets on the stage? Hide Targets feature
  21. How do I make "hidden" hotspots? How do I hide the pointer hand cursor on a button?
  22. How do I make a page link to another page? How do I make branching interactions?
  23. Page, Jump, and Endscreen Transitions for a course (and Default Effect)
  24. Add an Entrance Effect to elements on a page
  25. How to Disable and Enable the Menu Button
  26. How do I add, edit and remove Actions within text elements?
  27. How do I add, edit and remove Links within text elements?
  28. Can learners search a course for specific content?
  29. What data does the course player search against during a course search?
  30. How do I display variables in my course?
  31. How do I make form fields available as variables?
  32. How do I set a custom variable?
  33. What are some of the Variables available?

Feedback and Knowledge Base