How to Add Close Button in Alert Box/Message Box Elementor?

Updated onApril 11, 2026By

Key Takeaways

  • Message Box Widget from The Plus Addons for Elementor allows users to add a close button to alert boxes.
  • Users can adjust the Closing Animation Durations between 500ms and 2500ms for the message box.
  • The Close Button toggle must be enabled to display the closing button in the message box.
Table Of Content

These message boxes are often missing a key feature – a close button. This can be frustrating for users who want to dismiss the box without taking any action.

With the Message Box Widget from The Plus Addons for Elementor, you can add a close button to alert boxes or message boxes using Elementor.

To check the complete feature overview documentation of The Plus Addons for Elementor Message Box widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

LIVE WIDGET LINK

To do this, add the Message Box widget to the page and follow the steps – 

1. From the Title, you can add a title for the alert box.

2. From the Description toggle, you can add a description to the alert box.

Tpae messagebox add close icon button how to add close button in alert box/message box elementor? From the plus addons for elementor

Icon & Button –  From here, you can add an Icon and a closing button for the message box.

Enable the Main Icon toggle to put an icon in the message box. Then choose Select Icon to pick your icon image from files you have or upload a new one.

3. You have to enable the Close Button toggle to have the closing button appear for the message box.

Use the Select Icon option to add an image from the media library or upload a new image.

4. Adjust the Closing Animation Durations to set the timing for the message box to close once the close button is clicked, and you can control how fast the icon closes.

For example, setting it to 500ms means it will close quickly, while 2500ms will make it close more slowly.

Now you will have a close button to your alert box/message box.

Close button message box demo

Suggested Read: How to Add Description in Elementor Message Box Using an Elementor Template

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the close button is not appearing in my message box?

If the close button isn't showing, ensure that you have enabled the Close Button toggle in the Message Box settings. This toggle must be activated for the button to appear. Additionally, check that you have selected an icon for the close button using the Select Icon option. If these settings are correct and the button still doesn't show, try refreshing the page or checking for plugin conflicts.

How do I add a description to my alert box in Elementor?

To add a description to your alert box, use the Description toggle in the Message Box settings. This allows you to provide additional context or information alongside the title. For more detailed instructions, you can refer to the guide on adding descriptions in Elementor message boxes.

Does the Message Box widget work with other page builders besides Elementor?

The Message Box widget from The Plus Addons for Elementor is designed exclusively for use with Elementor. It does not work with other page builders like Gutenberg, Beaver Builder, or Divi. If you're using Elementor, you can take full advantage of the widget's features, including the close button functionality.

What are the best practices for using the close button in message boxes?

When using the close button in message boxes, it's best to ensure that it is clearly visible and easily accessible to users. Consider the timing of the closing animation; a duration of around 500ms is often ideal for a quick dismissal without feeling abrupt. Additionally, using a recognizable icon for the close button can enhance usability and ensure users understand its function.

Last reviewed: April 11, 2026

Related Docs