{"id":55,"date":"2016-01-13T13:24:12","date_gmt":"2016-01-13T13:24:12","guid":{"rendered":"http:\/\/flatsome.dev\/?page_id=3648"},"modified":"2016-01-13T13:24:12","modified_gmt":"2016-01-13T13:24:12","slug":"banner","status":"publish","type":"page","link":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/","title":{"rendered":"Banners"},"content":{"rendered":"<div class=\"slider-wrapper relative \" id=\"slider-734020219\" >\n    <div class=\"slider slider-nav-circle slider-nav-large slider-nav-light slider-style-normal\"\n        data-flickity-options='{\n            \"cellAlign\": \"center\",\n            \"imagesLoaded\": true,\n            \"lazyLoad\": 1,\n            \"freeScroll\": false,\n            \"wrapAround\": true,\n            \"autoPlay\": 6000,\n            \"pauseAutoPlayOnHover\" : true,\n            \"prevNextButtons\": true,\n            \"contain\" : true,\n            \"adaptiveHeight\" : true,\n            \"dragThreshold\" : 10,\n            \"percentPosition\": true,\n            \"pageDots\": true,\n            \"rightToLeft\": false,\n            \"draggable\": true,\n            \"selectedAttraction\": 0.1,\n            \"parallax\" : 0,\n            \"friction\": 0.6        }'\n        >\n        \n\n  <div class=\"banner has-hover\" id=\"banner-1635008942\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-362924716\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                     <div data-animate=\"fadeInLeft\">           <div class=\"text dark text-shadow-1\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h2>Create Amazing Banners with Drag and Drop<\/h2>\n<div class=\"is-divider divider clearfix\" ><\/div><!-- .divider -->\n<a class=\"button success box-shadow-3\"  >\n    <span>A button<\/span>\n  <\/a>\n\n              <\/div>\n           <\/div><!-- text-box-inner -->\n       <\/div>                     \n<style scope=\"scope\">\n\n#text-box-362924716 {\n  width: 51%;\n}\n#text-box-362924716 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1635008942 {\n  padding-top: 700px;\n}\n#banner-1635008942 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2.jpg);\n}\n#banner-1635008942 .overlay {\n  background-color: rgba(0, 0, 0, 0.25);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n\n  <div class=\"banner has-hover\" id=\"banner-236562594\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                                    \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1704692044\" class=\"text-box banner-layer x5 md-x5 lg-x5 y50 md-y50 lg-y50 res-text\">\n              <div data-parallax=\"1\" data-parallax-fade=\"true\">       <div data-animate=\"fadeInRight\">           <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h2>Lorem ipsum dolor sit amet<\/h2>\n<p class=\"lead\">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&#8230;.<\/p>\n<a class=\"button white\"  >\n    <span>Buy now<\/span>\n  <\/a>\n\n<a class=\"button white is-outline\"  >\n    <span>Learn more<\/span>\n  <\/a>\n\n              <\/div>\n           <\/div><!-- text-box-inner -->\n       <\/div>       <\/div>              \n<style scope=\"scope\">\n\n#text-box-1704692044 {\n  width: 46%;\n}\n#text-box-1704692044 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-236562594 {\n  padding-top: 700px;\n}\n#banner-236562594 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2.jpg);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n     <\/div>\n\n     <div class=\"loading-spin dark large centered\"><\/div>\n\n     <style scope=\"scope\">\n             <\/style>\n<\/div><!-- .ux-slider-wrapper -->\n\n\n<div class=\"row align-middle\"  id=\"row-2130371873\">\n<div class=\"col medium-7 large-7\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover\" id=\"banner-1443052400\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                                    \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-605858388\" class=\"text-box banner-layer x50 md-x5 lg-x5 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text box-shadow-2\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3 class=\"uppercase\">Lorem ipsum dolor sit amet<\/h3>\n<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat&#8230;.<\/p>\n<a class=\"button primary is-link\"  >\n    <span>Simple Link<\/span>\n  <i class=\"icon-play\" ><\/i><\/a>\n\n<a class=\"button primary\"  >\n    <span>Simple Button<\/span>\n  <\/a>\n\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-605858388 .text {\n  background-color: rgba(255, 255, 255, 0.85);\n  font-size: 100%;\n}\n#text-box-605858388 .text-inner {\n  padding: 39px;\n}\n#text-box-605858388 {\n  width: 78%;\n}\n\n\n@media (min-width:550px) {\n\n  #text-box-605858388 {\n    width: 63%;\n  }\n\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1443052400 {\n  padding-top: 600px;\n}\n#banner-1443052400 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2.jpg);\n}\n#banner-1443052400 .bg {\n  background-position: 44% 39%;\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-5 small-12 large-5\"  ><div class=\"col-inner text-center\"  >\n<h2 class=\"lead uppercase\">Drag And Drop Banner System<\/h2>\n<p class=\"lead\"><span style=\"font-size: 115%\">Flatsome <strong>Banners<\/strong> is\u00a0the heart\u00a0of Flatsome. Our Banner System let you create beautiful <strong>responsive<\/strong> banners with drag and drop.<\/span><\/p>\n<p class=\"lead\">\u00a0<\/p>\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1300377468\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"260\" src=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg\" class=\"attachment-large size-large\" alt=\"\" srcset=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg 400w, https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1-300x195.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style scope=\"scope\">\n\n#image_1300377468 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<\/div><\/div>\n<div class=\"col medium-14 large-14\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-glow\" id=\"banner-841661885\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1863872147\" class=\"text-box banner-layer x90 md-x90 lg-x90 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Small Title<\/h3>\n<p class=\"lead\">You can place a text box wherever you want on a Banner<\/p>\n<a class=\"button primary\"  >\n    <span>Click me!<\/span>\n  <\/a>\n\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1863872147 {\n  width: 36%;\n}\n#text-box-1863872147 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-841661885 {\n  padding-top: 50%;\n}\n#banner-841661885 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2.jpg);\n}\n#banner-841661885 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n\n\n@media (min-width:550px) {\n\n  #banner-841661885 {\n    padding-top: 56.25%;\n  }\n\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-6 small-12 large-6\"  ><div class=\"col-inner text-center\"  >\n<h2>Banner Focus Point<b>\u2122<\/b><\/h2>\n<p class=\"lead\">Set a focus point on the banner and the image will adjust to mobile a tablet screens. Perfect for resposnive Websites.<\/p>\n<\/div><\/div>\n<div class=\"col medium-6 small-12 large-6\"  ><div class=\"col-inner\"  >\n\t<div class=\"img has-hover x md-x lg-x y md-y lg-y\" id=\"image_1493227339\">\n\t\t\t\t\t\t\t\t<div class=\"img-inner dark\" >\n\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"260\" src=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg\" class=\"attachment-original size-original\" alt=\"\" srcset=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg 400w, https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1-300x195.jpg 300w\" sizes=\"auto, (max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\n<style scope=\"scope\">\n\n#image_1493227339 {\n  width: 100%;\n}\n<\/style>\n\t<\/div>\n\t\n<\/div><\/div>\n\n<style scope=\"scope\">\n\n<\/style>\n<\/div>\n<div class=\"container section-title-container\" ><h3 class=\"section-title section-title-center\"><b><\/b><span class=\"section-title-main\" >Banner Hover effects<\/span><b><\/b><\/h3><\/div><!-- .section-title -->\n<div class=\"row\"  id=\"row-1492201854\">\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-glow\" id=\"banner-1920127797\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-51059645\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Glow<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-51059645 {\n  width: 36%;\n}\n#text-box-51059645 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1920127797 {\n  padding-top: 200px;\n}\n#banner-1920127797 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-1920127797 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-zoom\" id=\"banner-1125781809\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1056713568\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Zoom<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1056713568 {\n  width: 36%;\n}\n#text-box-1056713568 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1125781809 {\n  padding-top: 200px;\n}\n#banner-1125781809 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-1125781809 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-zoom-fade\" id=\"banner-274829106\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1573639987\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Zoom Fade<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1573639987 {\n  width: 36%;\n}\n#text-box-1573639987 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-274829106 {\n  padding-top: 200px;\n}\n#banner-274829106 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-274829106 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-blur\" id=\"banner-1651139620\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-856813024\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Blur<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-856813024 {\n  width: 36%;\n}\n#text-box-856813024 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1651139620 {\n  padding-top: 200px;\n}\n#banner-1651139620 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-1651139620 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-fade-in\" id=\"banner-272716057\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1935534291\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Fade In<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1935534291 {\n  width: 36%;\n}\n#text-box-1935534291 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-272716057 {\n  padding-top: 200px;\n}\n#banner-272716057 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-272716057 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-fade-out\" id=\"banner-1605161475\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-173712463\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Fade Out<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-173712463 {\n  width: 36%;\n}\n#text-box-173712463 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1605161475 {\n  padding-top: 200px;\n}\n#banner-1605161475 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-1605161475 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-color\" id=\"banner-222600324\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-217768135\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Add Color<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-217768135 {\n  width: 36%;\n}\n#text-box-217768135 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-222600324 {\n  padding-top: 200px;\n}\n#banner-222600324 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-222600324 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-grayscale\" id=\"banner-2065423081\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-860982296\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Grayscale<\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-860982296 {\n  width: 36%;\n}\n#text-box-860982296 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-2065423081 {\n  padding-top: 200px;\n}\n#banner-2065423081 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-2065423081 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-4 large-4\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-overlay-add\" id=\"banner-1431817644\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1504544909\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Add Overlay<\/h3>\n<p><span style=\"font-size: 140%\">Overlay can be any color<\/span><\/p>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1504544909 {\n  width: 51%;\n}\n#text-box-1504544909 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-1431817644 {\n  padding-top: 200px;\n}\n#banner-1431817644 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-1431817644 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<\/div>\n<div class=\"row\"  id=\"row-62374419\">\n<div class=\"col small-12 large-12\"  ><div class=\"col-inner\"  >\n<p class=\"lead\" style=\"text-align: center\">You can also<strong> combine<\/strong> hover effects to create amazing hover effects<\/p>\n<\/div><\/div>\n<\/div>\n<div class=\"row\"  id=\"row-1673276520\">\n<div class=\"col medium-6 small-12 large-6\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-overlay-add\" id=\"banner-639197878\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n\t<div class=\"is-border hover-zoom\"\n\t\tstyle=\"border-width:3px 3px 3px 3px;margin:10px 10px 10px 10px;\">\n\t<\/div>\n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1437866469\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3><strong>Add animated borders<\/strong><\/h3>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1437866469 {\n  width: 51%;\n}\n#text-box-1437866469 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-639197878 {\n  padding-top: 200px;\n}\n#banner-639197878 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-639197878 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<div class=\"col medium-6 small-12 large-6\"  ><div class=\"col-inner\"  >\n\n  <div class=\"banner has-hover bg-overlay-add\" id=\"banner-49007163\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" >\n            <div class=\"bg fill bg-fill \"><\/div>\n                        <div class=\"overlay\"><\/div>            \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-1311388056\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h3>Add Overlay<\/h3>\n<p><span style=\"font-size: 140%\">Overlay can be any color<\/span><\/p>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-1311388056 {\n  width: 51%;\n}\n#text-box-1311388056 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-49007163 {\n  padding-top: 200px;\n}\n#banner-49007163 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2-300x195.jpg);\n}\n#banner-49007163 .overlay {\n  background-color: rgba(22, 20, 16, 0.18);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n<\/div><\/div>\n<\/div>\n\n  <div class=\"banner has-hover has-parallax\" id=\"banner-568963111\">\n          <div class=\"banner-inner fill\">\n        <div class=\"banner-bg fill\" data-parallax=\"-2\" data-parallax-container=\".banner\" data-parallax-background>\n            <div class=\"bg fill bg-fill \"><\/div>\n                                    \n                    <\/div><!-- bg-layers -->\n        <div class=\"banner-layers container\">\n            <div class=\"fill banner-link\"><\/div>            \n   <div id=\"text-box-490422851\" class=\"text-box banner-layer x50 md-x50 lg-x50 y50 md-y50 lg-y50 res-text\">\n                                <div class=\"text dark\">\n              \n              <div class=\"text-inner text-center\">\n                  \n<h2 class=\"uppercase\">BACKGROUND VIDEO<\/h2>\n              <\/div>\n           <\/div><!-- text-box-inner -->\n                            \n<style scope=\"scope\">\n\n#text-box-490422851 {\n  width: 41%;\n}\n#text-box-490422851 .text {\n  font-size: 100%;\n}\n<\/style>\n    <\/div><!-- text-box -->\n \n        <\/div><!-- .banner-layers -->\n      <\/div><!-- .banner-inner -->\n\n            \n<style scope=\"scope\">\n\n#banner-568963111 {\n  padding-top: 500px;\n}\n#banner-568963111 .bg.bg-loaded {\n  background-image: url(https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-2.jpg);\n}\n<\/style>\n  <\/div><!-- .banner -->\n\n\n","protected":false},"excerpt":{"rendered":"Create Amazing Banners with Drag and Drop A button Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.... Buy now Learn more Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy [...]","protected":false},"author":1,"featured_media":11,"parent":95,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"page-blank.php","meta":{"footnotes":""},"class_list":["post-55","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Banners - Crease Shirts<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Banners - Crease Shirts\" \/>\n<meta property=\"og:url\" content=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/\" \/>\n<meta property=\"og:site_name\" content=\"Crease Shirts\" \/>\n<meta property=\"og:image\" content=\"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"400\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/\",\"url\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/\",\"name\":\"Banners - Crease Shirts\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/wp-content\\\/uploads\\\/sites\\\/44\\\/2016\\\/08\\\/dummy-1.jpg\",\"datePublished\":\"2016-01-13T13:24:12+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/#primaryimage\",\"url\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/wp-content\\\/uploads\\\/sites\\\/44\\\/2016\\\/08\\\/dummy-1.jpg\",\"contentUrl\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/wp-content\\\/uploads\\\/sites\\\/44\\\/2016\\\/08\\\/dummy-1.jpg\",\"width\":400,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/banner\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Elements\",\"item\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/elements\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Banners\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/#website\",\"url\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/\",\"name\":\"Crease Shirts\",\"description\":\"Premium Shirts. Great Advice. Zero Work.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/sites.firstdraftmarketing.com\\\/creaseshirts\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Banners - Crease Shirts","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/","og_locale":"en_US","og_type":"article","og_title":"Banners - Crease Shirts","og_url":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/","og_site_name":"Crease Shirts","og_image":[{"width":400,"height":260,"url":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/","url":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/","name":"Banners - Crease Shirts","isPartOf":{"@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/#website"},"primaryImageOfPage":{"@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/#primaryimage"},"image":{"@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/#primaryimage"},"thumbnailUrl":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg","datePublished":"2016-01-13T13:24:12+00:00","breadcrumb":{"@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/#primaryimage","url":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg","contentUrl":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-content\/uploads\/sites\/44\/2016\/08\/dummy-1.jpg","width":400,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/banner\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/"},{"@type":"ListItem","position":2,"name":"Elements","item":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/elements\/"},{"@type":"ListItem","position":3,"name":"Banners"}]},{"@type":"WebSite","@id":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/#website","url":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/","name":"Crease Shirts","description":"Premium Shirts. Great Advice. Zero Work.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/pages\/55","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/comments?post=55"}],"version-history":[{"count":0,"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/pages\/55\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/pages\/95"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/media\/11"}],"wp:attachment":[{"href":"https:\/\/sites.firstdraftmarketing.com\/creaseshirts\/wp-json\/wp\/v2\/media?parent=55"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}