Promo Box

Overview

The Promo Box Shortcode allows you to add a special notification with call to action button to draw the visitors attention. It is a convenience element for something that by now can also be achieved in a more flexible way with column and button shortcode 😉

Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!

Click me

Examples of Promo Box.

Promo Box Settings

  • Promo Box Button
  • Button Label
  • Button Link
  • Button Color
  • Button Size
  • Button Icon
  • Custom Font Color
  • Custom Background Color
  • Custom Border Color

Code Snippets

How to use the snippets?

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_promobox button='yes' label='Click me' link='single' link_target='' color='theme-color' custom_bg='#444444' custom_font='#ffffff' size='large' icon_select='no' icon='' box_color='' box_custom_font='#ffffff' box_custom_bg='#444444' box_custom_border='#333333' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av_uid='av-22g8oa']
Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!
[/av_promobox]

Customization

Custom Style

Promo box element will allow you to add custom colors to the background, button and fonts. In case you wish to add a background image or custom style your promo box please use the CSS below.

Welcome Stranger! This is an example Text for your fantastic Promo Box! Feel Free to delete it and replace it with your own fancy Message!

 /*----------------------------------------
// CSS - Promo box custom style
//--------------------------------------*/

/* Promo box*/
#top .av_promobox {
background: #fbb034;
}

/* Promo content */
#top .av_promobox .avia-promocontent {
	color:#222;
}

/* Promo box button */
#top .av_promobox .avia-button {
	background: #34bf49;
	border:none;
}

/* Button title */
#top .av_promobox .avia-button .avia_iconbox_title {
	color:#fefefe;
}

Resource

Contributed video:

Promo Box Tutorial