Notification Block

Are you looking into drawing visitors’ attention with succinct and minimal notification messages? Then the Notification is the block you need to use!

How to add a Notification to your WordPress pages

To add a Notification to your site, you will need to have the Notification block enabled under FireBlocks.

You can manage your blocks by reading more here.

Once you have the Notification block enabled, it's as simple as following the steps listed below:

Within the Gutenberg editor, click on the plus sign, search for "Notification" under the FireBlocks category and select it.

Once you have placed the Notification block on your page, you can select a theme to get started.

Once you have selected a theme, you can get started customizing the block as you desire.

You can enter your title and text in the placeholder areas appearing in grey.

Block Settings

Below we will explain each section and its settings that are provided by the Notification block.

Styles

Define the type, theme, and variation of your notification block.

• Type
  • Select the notification type. Whether you want to display an information, success, error or warning message.
• Theme
  • Select the theme. Whether its only a text or a combination of title and text.
• Variation
  • Select the variation. Whether its a light colored notification, colored based by the type, dark mode or a custom color scheme that you can define.

Colors

Appears when "Variation" is set to "Custom".

Define the text and background color of the notification block.

The available settings are listed below:

• Text Color
  • Set the text color of the notification.
• Background Color
  • Set the background color of the notification.

Block

Define the margin and padding of the block.

The available settings are listed below:

• Margin
  • Set the spacing between the block and its surrounding elements.
• Padding
  • Set the inner spacing of the block.

Title

This section allows you to style the title within the notification.

The available settings are listed below:

• Enable
  • Set whether to enable or not the title.
• Title Margin Bottom
  • Set the space between the title and the message.
• Title Font Size
  • Set the font size of the title.

Message

This section allows you to set the message's settings.

The available settings are listed below:

• Message Font Size
  • Set the font size of the message.

Close Button

This section allows you to set the close button appearance and functionality.

The available settings are listed below:

• Show Close Button
  • Set whether to enable or disable the close button.
• Color
  • Set the close button color.
• Hover Color
  • Set the hover color of the close button.
• Enable Cookies
  • Set to enable the saving of a cookie in user's browser and retain the notification closed for the set duration of time.
• Close notification for (days)
  • Set how many days the notification will remain closed for the visitor.

Block Demos

Below you can find a few notification demos:

You can find more demos on the dedicated page of the Notification block.

FAQ