Skip to main content
All CollectionsTemplates, Components & Elements
Creating a Pop-Up Element on CodeDesign Builder
Creating a Pop-Up Element on CodeDesign Builder
Updated this week

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.

Did this answer your question?