The “Notification Widget“ allows you to create eye-catching notifications for free in WordPress Elementor websites. Easily add a customizable notification box with a close icon to grab attention and convey important messages. Adjust colors, typography, and layout to match your site’s design while ensuring a seamless user experience.
Let’s look at each of the options in the “Notification Widget” below.
Add a Free Notification for Elementor
This widget requires Unlimited Elements Free version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Notification”
- Hover over the widget in the search results and click install
- Add your “Notification” widget to any Elementor Page
General Settings for Elementor Notification
Show Title
Show/Hide the title.
Notification Title
Type the notification title.
Title Tag
Select the html tag for title.
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
Show Description
Show/Hide the description in notification.
Notification Description
Type text for notification description.
Text Tag
Select the html tag for text.
- H1
- H2
- H3
- H4
- H5
- H6
- div
- span
- p
Show Button
Show/Hide button in notification.
Show Graphic Element
Show/Hide the graphic element.
Graphic Element Settings for Elementor Notification
Graphic Element Source
Select the graphic element source.
- Icon
- Image
- Text
- Elementor Template
Icon
Choose an icon to display.
Close Button Settings for Elementor Notification
Horizontal Position
Select the horizontal positioning.
- Left
- Right
Vertical Position
Select the vertical positioning
- Top
- Bottom
Horizonal Gap
Set the horizontal gap.
Vertical Gap
Set the vertical gap.
Close Icon
Choose icon for close button.
Show Close Button Text
Show/Hide the close button text.
Close Text
Type text for close button.
Additional Settings for Elementor Notification
Hover Transition Duration
Set the hover transition duration.
Button Entrance Animation
Select the button entrance animation.
- None
- Appear
- Scale Down
- Scale Up
- From Left
- From Right
- From Top
- From Bottom
Button Hover Animation
Select the button hover animation.
- Grow
- Shrink
- Pulse
- Pulse Grow
- Pulse Shrink
- Push
- Pop
- Bounce In
- Bounce Out
- Rotate
- Grow Rotate
- Float
- Sink
- Bob
- Hang
- Skew
- Skew Forward
- Skew Backward
- Wobble Vertical
Set Cookie Settings for Elementor Notification
Enable Cookie
When a cookie is set, the notification will not reappear if the notification is closed. The notification will reappear when the cookie expires.
Button Source Settings for Elementor Notification
Item Source
Select the item source from below options.
- Items
- Posts
- Meta Field
- JSON or CSV
- Gallery
- Terms
- Users
- Menu
Items (Buttons) Settings for Elementor Notification
Button Label
Type text to show as button label.
Button Link
Type of paste URL to link with button.
Button Label Color
Set the button label color.
Button Background Color
Set the button background color.
Border Color
Set the border color.
Styling the Elementor Notification
A variety of styling options are provided to control every aspect of the widget’s appearance. Select the colors that match the theme of your site. Make the widget look exactly how you want it to, by customizing the text, buttons, fonts, and layout.
Elementor Notification Layout Styling
Style the layout, alignment, padding, border, and background.
Elementor Notification Title Styling
In this section, style the title color, typography, and width.
Elementor Notification Description Styling
Set the description color, typography, and gap.
Elementor Notification Graphic Element Styling
Set the graphic element margin, gap, wrapper width, height, icon size, color, background, and border.
Elementor Notification Close Button Styling
Set the padding, border radius, border, typography, icon and text color for close button.
Elementor Notification Button Styling
You can set the button positioning, alignment, layout, typography, gap, padding, and border.
Usage Examples of Elementor Notification
Here are some live use cases for the Notification Widget.
Free Notification for Elementor with Multiple Action Buttons
Free Notification for Elementor with a Custom Image
Thank you for using the Notification Widget for Elementor! With its flexible styling and dynamic trigger options, this is the best Notification Widget for Elementor, helping you create engaging alerts and messages with ease. We hope it enhances your website’s communication and user interaction. If you have any questions or need assistance, feel free to reach out.
