This feature is available only for Premium members

NOTE: You can access all the shortcodes via the shortcodes icon on your visual editor. See this document if you need more information

 

Description and Code

 

Alert messages come in various basic types. You can also configure a custom type to your own preferences. Here's an example of the shortcode in code view:

[alert_component type="primary" accent_color="" background_color="" border_size="1px" icon="" box_shadow="yes" animation_type="0" animation_direction="down" animation_speed="0.1" class="" id=""]Your Content Goes Here[/alert_component]

 

Parameters

 

  • type
    • set the predefined color of the alert
    • Possible values - primary, secondary, success, danger, warning, info, light, dark, custom
  • accent_color
    • when custom type is selected, defines the alert accent color
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • background_color
    • when custom type is selected, defines the alert accent color
    • Possible values - hex code #000000, or color name black or rgba values like rgba(0,0,0,0.4)
  • border_size
    • defines the border width of the alert
    • Possible values - use unit with pixels like 1px
  • icon
    • when custom type is selected, defines the alert icon
    • Possible values - use Font Awesome like fas fa-tag
  • box_shadow
    • enable/disable the shadow effect of the alert
    • Possible values - yes or no
  • animation_type
    • set the animation type of the component
    • Possible values - none, bounce, fade, flash, shake, slide
  • animation_direction
    • set the animation direction of the component
    • Possible values - down, left, right, up
  • animation_speed
    • set the animation speed of the component
    • Possible values - in seconds like 0.1, 1, 5.3 etc.
  • class
    • custom class for CSS of component
    • Possible values - string - like custom-element-class
  • id
    • custom ID for CSS of component
    • Possible values - string - like custom-element-id

 

Basic Examples

 

This is an example of alert with the Primary style
This is an example of alert with the Secondary style
This is an example of alert with the Success style
This is an example of alert with the Danger style
This is an example of alert with the Warning style
This is an example of alert with the Info style
This is an example of alert with the Light style
This is an example of alert with the Dark style
This is an example of alert with the Custom style

 

Animated Examples

 

This is an example of alert with the Info style with Fade animation

This is an example of alert with the Info style with Slide animation