Features

For such a small plugin, it comes with many features.

Shortcode and Block Support

Whether using the classic or block editor, you can use AlertsDLX to output beautiful alert boxes.

pageShortcode Usage

Four Alert Blocks - and many styles to choose from

The plugin comes with blocks inspired by three UI component libraries:

Bootstrap
Chakra
Material
Shoelace

Each has their own unique style and variations, which can be configured on the block itself or in the sidebar options.

Styles make the block customizable

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 how multiple blocks can look depending on the style chosen.

Style Variants

In addition to different styles, each block has its own variants.

Here's an example of a centered variant of the Warning style.

Icon Selector

AlertsDLX 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.

Inspired by GenerateBlocks: The icon selector and SVG compatibility was inspired by the GenerateBlocks plugin.

AlertsDLX 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 inclusions 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.