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.