When Elementor announced the release of the long awaited Popup for their Pro version, the WordPress world took notice. Communities for other page builders began to flood their groups with posts about it and in turn began to demand the devs for the respective builders provide a similar feature.
While Elementor rocked the scene, and the Popup feature is amazing, it's missing a few key things. So until the day they include them, here's one such missing item.... styling the Popup Close Button.
This tutorial will show you how to change the look of the close button using CSS.
If you're not familiar with using the Chrome Inspect Tool, check out our article: Get Your Inspect On to learn more about it.
border-radius: 30px;border: solid 3px;padding: 3px;
As with the first bit of CSS, you don't need to include any of the CSS such as the display, background-color, or font-size. This last bit of custom CSS will make the background corners round and finish out the customizing of the button. You only need to add the following:
border-radius: 30px;
As you can see in the image above, the close button now looks better. Play around the CSS until you achieve the look you want. Here's all the CSS used for this tutorial (be sure to change the modal number). You can also see a live demo of the popup used for this tutorial by click the button below.
All the CSS combined
#elementor-popup-modal-142 .dialog-close-button i {border-radius: 30px;border: solid 3px;padding: 3px;
}
#elementor-popup-modal-142 .dialog-close-button {border-radius: 30px;}
The only thing left now, is to comment and share a picture of your popup and to share this tutorial.
This is an Elementor Popup triggered by Text.
