Hello,

Do you mean to add this Chrome style browser window box design? If you are talking about that, you can create this style using Portfolio and select the “chrome style” on Portfolio Element or page

Let me know

Thanks

Ah, sorry, you can add this boxes using shortcodes, let me send to you the source code for this page:

[vc_row][vc_column width="1/2" enable_animation="true" animation="bounceInUp" background_color_opacity="1"][vc_column_text][alert title="Default Box" style="default"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][vc_column width="1/2" enable_animation="true" animation="bounceIn" delay="200" background_color_opacity="1"][vc_column_text][alert title="Error Box" style="error"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="400" background_color_opacity="1"][vc_column_text][alert title="Success Box" style="success"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="600" background_color_opacity="1"][vc_column_text][alert title="Grey Box" style="grey"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="800" background_color_opacity="1"][vc_column_text][alert title="Warning" style="warning"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert][/vc_column_text][/vc_column][vc_column width="1/2" enable_animation="true" animation="bounceInUp" delay="1000" background_color_opacity="1"][vc_column_text][alert title="Information Box" style="info"]There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don’t look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there.[/alert]

[/vc_column_text][/vc_column][/vc_row]

Thanks

They are automatically generated from alert style type, for example the red one is for Error style

if you need custom colors, add them with custom css code.

Let me know if you need my help with css

Thanks

Add this:

.alert .alert_content{ text-align:center; }

Thanks

Did you added this:

.alert .alert_content{ padding-bottom:16px; } ??

Please add this code

.alert .alert_content{ padding-top:8px; padding-bottom:8px; } to vertically middle align

You’re welcome!

If you like our theme and support please give us a 5-star rating on Themeforest, it’s important for us :)

Thank You