Customizing the Elementor Popup Close Button

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.

How To Customize the Elementor Popup Close Button

If you're not familiar with using the Chrome Inspect Tool, check out our article: Get Your Inspect On to learn more about it.

Popup Close Button Inspect
popup modal CSS selector
Add Custom CSS To Popup

border-radius: 30px;
border: solid 3px;
padding: 3px;

Customized Popup Close Button
Close Button Background CSS

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;

Close Button Background Border Radius

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;
}

 

Now what?

The only thing left now, is to comment and share a picture of your popup and to share this tutorial.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Code Vertical Icon
From web design, WordPress, tutorials, and web developement, we have you covered.
Web Design
Website by VerticalHosts.com

codevertical.com

Code Vertical Icon

Customizing the Elementor Popup Close Button

This is an Elementor Popup triggered by Text.

built with love using elementor pro
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram