How To Create A Popup In Webflow

‍

Here is how you can create a Pop-up in Weblow:

1. To begin, go to the Add Elements tab on the left sidebar menu.
2. Insert a Div Block element to act as a wrapper for our popup.
3. Select the new Div and go to the Style tab on the right sidebar menu.
4. Locate the Size options.
5. Set the desired size for your popup.
6. Consider changing the background.
7. We'll add a few more elements to populate it.
8. Such as a heading text element.
9. You can continue creating a perfect pop-up for your needs but for now we have a simple one ready.
10. Select the popup Div and locate the Position option on the right sidebar menu.
11. Set its position to Absolute.
12. Consider setting the z-index property to a very high value to ensure it stays on top of all other elements.
13. Adjust the position of your window as you would like it to appear.
14. Once ready, locate the Layout section and set the Display to None. This will hide the popup until it must be shown using a trigger.
15. Now, you can use any element or icons for this but a button works as well. Select the element you wish to add a trigger to show the pop-up to.
16. Go to the Interactions tab from the right sidebar menu.
17. Click on the (+) icon next to Element trigger.
18. Select Mouse click (tap).
19. Select the 1st click Action option to set.
20. Select Start an animation.
21. Click on the (+) icon next to Timed Animations.
22. Enter a name for this animation such as "Show popup".
23. Use the navigator to select the hidden window.
24. While selected, click on the (+) icon next to Actions to create an animation for your pop-up.
25. Select Hide/Show at the bottom.
26. Optional: Consider changing the Affect settings to only affect the specific element.
27. Select Display: Block.
28. Click on Save.
29. Repeat the same steps for the 2nd click Action until the end.
30. At the last step, select Display: None to hide the pop-up when clicking on the button again.
31. Save your second animation.
32. Use the Preview mode from the top right button.
33. Click on the button.
34. Voila! You now have a pop-up. Click on the button again to close.