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?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

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!

Click me

 /*----------------------------------------
// 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