In this text, you will see how to create a popup in Elementor. The first thing you need to do is in the control panel, click on Templates–>Popups and then click on Add New. You choose the type of template to be Popup, give it a name and click on Create Template. So we created a new popup.
After we have created the popup, we will not choose a template from the library, but we will create it ourselves by dragging new elements. First, we'll add a title, style it, adjust its size, width, alignment, font, and more. Then we will set up the section, by under the option Column Gap in the Layout section set No Gap, after that we will in the section Style, set background color and image as background, set image position and size. Once we've done that, our popup looks like the image below.
After that we will duplicate the section, change the background color to white and delete the image. Then we will under Advanced change the spacing slightly and then click on the title and change the text color, as well as the text itself, so that it appears on a white background. We will duplicate the title 2 times and adjust and modify the text a bit. We will add to the popup and element Share Buttons, set social shareability for users and change the appearance of icons under sections Content and Style. We also adjusted the icons and one of the titles to be in the middle of the bottom row, under the section Advanced and option Positioning, so that Width be Inline and that Vertical Align be Center.
Once we've done that, we'll add an image to this popup, edit under option Positioning Yes Width be Custom, as well as yes Position be Absolutely. Also code Horizontal Orientation we set it to be Right and after that we can move the image where we want. We will add 2 more images, on which we will set different orientations and place them on the popup in different places.
After that, all that's left is to fix the responsiveness, on the tablet version everything looks the same as on the desktop, it's just necessary to fix the popup version for mobile phones. In order for the popup to look even more beautiful, we will adjust the images under the option Motion Effects to move when we move the mouse over the popup using the option Mouse Effects. In the picture below, you will see what the finished popup looks like.
