How do I add a Swap Content Action to an element?
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:
- Select the element you want to have trigger the action.
- Select the Interaction tab.
- In the Element Interactions section, select the Actions button drop-down list.
- Select Swap Content from the drop-down menu. The Element Interactions panel will open.
- Select the text or table element you want to swap from the dropdown list.
- Select the Set Content.
- A text editor modal will open, from here you can enter your new text. Select OK when you're done.
- 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).
- Choose an Effect.
- You can also select a Delay after which the action should occur after the Trigger event.
- Click the Apply button when you’re done or click Cancel at anytime.
- You can then Preview the action right from the Element Interactions pane or Add another action to the element.
- Click Done when you are finished.
To add a Swap Content action to an image element:
- Select the element you want to have trigger the action.
- Select the Interaction tab.
- In the Element Interactions section, select the Actions button drop-down list.
- Select Swap Content from the drop-down menu. The Element Interactions panel will open.
- Select the image element you want to swap from the dropdown list.
- Select the Set Content.
- The Media Library will open, from here you can select your new image. Select Insert when you're done.
- 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).
- Choose an Effect.
- You can also select a Delay after which the action should occur after the Trigger event.
- Click the Apply button when you’re done or click Cancel at anytime.
- You can then Preview the action right from the Element Interactions pane or Add another action to the element.
- Click Done when you are finished.