Alert Box Shortcode

Displays an alert box element to your web page. You can choose between clean, squared and round styles. Frontend Builder comes with five different presets for the shortcode, but you can also create a completely unique alert box, by customizing icons, layouts and color scheme.

Examples of the alert box shortcode usage

We tried to cover all the basic and
advanced uses for the image shortcode

Examples of alert box presets with previously defined icons and color schemes.

Info Alert Box
Success Alert Box
Notice Alert Box
Warning Alert Box
Info Alert Box
Success Alert Box
Notice Alert Box
Warning Alert Box

A couple of custom designed alert boxes.


Basic settings for alert box shortcode

Basic settings for your basic needs. Frontend builder gives the
user an option to create basic stuff with ease

Set style

Choose the general style of the shortcode, You can choose between clean, squared and round variants.

Content text / HTML

You can use the text field to write plain text, or custom HTML. Frontend Builder has an embedded WordPress editor, which you can use to easily customize your content. Text content

Clone shortcode

Once you are happy with the looks of your shortcode, you can clone it and use it somewhere else

Set the type of alert

Choose between a set of premade variants - info, success, notice, warning, or custom.

Custom style

Enables a custom style options, in which you can choose a unique icon and color scheme for every element.

Drag & drop shortcode

You can move your shortcode to any column on the page by dragging that shortcode

Advanced settings for button shortcode

In case that you need something more creative and complex
Frontend builder has a set of advanced options to get you there

Choose the link type

You can open a standard link, in new tab, a lightbox image or a lighbox iFrame

Dimensions of the Lightbox iFrame

You can set custom dimensions for the Lightbox iFrame link type

Hover icon

You can easily change the hover icon. We are offering you 3 icon galleries with Fbuilder

ID & Custom CSS

You can easily insert your own, custom CSS for that personalized look

Bottom margin

You can set different bottom margins for different elements / shortcodes


You can easily animate each shortcode with tons of different animation types

Animation delay

All animations appear only when the user scrolls to the specific shortcode, you can set the delay for that

Animation speed

You can manually change the speed of each animation for each element / shortcode

Animation group

By placing different shortcodes in a group, all shortcodes in that group will animate once the user scrolls to the first element in the group