--- title: Elementor Widgets description: "The plugin includes several Elementor widgets for displaying notification features on your frontend. ![](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-elementor-widgets.jpg) ### Notification Bell Widget The notification bell is the main way users see and interact with their notifications. #### Content Settings **Bell Icon** - Choose any…" url: "https://nelxstudio.com/docs/elementor-widgets/" updated: "2026-04-27" category: Nelx Notification System --- # Elementor Widgets The plugin includes several Elementor widgets for displaying notification features on your frontend. ![](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-elementor-widgets.jpg) ### Notification Bell Widget The notification bell is the main way users see and interact with their notifications. #### Content Settings **Bell Icon** - Choose any icon from the Elementor icon library - Set the icon size - Pick the icon color and hover color **Badge** - Choose badge position: Top Right, Top Left, Bottom Right, Bottom Left - Set badge text color and background color - Badge automatically hides when there are no notifications **Dropdown** **Style** - **Classic:**Traditional style with separate action buttons. - **Modern:** Clickable messages with icon-based actions. - **Minimalistic:** Minimal UI with action menu on hover/click. **Dropdown** - Set dropdown width and max height - Choose dropdown position (Left, Center, Right) - Show dropdown in editor for easier design **Preferences Link** - Add an icon that links to your notification settings page - Set the link URL - Customize the icon **Header** - Set the dropdown title (default: "Notifications") - Show/hide the "Mark All" button - Customize button text - Show/hide the close button **Notification Items** - Show/hide "Mark as Read" buttons - Customize button text - Show/hide "See details" links - Customize link text #### Style Settings The style tab lets you customize every aspect of the notification bell: - **Category Badge** — Background color, text color, size, typography - **Modern** **Item Style** — Item hover background, checkmark color - **Minimalistic** **Menu Style** — Menu container (background color, border color, border width, border radius, box shadow, menu width, menu padding), Menu Items (typography, item padding, divider color, divider width), View link/see details (normal/hover: text color, background color), Mark read button (normal/hover: text color, background color), Action Dots Icon (dots color, dots hover color, dots size) - **Bell Icon** — Padding, margin, hover colors - **Badge** — Size, typography, border, border radius, box shadow - **Dropdown** — Background, border, border radius, box shadow, padding, margin - **Preferences Link** — Colors, size, rotation, hover effects - **Header** — Background, typography, text color, padding, border - **Mark All Button** — Typography, colors, border, padding, margin - **Close Button** — Size, color, hover color, margin - **Category Tabs** — Text colors, background colors, border colors, padding, margin - **Notification Items** — Typography, text color, background colors, border, padding, margin - **Notification Type** — Background color, typography, text color, padding, border, border radius, margin - **View Link** — Typography, colors, margin - **Mark Read Button** — Typography, colors, border, padding, margin ![Nelx notifications system notification bell widget](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-notification-bell-widget.webp) ![Nelx notifications system dropdown styles](https://nelxstudio.com/wp-content/uploads/2026/03/Nelx-notification-dropdown-styles.jpg) ### Notification Preference Settings Widget This widget lets users manage their notification preferences on the frontend. ![Nelx notifications system manage preferences settings icon on notification bell dropdown](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-manage-preferences-icon.webp) #### How It Works 1. Users see a "Manage Preferences" toggle 2. When expanded, they see all preference groups applicable to their role 3. Each group has: - Main enable/disable toggle - Sound toggle - Subtype toggles (if configured) #### User Experience - Users can enable/disable entire notification types - They can control whether each type plays a sound - They can enable/disable specific subtypes - Settings save automatically when changed ![Nelx notifications system manage preferences Elementor widget](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-manage-preferences-widget.webp) ### Sound Settings Widget This widget lets users customize their notification sounds. #### Features - **Enable/Disable Sounds** — Master toggle for all notification sounds - **Sound Selection** — Choose from available sounds (default or custom) - **Play Preview** — Click the play button to hear what a sound sounds like #### How It Works 1. Users toggle "Enable notification sound" on/off 2. When enabled, they can select a sound from the dropdown 3. Click the play button to preview the sound 4. Settings save automatically when changed ![Nelx notifications system sound preferences Elementor widget](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-sound-preferences-widget.webp) ### Notification Form Widget This is the frontend version of the admin notification form. It's only visible to users with administrator permissions. #### Features - Same functionality as the admin form - Full recipient selection (manual IDs, user search, role selection) - Notification type dropdown (auto-populated from CCT) - Message field - URL field with page/post selector - Real-time validation - Success/error messages #### Security - Only accessible to logged-in users with `manage_options` capability - Nonce verification on all requests - Input sanitization and validation ![Nelx notifications system frontend send notification form Elementor widget](https://nelxstudio.com/wp-content/uploads/2026/03/nelx-notifications-system-send-notification-form-widget.webp)