Notifal notification templates render outside a normal WordPress page. That is great for popups, but it means Elementor styles and some theme assets need extra handling. This guide covers cache, preview, and theme compatibility so your Elementor designs look the same in the editor, in preview, and on your live site.
Building your first Elementor template? Start with Creating a Template with Elementor.
For widget settings, see Notifal Elementor Widgets Reference.
Block Editor and HTML Builder preview work similarly. See Block Editor Template Preview.
How Notifal renders Elementor templates
When a visitor sees a notification:
- Notifal loads the linked Elementor template
- Replaces tags like
{product_name}with live data - Bundles the CSS and JavaScript Elementor needs
- Shows the notification in Notifal's wrapper (popup, toast, bar, etc.)
This happens via Notifal's front-end system, not through your theme's page template. Notifal works to include Elementor's generated styles automatically.
Template preview
Front-end preview (recommended)
- Go to Notifal → Templates.
- Click Preview on your Elementor template.
What you get:
- A clean standalone page (no theme header/footer)
- Elementor styles loaded
- Sample products, orders, and posts fill in tags
- Fresh output (preview disables caching)
You must be logged in with permission to edit templates. Draft templates can be previewed before publish.
Same preview flow as the Block Editor. Details: Block Editor Template Preview.
Elementor editor preview
While designing in Elementor:
- Featured Image uses Preview Image Source and sample data
- Tags in headings may show placeholders until front-end preview
- Action Button styling is accurate; live URLs apply on the real notification
Use the Templates list Preview link for the most realistic check.
Cache and stale styles
Automatic cache clearing
When you save an on-page notification, Notifal clears Elementor-related cache for the linked template:
- Elementor CSS files
- Template-specific generated CSS
- Related Elementor transients
This helps template changes show up quickly after you edit a design and update the notification.
If styles still look old
Try these steps in order:
- Re-save the notification that uses the template (Notifal → OnPage Notifications → Update)
- In Elementor, go to Elementor → Tools → Regenerate CSS & Data
- Clear any site-wide cache plugin (if you use one)
- Hard-refresh your browser (Ctrl+F5 or Cmd+Shift+R)
Theme conflicts
Why themes can cause issues
Themes and plugins often load CSS only on normal page views. Notifications load through Notifal's system, so some theme styles might not load automatically.
Notifal addresses this by:
- Capturing CSS and JS enqueued during template render
- Re-running script hooks with the template as context
- Including Elementor's per-template CSS file
- Loading Elementor core frontend scripts
WoodMart and similar themes
Some themes (including WoodMart) skip assets during certain requests. Notifal detects common WoodMart widget classes in your template HTML and force-loads matching styles.
If a third-party Elementor widget looks correct in Elementor but broken in the live notification:
- Re-save the notification
- Regenerate Elementor CSS
- Test with a default theme (like Twenty Twenty-Four) to see if the theme is the cause
Third-party Elementor widgets
Many Elementor add-ons (sliders, countdowns, banners) work inside Notifal templates. Notifal collects their assets when rendering.
| Situation | What to expect |
|---|---|
| Widget works in Elementor preview | Usually works in notifications too |
| Widget needs theme header | May not work (notifications are not full pages) |
| Widget relies on page scroll | Test carefully; notifications are isolated overlays |
Prefer Notifal widgets for image, button, and close behavior because they understand notification data and analytics.
Compatibility checklist
| Check | Action |
|---|---|
| Template saved in Elementor | Publish or update in Elementor editor |
| Notification linked to template | General tab on the notification |
| Notification saved after template edit | Update notification to refresh cache |
| Elementor CSS regenerated | Elementor → Tools if styles missing |
| Tested on front end | Private/incognito window with Status on |
Preview vs live notification
| Aspect | Template preview | Live notification |
|---|---|---|
| Sample vs real data | Sample products/orders | Content source filters |
| Timing (delay, exit intent) | Not applied | Applied |
| Display rules (pages, users) | Not applied | Applied |
| Notification Status | Not required | Must be on |
See Understanding Notification Status.
Troubleshooting
| Problem | Things to try |
|---|---|
| Notification shows unstyled HTML | Re-save notification; regenerate Elementor CSS |
Tags show as {product_name} on live site | Enable tag in Settings → Tags; check content source |
| Featured Image empty on live site | Confirm content source has products/orders; check filters |
| Elementor widget missing styles | Test with default theme; re-save notification |
| Preview works, live site does not | Check notification Status, timing, and display rules |
| Ajax Add to Cart fails | WooCommerce must be active; content source needs a product |
Best practices
- Use Notifal widgets for image, button, and close (tracking and context built in).
- Use standard Elementor widgets for layout, typography, and decoration.
- Preview from Templates list before going live.
- Re-save the notification after every Elementor template change.
- Avoid designs that depend on the theme header, footer, or full page width.
What to read next
Elementor series
- Creating a Template with Elementor
- Notifal Elementor Widgets Reference
- Elementor and Notifal Compatibility (you are here)