{"id":1444,"date":"2020-12-16T19:39:33","date_gmt":"2020-12-16T19:39:33","guid":{"rendered":"http:\/\/theme.visualmodo.com\/elements\/?post_type=element&p=1444"},"modified":"2021-02-11T16:58:32","modified_gmt":"2021-02-11T16:58:32","slug":"interactive-banners","status":"publish","type":"element","link":"https:\/\/theme.visualmodo.com\/edge\/element\/interactive-banners\/","title":{"rendered":"Interactive Banners"},"content":{"rendered":"

[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]<\/p>\n

Hello! Let us elaborate what are all the cool things you can do with the Interactive Banner Element.<\/h4>\n

[\/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]<\/p>\n

An image is used with the title, which is by default set to left.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/4″]\n

\n\t\"woman\n\t

SUSAN THE JUST<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"null\"\n\t

MARK THE STRONG<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"null\"\n\t

SOFIA THE SILENT<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"man\n\t

ALVIN THE CREATIVE<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

You can place your title to the center on the title bar & also you can customize the hover effects.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″]\n

\n\t\"silver\n\t

Device Compatible<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\t\"silver\n\t

Extreme Typography<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\t\"iPad\n\t

Easy To Use<\/h3>\n\t
\n\t\t
<\/div>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

You can apply icons to the background simply by using Image Icon and choose to display text on Hover.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/4″]\n

\n\t\"bird's\n\t

SMILE WITH US<\/h3>\n\t
\n\t\t
We make you smile with our work that last forever. We work with simplicity and curiosity.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"time\n\t

START SHOPPING<\/h3>\n\t
\n\t\t
Our product is just awesome. You can buy it now from anywhere in the world.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"low\n\t

UNLOCK YOURSELF<\/h3>\n\t
\n\t\t
Unlock your power of creativity, we just spice them to make it more attractive.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"waterfalls\n\t

WE ARE WITH YOU<\/h3>\n\t
\n\t\t
Never be afraid we are with you. We support as long as you need it.<\/div>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

You can place icons with the title section<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/4″]\n

\n\t\"two\n\t

Smart Capture<\/i><\/h3>\n\t
\n\t\t
This is dummy image that only describes the photography effects.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"bottom\n\t

light level<\/i><\/h3>\n\t
\n\t\t
This is dummy image that only describes the photography effects.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"brown\n\t

Object Focus<\/i><\/h3>\n\t
\n\t\t
This is dummy image that only describes the photography effects.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"glass\n\t

Color Effects<\/i><\/h3>\n\t
\n\t\t
This is dummy image that only describes the photography effects.<\/div>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

You can also use the icons with the On-Hover description.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″]\n

\n\t\"photo\n\t

Speak With Us<\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

Feel free to speak with us. We love talking.<\/p>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n

\n\t\"water\n\t

Happy to Serve<\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

We are always happy and delighted working with you.<\/p>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n

\n\t\"white\n\t

Custom Facility<\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

Its easy to customize in any manner you want.<\/p>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

Title Bar color can be changed according to the overall look of your website.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/4″]\n

\n\t\"red\n\t

iPhone<\/h3>\n\t
\n\t\t
Discover the world of iPhone, you will fall in love with it.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"black\n\t

iPad<\/h3>\n\t
\n\t\t
Explore the iPad features, you will fall in love with it.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"black\n\t

iPod<\/h3>\n\t
\n\t\t
Making difference in the world of sound, that's what it is.<\/div>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n
\n\t\"red\n\t

MacBook<\/h3>\n\t
\n\t\t
Explore the variety of MacBook, and you will love it for sure.<\/div>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

You can apply the read more link button to the On-Hover description<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″]\n

\n\t\"brown\n\t

Dark Image<\/h3>\n\t
\n\t\t
This image is Layered with dark shadow.<\/div>\n\t\tREAD MORE<\/a>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\t\"city\n\t

Water Splash<\/h3>\n\t
\n\t\t
This image is layered with water splash.<\/div>\n\t\tREAD MORE<\/a>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\t\"buildings\n\t

Skyscraper<\/h3>\n\t
\n\t\t
This image is Layered with light and shadow .<\/div>\n\t\tREAD MORE<\/a>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

Another example of link on the interactive banner is complete box link<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″]\n

\n\t\"black\n\t

Camera one<\/h3>\n\t
\n\t\t
Camera is the great innovation. It captures very moments.<\/div>\n\t<\/div><\/a>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\t\"selective\n\t

Camera Second<\/h3>\n\t
\n\t\t
Camera is the great innovation. It captures very moments.<\/div>\n\t<\/div><\/a>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\t\"black\n\t

Camera Third<\/h3>\n\t
\n\t\t
Camera is the great innovation. It captures very moments.<\/div>\n\t<\/div><\/a>\n<\/div>[\/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]<\/p>\n

All Possible Cool Hover Effects Below.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″]\n

\n\t\"white\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"white\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"white\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"white\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n

\n\t\"russian\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"russian\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"russian\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"russian\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n

\n\t\"shallow\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"shallow\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"shallow\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>\n

\n\t\"shallow\n\t

Interactive banner title<\/i><\/h3>\n\t
\n\t\t
<\/i><\/div>\n\t\t

A short description of this banner. A short description of this banner. A short description of this banner.<\/p>\n\t<\/div>\n<\/div>[\/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]<\/p>\n

Control the size of the banner with easy settings.<\/p>\n

[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/4″]\n

\n\t\"three\n\t

Landscape First<\/h3>\n\t
\n\t\t
Freta orbem mundo fluminaque iners cingebant pace mentisque. Speciem surgere.<\/div>\n\t<\/div><\/a>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/4″]\n