Alert Message Shortcode

Avada includes an alert message shortcode that you can use throughout the site. These are perfect for displaying important information, alerts or messages to your viewers. The options we include allow you to animate the box when it shows in the viewport, use font awesome icons, customize the colors, accent colors, border sizes and more. Many options to fit every situation.

[alert type=”general” accent_color=”” background_color=”” border_size=”1px” icon=”fa-star” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert]

Choose From 4 Message Types Or Build Your Own!

[alert type=”custom” accent_color=”#848484″ background_color=”rgba(255,255,255,.25)” border_size=”1px” icon=”fa-info” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert][alert type=”error” accent_color=”” background_color=”” border_size=”1px” icon=”” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert]
[alert type=”success” accent_color=”” background_color=”” border_size=”1px” icon=”fa-star” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert][alert type=”notice” accent_color=”” background_color=”” border_size=”1px” icon=”fa-star” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert]

Color Control

Control the background color and accent color (text / icon / border)
[alert type=”custom” accent_color=”#fff” background_color=”#e5694b” border_size=”1px” icon=”fa-laptop” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert]

Border Control

Control the border size and color of the message box.
[alert type=”custom” accent_color=”#39a4c3″ background_color=”#fff” border_size=”7px” icon=”fa-trophy” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Message Box Shortcodes[/alert]

Box Animations

Animate the message boxes with smotth CSS3 animations. 5 animations types, 4 directions, speed control
[alert type=”custom” accent_color=”#39a4c3″ background_color=”” border_size=”1px” icon=”fa-thumbs-up” box_shadow=”yes” animation_type=”bounce” animation_direction=”down” animation_speed=”1″ class=”” id=””]Message Box Animations[/alert]
[alert type=”custom” accent_color=”#f56441″ background_color=”” border_size=”1px” icon=”fa-magic” box_shadow=”no” animation_type=”shake” animation_direction=”down” animation_speed=”1″ class=”” id=””]Message Box Animations[/alert]

Box Shadow

Choose if the box displays a subtle bottom shadow or not.
[alert type=”general” accent_color=”” background_color=”” border_size=”1px” icon=”fa-trophy” box_shadow=”yes” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]Subtle Bottom Shadow[/alert]
[alert type=”general” accent_color=”” background_color=”” border_size=”1px” icon=”fa-trophy” box
_shadow=”no” animation_type=”0″ animation_direction=”down” animation_speed=”0.1″ class=”” id=””]No Bottom Shadow[/alert]

Join The 70,000+ Satisfied Avada Users!