Features
For such a small plugin, Singular Alerts comes with many features.
Shortcode and Block Support
Whether using the classic or block editor, you can use Singular Alerts to output beautiful alert boxes.
See Shortcode Usage for the full ] reference. The plugin comes with blocks inspired by four UI component libraries: Each has its own unique style and variations, which can be configured on the block itself or in the sidebar options. Each block has several theme styles to choose from. For example, the Bootstrap alert block has a handful of available style options. Please view the example below for how multiple blocks can look depending on the style chosen. In addition to different styles, each block has its own variants. Here’s an example of a centered variant of the Warning style. Singular Alerts comes with a custom icon selector that allows for easy insertion of different icons. Simply click on the icon and you’ll be able to select a new one. In addition to icons, you can also insert your own SVGs instead of the pre-selected icons. [
Four Alert Blocks — and Many Styles to Choose From
Styles Make the Block Customizable
Style Variants
Icon Selector
Inspired by GenerateBlocks
The icon selector and SVG compatibility was inspired by the GenerateBlocks plugin.
Singular Alerts has icons from the following sources.
Disable or Enable Elements
With the block options, you can enable or disable the title, description, icon, and button.
For example, a button isn’t shown by default. You can enable a button using the above options.
Buttons
The UI libraries didn’t include button styles, but CTAs are important for alerts, so it was added in as a feature.
Button Link Options
With the inclusion of buttons comes a mechanism to link out to your resource. Add a link and set it to launch in a new window, and modify the rel attributes for nofollow or sponsored links.
Set the Container’s Maximum Width
The block has different alignment options, but if you choose a centered, wide, or full-width alignment, you may find the block to be too wide when viewed on the front-end.
With a Maximum Width option, you can adjust how wide your alert block can be when viewed at wider widths.
Each width can be adjusted via pixel, percentage, or viewport width.
Change the Base Font Size
The styles for the alert blocks are all relative to a base font size. You can adjust this base to be smaller or bigger depending on your needs.
Icon Size
Fine-tune the size of the alert icon independently of the base font size. This is useful when you want a larger or smaller icon relative to the alert text.
Typography
The Lato Google Font is used on the front-end to allow the alerts to stand out even more. You can disable it and use your own font via filters — see Custom Fonts.
Display Conditions
Show or hide alerts based on date, day of week, URL parameters, or user roles. Display conditions are available in the block sidebar and in the [alertsdlx] shortcode. See Display Conditions.
Site-Wide Admin Settings (2.4.0+)
Configure headline elements, custom title classes, enabled block themes, and more under Settings → AlertsDLX. See Finding the Admin Settings.
Display Conditions