Customizing the Elementor Popup Close Button

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.

• 1
  Let's get started!
  Go ahead and create your popup, and be sure to have the close button set to Show. Also go ahead and set the styles you want for it. You can see in our demo below it's set for a black X and blue background. Remember you can always go back and change those later.​

• 2
  Use the Inspect Tool
  Next, hide the Elementor Panel then right click on the X part of the close button and select Inspect.

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

• 3
  CSS Selector
  What you're looking for specifically is the CSS selector that's related to the close button. It’s important that you take note of the modal number. This number is also the post number. This bit of CSS will only change the styling of this specific close button. This means you can give each popup and its close button a unique look each time. It should be the first part of CSS that is shown and should look something like this:

• 4
  Adding the CSS
  Once you have copied this part (or you can copy our full CSS below and change the modal number), you will need to go to: Popup Settings → Advanced → Custom CSS to add the CSS. You can also add this CSS if your theme has an area for custom CSS or in: WordPress Dashboard → Appearance → Custom CSS

  You can remove: color: #000000; as you don't need this part. Continue on though to start customizing the button.

• 5
  Custom Close Button CSS
  Now that you have the initial CSS in place, we will start styling the actual button. With the following CSS it will add a circular border around the X and add a little padding as well. Add it and watch the button change.

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

• 6
  The Final CSS
  Now that you have the custom CSS added, you'll notice the background is still square. Don't worry though, because this final step fixes this. Go ahead and Inspect the close button again, only this time click on one of the corners of the colored background. This should reveal some similar but different 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;

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.

Customized Popup Close Button

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


Get Elementor Pro