Why Make Text or Images Clickable?
Making text or images clickable or interactive enhances user experience and engagement.
By making these elements clickable, you can guide users to perform specific actions, such as opening a popup or navigating to a specific section of the page.
Examples:
- Click on a Product Image: Open a popup with detailed product information.
- Use Text as a Button: Allow users to scroll to specific sections, such as FAQs or product features.
How to Make a Text or Image Clickable
For this guide, we’ll make the text “Have questions? We’ll help you” clickable to scroll users to the FAQ section of the page.
Step 1: Add the Text or Image Element
If using text, ensure it’s styled and stands out so users know it’s interactive.
Step 2: Use Interactions to Trigger Actions
In the left sidebar, locate and select the Interaction tab to begin setting up actions.
Start With: This defines the element triggering the action.
Select the Text Block as the target element.
When: Choose the type of interaction to trigger the action:
- Click on Element: The interaction occurs when the user clicks the text or image.
- Hover on Element: Optional, for triggering the action when the user hovers over the element.
Then, Do These: Specify the action triggered by the interaction.
Choose the FAQ section or any other section of your page you want users to scroll to.
Change: the action triggered when a user interacts with the element (e.g.,click or hover).
- Scroll to: Move the page view to a specified section.
- Show/Hide: Make a hidden element visible or vice versa.
- Background & Shape: Alter the background color, opacity, or shape of an element dynamically.
Select “Scroll to” as the action to trigger the scroll effect.
Adjust Scroll Distance: Input a value in pixels (px) to control where the page stops when scrolling to the target section.