Hello! Let us elaborate what are all the cool things you can do with the Interactive Banner Element.
Simple Interactive Banner with Title on Left (by default)
An image is used with the title, which is by default set to left.
[interactive_banner banner_title=”SUSAN THE JUST” banner_title_location=”left” banner_image=”3294″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”MARK THE STRONG” banner_title_location=”left” banner_image=”3295″ banner_style=”style02″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”SOFIA THE SILENT” banner_title_location=”left” banner_image=”3297″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”ALVIN THE CREATIVE” banner_title_location=”left” banner_image=”3296″ banner_style=”style02″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
Simple Interactive Banner with Title in Center
You can place your title to the center on the title bar & also you can customize the hover effects.
[interactive_banner banner_title=”Device Compatible” banner_image=”3179″ banner_style=”style12″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Extreme Typography” banner_image=”3178″ banner_style=”style11″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Easy To Use” banner_image=”3177″ banner_style=”style12″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
Image Icon Background and On-Hover Description
You can apply icons to the background simply by using Image Icon and choose to display text on Hover.
[interactive_banner banner_title=”SMILE WITH US” banner_desc=”We make you smile with our work that last forever. We work with simplicity and curiosity.” banner_image=”3196″ banner_bg_color=”#494949″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”START SHOPPING” banner_desc=”Our product is just awesome. You can buy it now from anywhere in the world.” banner_image=”3175″ banner_bg_color=”#494949″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”UNLOCK YOURSELF” banner_desc=”Unlock your power of creativity, we just spice them to make it more attractive.” banner_image=”3201″ banner_bg_color=”#494949″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”WE ARE WITH YOU” banner_desc=”Never be afraid we are with you. We support as long as you need it.” banner_image=”3200″ banner_bg_color=”#494949″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
Icons with the Title
You can place icons with the title section
[interactive_banner banner_title=”Smart Capture” banner_title_location=”left” banner_desc=”This is dummy image that only describes the photography effects.” icon_disp=”with_heading” banner_icon=”Ultimate-set-uniE627″ banner_image=”3183″ banner_style=”style04″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”light level” banner_title_location=”left” banner_desc=”This is dummy image that only describes the photography effects.” icon_disp=”with_heading” banner_icon=”Ultimate-set-uniE7F7″ banner_image=”3181″ banner_style=”style03″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Object Focus” banner_title_location=”left” banner_desc=”This is dummy image that only describes the photography effects.” icon_disp=”with_heading” banner_icon=”Ultimate-set-uniF087″ banner_image=”3180″ banner_style=”style04″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Color Effects” banner_title_location=”left” banner_desc=”This is dummy image that only describes the photography effects.” icon_disp=”with_heading” banner_icon=”Ultimate-set-uniE7E4″ banner_image=”3182″ banner_style=”style03″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
Icon on Hover
You can also use the icons with the On-Hover description.
[interactive_banner banner_title=”Speak With Us” banner_desc=”Feel free to speak with us. We love talking.” icon_disp=”with_description” banner_icon=”Ultimate-set-uniE6DB” banner_image=”3186″ banner_style=”style04″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Happy to Serve” banner_desc=”We are always happy and delighted working with you.” icon_disp=”with_description” banner_icon=”Ultimate-set-uniE05D” banner_image=”3185″ banner_style=”style03″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Custom Facility” banner_desc=”Its easy to customize in any manner you want.” icon_disp=”with_description” banner_icon=”Ultimate-set-uniE7D5″ banner_image=”3184″ banner_style=”style04″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
Colored Title Bar
Title Bar color can be changed according to the overall look of your website.
[interactive_banner banner_title=”iPhone” banner_desc=”Discover the world of iPhone, you will fall in love with it.” banner_image=”3299″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.42)” banner_opacity=”opaque”]
[interactive_banner banner_title=”iPad” banner_desc=”Explore the iPad features, you will fall in love with it.” banner_image=”3189″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”iPod” banner_desc=”Making difference in the world of sound, that’s what it is.” banner_image=”3187″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”MacBook” banner_desc=”Explore the variety of MacBook, and you will love it for sure. ” banner_image=”3188″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
Button Link on Hover
You can apply the read more link button to the On-Hover description
[interactive_banner banner_title=”Dark Image” banner_desc=”This image is Layered with dark shadow.” banner_image=”3190″ link_opts=”more” banner_link=”url:%23||” banner_link_text=”READ MORE” banner_link_bg_color=”rgba(36,36,36,0.4)” banner_style=”style21″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Water Splash” banner_desc=”This image is layered with water splash.” banner_image=”3191″ link_opts=”more” banner_link=”url:%23||” banner_link_text=”READ MORE” banner_style=”style22″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Skyscraper ” banner_desc=”This image is Layered with light and shadow .” banner_image=”3192″ link_opts=”more” banner_link=”url:%23||” banner_link_text=”READ MORE” banner_link_bg_color=”rgba(36,36,36,0.4)” banner_style=”style21″ banner_bg_color=”#0297dd” banner_overlay_bg_color=”rgba(36,36,36,0.38)” banner_opacity=”opaque”]
Link Complete Banner
Another example of link on the interactive banner is complete box link
[interactive_banner banner_title=”Camera one” banner_desc=”Camera is the great innovation. It captures very moments.” banner_image=”3194″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#e02302″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Camera Second” banner_desc=”Camera is the great innovation. It captures very moments.” banner_image=”3195″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#e02302″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Camera Third” banner_desc=”Camera is the great innovation. It captures very moments.” banner_image=”3193″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#e02302″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
Hover Effects
All Possible Cool Hover Effects Below.
[interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3301″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3301″ banner_style=”style04″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3301″ banner_style=”style13″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3301″ banner_style=”style31″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style02″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.41)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style11″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style21″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style32″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style02″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.41)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style11″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style21″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3300″ banner_style=”style32″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”]
[interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style03″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.38)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style12″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style22″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style33″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.38)” banner_opacity=”opaque”]
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style03″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.38)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style12″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style22″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”opaque”][interactive_banner banner_title=”Interactive banner title” banner_title_location=”left” banner_desc=”A short description of this banner. A short description of this banner. A short description of this banner.
” icon_disp=”both” banner_icon=”Ultimate-set-uniE832″ banner_image=”3302″ banner_style=”style33″ banner_bg_color=”#de5034″ banner_overlay_bg_color=”rgba(36,36,36,0.38)” banner_opacity=”opaque”]
Custom Height
Control the size of the banner with easy settings.
[interactive_banner banner_title=”Landscape First” banner_desc=”Freta orbem mundo fluminaque iners cingebant pace mentisque. Speciem surgere. ” banner_image=”3304″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#2d2d2d” banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”solid”]
[interactive_banner banner_title=”Landscape Second” banner_desc=”Freta orbem mundo fluminaque iners cingebant pace mentisque. Speciem surgere. ” banner_image=”3305″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#2d2d2d” banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”solid”]
[interactive_banner banner_title=”Landscape Fourth” banner_desc=”Freta orbem mundo fluminaque iners cingebant pace mentisque.” banner_image=”3306″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#2d2d2d” banner_overlay_bg_color=”rgba(36,36,36,0.39)” banner_opacity=”solid”]
[interactive_banner banner_title=”Landscape Third” banner_desc=”Freta orbem mundo fluminaque iners cingebant pace mentisque. Speciem surgere. ” banner_image=”3307″ link_opts=”box” banner_link=”url:%23||” banner_bg_color=”#2d2d2d” banner_overlay_bg_color=”rgba(36,36,36,0.4)” banner_opacity=”solid”]