How do I add a Swap Content Action to an element?

← Interactivity and Animation
Triggering this action will swap the content of your chosen element for new content. If the target element is text or a table, you can enter new text to take its place. If it is a image, you can select the replacement content from the Media Library.

There are a number of ways to add interactivity to your pages in Claro. For a complete list of available interactions see our How do I add interactions to my page? article.

 To add a Swap Content action to a text or table element:

  1. Select the element you want to have trigger the action.
  2. Select the Interaction tab.
  3. In the Element Interactions section, select the Actions button drop-down list. 
  4. Select Swap Content from the drop-down menu. The Element Interactions panel will open.
  5. Select the text or table element you want to swap from the dropdown list.
  6. Select the Set Content.
  7. A text editor modal will open, from here you can enter your new text. Select OK when you're done.
  8. Select the Trigger for the action (When clicked, When double clicked, When right-clicked, When mouse rolls over, When mouse rolls off, When trigger element shows, When trigger element hides).
  9. Choose an Effect.
  10. You can also select a Delay after which the action should occur after the Trigger event.
  11. Click the Apply button when you’re done or click Cancel at anytime.
  12. You can then Preview the action right from the Element Interactions pane or Add another action to the element.
  13. Click Done when you are finished.

To add a Swap Content action to an image element:

  1. Select the element you want to have trigger the action.
  2. Select the Interaction tab.
  3. In the Element Interactions section, select the Actions button drop-down list. 
  4. Select Swap Content from the drop-down menu. The Element Interactions panel will open.
  5. Select the image element you want to swap from the dropdown list.
  6. Select the Set Content.
  7. The Media Library will open, from here you can select your new image. Select Insert when you're done.
  8. Select the Trigger for the action (When clicked, When double clicked, When right-clicked, When mouse rolls over, When mouse rolls off, When trigger element shows, When trigger element hides).
  9. Choose an Effect.
  10. You can also select a Delay after which the action should occur after the Trigger event.
  11. Click the Apply button when you’re done or click Cancel at anytime.
  12. You can then Preview the action right from the Element Interactions pane or Add another action to the element.
  13. Click Done when you are finished.

Feedback and Knowledge Base

(thinking…)