The “Notification Widget” helps you add a simple notification box with a close icon to your Elementor website. A lot of customization options are available to create exactly the look you want for your Elementor page.
Let’s look at each of the options in the “Notification Widget” below.
Install Notification Widget 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 #
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 #
Graphic Element Source
Select the graphic element source.
- Icon
- Image
- Text
- Elementor Template
Icon
Choose an icon to display.
Close Button Settings #
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 #
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 #
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 #
Item Source
Select the item source from below options.
- Items
- Posts
- Meta Field
- JSON or CSV
- Gallery
- Terms
- Users
- Menu
Items (Buttons) Settings #
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.
Notification Widget Styling #
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.
Notification Styling #
Style the layout, alignment, padding, border, and background.
Notification Title Styling #
In this section, style the title color, typography, and width.
Description Styling #
Set the description color, typography, and gap.
Graphic Element Styling #
Set the graphic element margin, gap, wrapper width, height, icon size, color, background, and border.
Close Button Styling #
Set the padding, border radius, border, typography, icon and text color for close button.
Button Styling #
You can set the button positioning, alignment, layout, typography, gap, padding, and border.
Usage Examples #
Here are some live use cases for the Notification Widget.
