[vc_row full_width=”stretch_row” animation_type=”h” horizontal_animation=”left-animation” vertical_animation=”top-animation” css=”.vc_custom_1448201065542{margin-bottom: 0px !important;padding-top: 100px !important;padding-bottom: 100px !important;background-color: #ffffff !important;}”][vc_column width=”1/4″][/vc_column][vc_column width=”1/2″][vc_column_text]
Hello! Let us elaborate what are all the cool things you can do with the Interactive Banner Element.
[/vc_column_text][/vc_column][vc_column width=”1/4″][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” bg_override=”full” css=”.vc_custom_1448201149071{margin-bottom: 0px !important;padding-top: 50px !important;padding-bottom: 50px !important;background-color: #f7f7f7 !important;}” bg_color_value=”#f7f7f7″ animation_type=”h” horizontal_animation=”left-animation” vertical_animation=”top-animation”][vc_column][vc_text_separator title=”Simple Interactive Banner with Title on Left (by default)”][vc_column_text]
An image is used with the title, which is by default set to left.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1448201172038{margin-bottom: 0px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #ffffff !important;}”][vc_column][vc_text_separator title=”Simple Interactive Banner with Title in Center”][vc_column_text]
You can place your title to the center on the title bar & also you can customize the hover effects.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” bg_override=”full” css=”.vc_custom_1448201192250{margin-bottom: 0px !important;padding-top: 50px !important;padding-bottom: 50px !important;background-color: #f7f7f7 !important;}” bg_color_value=”#f7f7f7″ animation_type=”h” horizontal_animation=”left-animation” vertical_animation=”top-animation”][vc_column][vc_text_separator title=”Image Icon Background and On-Hover Description”][vc_column_text]
You can apply icons to the background simply by using Image Icon and choose to display text on Hover.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1448201216954{margin-bottom: 0px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #ffffff !important;}”][vc_column][vc_text_separator title=”Icons with the Title”][vc_column_text]
You can place icons with the title section
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” bg_override=”full” css=”.vc_custom_1448201250801{margin-bottom: 0px !important;padding-top: 50px !important;padding-bottom: 50px !important;background-color: #f7f7f7 !important;}” bg_color_value=”#f7f7f7″ animation_type=”h” horizontal_animation=”left-animation” vertical_animation=”top-animation”][vc_column][vc_text_separator title=”Icon on Hover”][vc_column_text]
You can also use the icons with the On-Hover description.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1448201848233{margin-bottom: 0px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #ffffff !important;}”][vc_column][vc_text_separator title=”Colored Title Bar”][vc_column_text]
Title Bar color can be changed according to the overall look of your website.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” bg_type=”bg_color” bg_override=”full” css=”.vc_custom_1448201366485{margin-bottom: 0px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #f7f7f7 !important;}” bg_color_value=”#f7f7f7″ animation_type=”h” horizontal_animation=”left-animation” vertical_animation=”top-animation”][vc_column][vc_text_separator title=”Button Link on Hover”][vc_column_text]
You can apply the read more link button to the On-Hover description
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1448201822459{margin-bottom: 0px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #ffffff !important;}”][vc_column][vc_text_separator title=”Link Complete Banner”][vc_column_text]
Another example of link on the interactive banner is complete box link
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1448201414539{margin-bottom: 0px !important;padding-bottom: 30px !important;background-color: #ffffff !important;}”][vc_column][vc_text_separator title=”Hover Effects”][vc_column_text]
All Possible Cool Hover Effects Below.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][vc_column_inner width=”1/3″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row full_width=”stretch_row” css=”.vc_custom_1448201436884{margin-bottom: 0px !important;padding-top: 30px !important;padding-bottom: 30px !important;background-color: #ffffff !important;}”][vc_column][vc_text_separator title=”Custom Height”][vc_column_text]
Control the size of the banner with easy settings.
[/vc_column_text][vc_row_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][vc_column_inner width=”1/4″][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”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]