Creating a Template with the Block Editor

The Block Editor (Gutenberg) is WordPress's built-in page builder. Notifal adds custom blocks so you can design notification templates without writing HTML.

Prefer a code-based editor or Elementor? See Creating a Template with the HTML Builder or Creating a Template with Elementor.

If you are new to Notifal, Your First On-Page Notification shows how to import a ready-made template first.

When to use the Block Editor

Step 1: Create a new template

1. Go to Notifal → Templates.
2. Click Add New and choose the WordPress Editor option (or open an existing block editor template).

WordPress opens the template in the Block Editor. A Template Container block is added automatically as the starting frame.

Step 2: Choose a starting layout

Inside the Template Container, Notifal asks you to Choose a starting layout:

Pick the layout closest to your design. You can switch to a custom layout later from the block sidebar.

Step 3: Add Notifal blocks

1. Click inside a column or group.
2. Click the + inserter.
3. Open the Notifal category (appears at the top of the list).

Available Notifal blocks:

Full settings for each block: Notifal Gutenberg Blocks Reference.

You can also add standard WordPress blocks (paragraph, heading, image, list) inside the container.

Step 4: Add dynamic tags

Tags insert live data like {product_name} or {cart_total}.

1. Select a text block (paragraph, heading, or Action Button text).
2. Open the Notifal Tags panel in the right sidebar (tag icon).
3. Browse or search for a tag.
4. Click a tag to copy it, then paste into your text.

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

Step 5: Style the container

Select the Template Container block to adjust:

• Background color, gradient, or image
• Width, padding, border, and shadow
• Column gap and alignment
• Custom CSS (optional, in the sidebar)

Step 6: Preview and save

1. Use the template Preview link from the Templates list for a front-end view with sample data. See Block Editor Template Preview.
2. Click Save draft or Publish in the WordPress editor.

Step 7: Assign to a notification

1. Go to Notifal → OnPage Notifications.
2. Open a notification.
3. In General, select your template.
4. Turn Status on. See Understanding Notification Status.

Recommended layout pattern

A simple notification often looks like this:

[ Close Icon - top right ]
[ Featured Image ]
[ Heading with {product_name} ]
[ Short text with tags ]
[ Action Button ]

Place the Close Icon in a top corner. Put the Action Button last so it is easy to tap on mobile.

Checklist

• [ ] Created template via Notifal → Templates → Add New (WordPress Editor)
• [ ] Chose a starting layout in Template Container
• [ ] Added Notifal blocks (Featured Image, Action Button, Close Icon)
• [ ] Inserted tags via the Notifal Tags sidebar
• [ ] Previewed the template on the front end
• [ ] Published template and assigned it to a notification

What to read next

Block Editor series

1. Creating a Template with the Block Editor (you are here)
2. Notifal Gutenberg Blocks Reference
3. Block Editor Template Preview

Other template editors

• Creating a Template with the HTML Builder
• Creating a Template with Elementor