Creating a Template with Elementor

Elementor is a popular drag-and-drop page builder for WordPress. Notifal adds its own Notifal widget category so you can design notification templates visually, the same way you build pages.

Prefer the Block Editor or HTML Builder? See Creating a Template with the Block Editor or Creating a Template with the HTML Builder.

If you are new to Notifal, start with Your First On-Page Notification.

Requirements

If Elementor is not installed, the Templates screen shows a link to install it.

When to use Elementor

Step 1: Create a new Elementor template

1. Go to Notifal → Templates.
2. Click Create with Elementor (or choose Elementor from the add-new options).

Notifal creates a draft template and opens the Elementor editor for that template.

Step 2: Add Notifal widgets

In the Elementor panel, open the Notifal category. You will find:

Full settings: Notifal Elementor Widgets Reference.

You can also use any standard Elementor widget (heading, text, icon, countdown, etc.) for layout and decoration.

Step 3: Insert dynamic tags

Notifal tags (like {product_name}) personalize the notification with live data.

When editing a Notifal template, a tags panel appears in compatible Elementor widgets (Heading, Text Editor, Action Button). Browse tags by category and insert them into your text.

Enable tag categories under Notifal → Settings → Tags. For WooCommerce tags, see WooCommerce Setup for Notifal.

Step 4: Build a simple layout

A common structure:

[ Close Icon - top right ]
[ Featured Image ]
[ Heading: Someone bought {product_name} ]
[ Text with order or product details ]
[ Action Button: Shop now ]

1. Drag a section and set column layout.
2. Add Close Icon aligned top-right.
3. Add Featured Image (set Preview Image Source to Auto).
4. Add a Heading with tags.
5. Add an Action Button with Link Type Post Link or Ajax Add to Cart.

Step 5: Preview and publish

1. Use Elementor's Preview or the template preview link from Notifal → Templates.
2. Sample data fills in tags and images so you see a realistic design.
3. Click Publish in Elementor when satisfied.

Preview details: same flow as Block Editor Template Preview (standalone page, sample data, login required).

Step 6: Assign to a notification

1. Go to Notifal → OnPage Notifications.
2. Open a notification (or create one).
3. In General, select your Elementor template.
4. Turn Status on when ready. See Understanding Notification Status.

If styles look outdated after editing the template, re-save the notification or clear Elementor cache. See Elementor and Notifal Compatibility.

Import Elementor templates from the library

When you import a ready-made notification from the marketplace, choose the Elementor version if available. Notifal imports the linked Elementor template automatically.

See Your First On-Page Notification.

Checklist

• [ ] Elementor installed and active
• [ ] Created template via Create with Elementor
• [ ] Added Notifal widgets (Featured Image, Action Button, Close Icon)
• [ ] Inserted dynamic tags in headings and button text
• [ ] Previewed template with sample data
• [ ] Published template and assigned to a notification

What to read next

Elementor series

1. Creating a Template with Elementor (you are here)
2. Notifal Elementor Widgets Reference
3. Elementor and Notifal Compatibility

Other template editors

• Creating a Template with the Block Editor
• Creating a Template with the HTML Builder