Pop-ups are a great way to engage users and provide additional functionality or information on your website. In this guide, we'll walk you through the steps to create a pop-up element in CodeDesign.ai. With just a few clicks, you can set up a pop-up triggered by a button, which can be closed by the user. This can be used for a variety of purposes, such as forms, notifications, or announcements. Let's dive in and see how to create one.
Video Guide | Creating a Popup Element
We've paired this article with a detailed YouTube video that follows the exact same flow, allowing you to choose whichever format you prefer to learn from. Whether you like reading through steps or watching a visual guide, we've got you covered! Check out the video below to follow along as we create a pop-up element step-by-step.
Step-by-Step Guide | Creating a Pop-Up Element
Step 1: Adding the Trigger Button
To get started, we'll need a button that will trigger the pop-up. Follow these steps:
Drag and drop a hero element onto the canvas from the design tab.
Select the button within this element and rename it to something appropriate, like “Join Queue.” This will act as the trigger for your pop-up.
Step 2: Creating the Pop-Up Form
Now, let’s create the actual pop-up that will display when the button is clicked:
Go back to the design tab and drag a form element onto the page.
To give the form a polished look, start by changing the background color.
Adjust the padding to 40 pixels on all sides to create more space within the form.
Step 3: Styling the Pop-Up
To make your pop-up more visually appealing:
Round the corners of the form by going into the style settings and setting the corner radius to 25 pixels.
Now that the form looks better, let’s move on to adding the close functionality.
Step 4: Adding a Close Button
To allow users to close the pop-up:
Drag a div element into the form container to create a space for the close button.
Next, go to the elements tab and add an icon inside the div.
Choose a close icon from the icon settings and place it in the appropriate position.
To position the close button, set the block’s position to absolute and adjust the top and right values to 30 pixels.
Step 5: Setting Up the Button to Trigger the Pop-Up
Now that the pop-up is styled and the close button is in place, it’s time to make it functional:
Select the trigger button, go to the functions tab, and choose the “Element is clicked” event.
Select “Update an element’s style” and rename this function to something like “popupOn.”
Choose the form pop-up element and set its display property to flex. This ensures the pop-up appears when the button is clicked.
Step 6: Closing the Pop-Up
Next, set up the close button to hide the pop-up:
Select the div containing the close icon and go to the functions tab.
Choose “This element is clicked” and select “Update an element’s style” again.
Rename this function to “popupOff” and set the display property of the form pop-up to none so that it disappears when the close button is clicked.
Step 7: Final Adjustments
To complete the process:
Ensure the pop-up is hidden by default by setting the form container’s display property to “none” when the page loads.
Set the container’s position to fixed so it stays in place on the page.
For added style, go into the settings and give the pop-up a white border.
Lastly, add an animation for the pop-up’s appearance by selecting the “zoom out” effect.
Step 8: Publishing the Pop-Up
Once all the settings are in place, publish the page to see your pop-up in action. The pop-up will remain hidden until the button is clicked, and can be closed by the user with the close button.
And that's it! You've successfully created a functional pop-up element in CodeDesign.ai. If you have any further questions or need assistance, feel free to reach out through our support channels.