The Link & Actions Panel in CodeDesign.ai is a game-changer for creating seamless user interactions and dynamic behaviour on your website. Whether you’re linking buttons to specific sections or pages, or triggering actions like showing or hiding elements, this panel gives you all the tools you need in one place. Let’s explore how it works and how you can make the most of it.
We've put together a detailed video running you through the revamped Link & Actions panel on the sidebar. If you prefer an article over video, the following documentation runs through the same process as discussed in the video.
Accessing the Link & Actions Panel
To get started, open your project in CodeDesign.ai. The editing interface is designed to keep things simple and user-friendly. Here’s how you can access the Link & Actions Panel:
Select the element you want to work with.
On the basic mode, the basic link settings will be accessible through the link icon.
Switch to Advanced Mode to reveal the full-fledged Link & Actions Panel in the sidebar.
Linking Elements to Sections, Pages, and More
1. Linking to a Page Section
Let’s say you have a button, and you want it to scroll the user to a specific section on the same page:
Add an Anchor:
Select the section you want to link to.
Go to the Properties panel and create an Anchor (e.g., name it
feature-section).Set the behavior to Smooth Scroll for a seamless scrolling effect.
Set the Link:
Go back to your button and open the Link Settings in the Link & Actions Panel.
Choose Current Page Section from the options.
Select the Anchor (e.g.,
feature-section) you just created.
Once you publish your page, clicking the button will scroll smoothly to the selected section.
2. Linking to Another Page
If you want a logo or button to take users to the Home Page or any other page:
Select the element (e.g., logo).
Go to the Link Settings in the panel.
Choose Page and select the desired page from the dropdown menu.
For linking to a specific section on another page, you can use the Anchor method, just like before.
3. Custom URLs, Emails, and Phone Numbers
Need to link to an external website, email, or phone number? It’s super easy:
In the Link Settings, choose Custom URL, Email, or Phone.
Enter the required link, email address, or phone number.
These options allow you to add functional, user-friendly links to your elements in seconds.
Adding Dynamic Actions to Your Elements
The Actions feature takes interactivity to the next level by letting you add dynamic behaviors—like showing or hiding elements when a user clicks a button. Here’s a quick step-by-step guide:
Example: Show and Hide a Pop-Up
Let’s say you want a Get Started Button to show a pop-up container and a Close Button to hide it:
Set Up the Pop-Up:
Make sure the pop-up container is hidden by default.
Name the container (e.g.,
pop-up container) for easy identification.
Hide Action (Close Button):
Select the Close Button (or its block for a larger clickable area).
In the Actions section of the Link & Actions Panel, click Add Action.
Set the Trigger to On Click.
Choose Hide Element as the action.
From the dropdown, select the pop-up container.
Show Action (Get Started Button):
Select the Get Started Button.
In the Actions section, click Add Action.
Set the Trigger to On Click.
Choose Show Element as the action.
Select the same pop-up container from the dropdown.
Once published, the Get Started Button will reveal the pop-up, and the Close Button will hide it—just as intended!
Summary
The Link & Actions Panel in CodeDesign.ai gives you powerful tools to:
Link elements to sections, pages, external URLs, emails, or phone numbers.
Add dynamic actions to create interactive behaviors like showing and hiding elements.
With these features, you can enhance both user experience and website functionality, ensuring your designs are as engaging and intuitive as possible.
If you have any questions or need further assistance, feel free to reach out via support chats, comments, or the CodeDesign forum. Happy designing! 🚀