{"id":922,"date":"2014-02-19T12:05:54","date_gmt":"2014-02-19T12:05:54","guid":{"rendered":"http:\/\/plugins.sharkslab.com\/ultimate-vc-addons\/?page_id=922"},"modified":"2015-11-22T14:17:42","modified_gmt":"2015-11-22T14:17:42","slug":"interactive-banners","status":"publish","type":"page","link":"https:\/\/theme.visualmodo.com\/rare\/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
[\/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
\n\t
\n\t
\n\tYou 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
\n\t
\n\tYou 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
\n\t
\n\t
\n\tYou can place icons with the title section<\/p>\n
[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/4″]\n
\n\t
\n\t
\n\t
\n\tYou 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\tFeel 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\tWe 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\tIts 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
\n\t
\n\t
\n\tYou 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
\n\t
\n\tAnother 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
\n\t
\n\tAll Possible Cool Hover Effects Below.<\/p>\n
[\/vc_column_text][vc_row_inner][vc_column_inner width=”1\/3″]\n
\n\tA 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\tA 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\tA 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\tA 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\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>[\/vc_column_inner][vc_column_inner width=”1\/3″]\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/p>\n\t<\/div>\n<\/div>\n
\n\tA short description of this banner. A short description of this banner. A short description of this banner.
\n<\/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
\n\t
\n\t
\n\t