[vc_row full_width=”stretch_row” parallax=”content-moving” css=”.vc_custom_1430235677088{padding-top: 35px !important;padding-bottom: 60px !important;background-image: url(‘http://vcpreview.com/wp-content/uploads/2015/01/background_flat.png?id=23’)!important ;background-position: center;background-repeat: no-repeat;background-size: cover !important;}”][vc_column][vc_custom_heading text=”Message Box” font_container=”tag:h2|font_size:46|text_align:left|color:%23ffffff|line_height:1.5″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:700%20bold%20regular%3A700%3Anormal”][vc_separator align=”align_left” border_width=”3″ el_width=”50″ el_class=”separator-in-title”][vc_column_text css=”.vc_custom_1437477796714{margin-top: -15px !important;}”]Message Box element displays notifications like Information, Success, Warning, Error or custom message to drag user attention to his actions or provide useful tips.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Default Message Box Elements” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1437477811299{padding-bottom: 15px !important;}”][vc_column_text]
Visual Composer offers Message Box presets that can be added to your page with few clicks. At the moment there are Information, Warning, Error and Success message boxes available out of the box displayed in Classic or Modern format.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_message color=”alert-info” message_box_color=”alert-info” icon_type=”pixelicons” icon_pixelicons=”vc_pixel_icon vc_pixel_icon-info”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”alert-warning” message_box_color=”alert-warning” icon_type=”pixelicons” icon_pixelicons=”vc_pixel_icon vc_pixel_icon-alert”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”alert-danger” message_box_color=”alert-danger” icon_type=”pixelicons” icon_pixelicons=”vc_pixel_icon vc_pixel_icon-explanation”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”alert-success” message_box_color=”alert-success” icon_type=”pixelicons” icon_pixelicons=”vc_pixel_icon vc_pixel_icon-tick”]I am message box. Click edit button to change this text.[/vc_message][/vc_column][vc_column width=”1/2″][vc_message color=”info”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”warning” message_box_color=”warning” icon_fontawesome=”fa fa-exclamation-triangle”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”success” message_box_color=”success” icon_fontawesome=”fa fa-check”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”danger” message_box_color=”danger” icon_fontawesome=”fa fa-times”]I am message box. Click edit button to change this text.[/vc_message][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Message Box Styles” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1422628827521{padding-bottom: 15px !important;}”][vc_column_text]
Visual Composer defines 5 styles (Standard, Solid, Solid icon, Outline, 3D) and 3 shapes (Square, Rounded, Round) which can be easily combined to unique message box for your WordPress page.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=”1/2″][vc_message color=”info” message_box_style=”solid”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”warning” message_box_style=”solid” style=”round” message_box_color=”warning” icon_fontawesome=”fa fa-exclamation-triangle”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”danger” message_box_style=”solid” style=”square” message_box_color=”danger” icon_fontawesome=”fa fa-times”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”success” message_box_style=”solid-icon” style=”square” message_box_color=”success” icon_fontawesome=”fa fa-check”]I am message box. Click edit button to change this text.[/vc_message][/vc_column][vc_column width=”1/2″][vc_message color=”info” message_box_style=”3d”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”warning” message_box_style=”outline” style=”square” message_box_color=”warning” icon_fontawesome=”fa fa-exclamation-triangle”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”success” style=”square” message_box_color=”success” icon_fontawesome=”fa fa-check”]I am message box. Click edit button to change this text.[/vc_message][vc_message color=”danger” message_box_style=”solid-icon” style=”round” message_box_color=”danger” icon_fontawesome=”fa fa-times”]I am message box. Click edit button to change this text.[/vc_message][/vc_column][/vc_row][vc_row full_width=”stretch_row_content_no_spaces”][vc_column][vc_separator][/vc_column][/vc_row][vc_row][vc_column][vc_custom_heading text=”Custom Icons and Colors” font_container=”tag:h3|font_size:38|text_align:center|color:%233a3a3a|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal” css=”.vc_custom_1422629309274{padding-bottom: 15px !important;}”][vc_column_text]
It is easy to apply custom icon to your message box by simply choosing icon library and selecting icon you wish to use for your message box. The same principles applies to color settings which allows you to use lots of predefined colors to style message box.
[/vc_column_text][/vc_column][/vc_row][vc_row css=”.vc_custom_1422634159841{padding-bottom: 35px !important;}”][vc_column width=”1/2″][vc_message message_box_style=”solid” style=”round” message_box_color=”juicy_pink” icon_fontawesome=”fa fa-ban”]I am message box. Click edit button to change this text.[/vc_message][vc_message message_box_style=”solid-icon” style=”square” message_box_color=”chino” icon_type=”entypo” icon_entypo=”entypo-icon entypo-icon-pencil”]I am message box. Click edit button to change this text.[/vc_message][vc_message message_box_style=”solid” message_box_color=”sandy_brown” icon_type=”linecons” icon_linecons=”vc_li vc_li-heart”]I am message box. Click edit button to change this text.[/vc_message][vc_message message_box_style=”outline” message_box_color=”vista_blue” icon_type=”linecons” icon_linecons=”vc_li vc_li-bubble”]I am message box. Click edit button to change this text.[/vc_message][/vc_column][vc_column width=”1/2″][vc_message message_box_style=”solid” message_box_color=”blue” icon_fontawesome=”fa fa-anchor”]I am message box. Click edit button to change this text.[/vc_message][vc_message message_box_style=”3d” message_box_color=”warning” icon_fontawesome=”fa fa-cog”]I am message box. Click edit button to change this text.[/vc_message][vc_message style=”square” message_box_color=”green” icon_type=”entypo” icon_entypo=”entypo-icon entypo-icon-location”]I am message box. Click edit button to change this text.[/vc_message][vc_message style=”square” message_box_color=”grey” icon_fontawesome=”fa fa-graduation-cap”]I am message box. Click edit button to change this text.[/vc_message][/vc_column][/vc_row][vc_row full_width=”stretch_row” parallax=”content-moving” css=”.vc_custom_1430230577382{margin-bottom: -1px !important;padding-top: 35px !important;padding-bottom: 45px !important;background-image: url(‘http://vcpreview.com/wp-content/uploads/2015/01/background_flat.png?id=23’)!important ;background-position: center;background-repeat: no-repeat;background-size:cover;}”][vc_column][vc_custom_heading text=”Want Some More?” font_container=”tag:h4|font_size:38|text_align:center|color:%23ffffff|line_height:1.2″ google_fonts=”font_family:Lato%3A100%2C100italic%2C300%2C300italic%2Cregular%2Citalic%2C700%2C700italic%2C900%2C900italic|font_style:400%20regular%3A400%3Anormal”][vc_column_text css=”.vc_custom_1430235700796{margin-bottom: 15px !important;}”]
Why don’t you test it yourself? You are only one click away from your personal demo which allow you to access of the elements and see how easy it is to work with Visual Composer Page Builder for WordPress.
[/vc_column_text][vc_btn title=”Launch My Demo Site” style=”flat” color=”juicy-pink” size=”lg” align=”center” link=”||” el_class=”vcd_start”][/vc_column][/vc_row]