{"id":337,"date":"2014-05-24T06:38:19","date_gmt":"2014-05-24T11:38:19","guid":{"rendered":"http:\/\/theme.co\/x\/demo\/integrity\/10\/?page_id=337"},"modified":"2016-05-29T15:34:45","modified_gmt":"2016-05-29T15:34:45","slug":"content-band","status":"publish","type":"page","link":"https:\/\/demo.theme.co\/renew-1\/shortcodes\/content-band\/","title":{"rendered":"Content Band"},"content":{"rendered":"<p>With the <code>&#091;content_band&#093;<\/code> shortcode, it&#8217;s incredibly simple to add custom, one of a kind elements to your pages and posts with hardly any work at all. Easily set a simple color, background image pattern, or full-width background image that adds tons of style and personality in a matter of seconds! You can place whatever you&#8217;d like inside the <code>&#091;content_band&#093;<\/code> shortcode, including text, images, video, slideshows, accordions, audio, and so much more! Let your imagination run wild!<\/p>\n<div id=\"x-content-band-1\" class=\"x-content-band border-top border-left border-right border-bottom\" style=\"background-color: #ffddea; color: #333;\"><div class=\"x-container max width\"><h4  class=\"h-custom-headline h3\" style=\"margin-top: 0;\"><span>Cool Headline<\/span><\/h4>\n<p>Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.<\/p>\n<\/div><\/div>\n<div id=\"x-content-band-2\" class=\"x-content-band bg-pattern border-top border-left border-right border-bottom\" style=\"background-image: url(\/\/theme.co\/media\/x-bg-maze.png); background-color: transparent;\"><div class=\"x-container max width\"><h4  class=\"h-custom-headline h3\" style=\"margin-top: 0;\"><span>Cool Headline<\/span><\/h4>\n<p>Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.<\/p>\n<\/div><\/div>\n<div id=\"x-content-band-3\" class=\"x-content-band bg-image parallax border-top border-left border-right border-bottom\" data-x-element=\"content_band\" data-x-params=\"{&quot;type&quot;:&quot;image&quot;,&quot;parallax&quot;:true}\"  style=\"background-image: url(\/\/theme.co\/media\/x-bg-flowers.jpg); background-color: transparent; color: #fff;\"><div class=\"x-container max width\"><h4  class=\"h-custom-headline h3\" style=\"margin-top: 0; color: #fff;\"><span>Cool Headline<\/span><\/h4>\n<p>Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.<\/p>\n<\/div><\/div>\n<div id=\"x-content-band-4\" class=\"x-content-band bg-video\" data-x-element=\"content_band\" data-x-params=\"{&quot;type&quot;:&quot;video&quot;}\"  style=\" color: #fff;\"><div  class=\"x-video player bg transparent hide-controls autoplay loop muted\" data-x-element=\"x_mejs\" data-x-params=\"{&quot;poster&quot;:&quot;https:\\\/\\\/theme.co\\\/x\\\/demo\\\/integrity\\\/1\\\/wp-content\\\/uploads\\\/sites\\\/2\\\/2013\\\/06\\\/x-home-5-bg-video-slider-touch.jpg&quot;}\"  ><script type=\"text\/template\"><div class=\"x-video-inner video\/mp4  transparent\"><video class=\"x-mejs has-stack-styles\" poster=\"https:\/\/theme.co\/x\/demo\/integrity\/1\/wp-content\/uploads\/sites\/2\/2013\/06\/x-home-5-bg-video-slider-touch.jpg\" preload=\"metadata\" autoplay loop muted><source src=\"https:\/\/player.vimeo.com\/external\/75369165.hd.mp4?s=2dc40dd57ab6d1975eae1f3ec1b2afad\" type=\"video\/mp4\"><\/video><\/div><\/script><\/div><div class=\"x-container max width\"><h4  class=\"h-custom-headline h3\" style=\"margin-top: 0; color: #fff;\"><span>Cool Headline<\/span><\/h4>\n<p>Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.<\/p>\n<\/div><\/div>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Code<\/span><\/h2>\n<pre  class=\"x-code\" ><code>[content_band style=\"color: #333;\" bg_color=\"#ffddea\" border=\"all\" inner_container=\"true\"] [custom_headline style=\"margin-top: 0;\" level=\"h4\" looks_like=\"h3\"]Cool Headline[\/custom_headline] &lt;p&gt;Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.&lt;\/p&gt; [\/content_band]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[content_band bg_pattern=\"https:\/\/yoursite.com\/path\/to\/your\/image.jpg\" border=\"all\" inner_container=\"true\"] [custom_headline style=\"margin-top: 0;\" level=\"h4\" looks_like=\"h3\"]Cool Headline[\/custom_headline] &lt;p&gt;Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.&lt;\/p&gt; [\/content_band]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[content_band style=\"color: #fff;\" bg_image=\"https:\/\/yoursite.com\/path\/to\/your\/image.jpg\" parallax=\"true\" border=\"all\" inner_container=\"true\"] [custom_headline style=\"margin-top: 0; color: #fff;\" level=\"h4\" looks_like=\"h3\"]Cool Headline[\/custom_headline] &lt;p&gt;Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.&lt;\/p&gt; [\/content_band]<\/code><\/pre>\n<pre  class=\"x-code\" ><code>[content_band style=\"color: #fff;\" bg_video=\"https:\/\/yoursite.com\/path\/to\/your\/video.mp4\" bg_video_poster=\"https:\/\/yoursite.com\/path\/to\/your\/video-poster-image.jpg\" border=\"none\" inner_container=\"true\"][custom_headline style=\"margin-top: 0; color: #fff;\" level=\"h4\" looks_like=\"h3\"]Cool Headline[\/custom_headline]&lt;p&gt;Esurivi enim et dedistis mihi manducare: sitivi, et dedistis mihi bibere hospes eram et collexistis me nudus et operuistis me, adipiscing ego me: infirmus, et vidi post me, visitastis me in carcere eram et venistis ad me.&lt;\/p&gt;[\/content_band]<\/code><\/pre>\n<h2  class=\"h-custom-headline h5 accent\" ><span>Options<\/span><\/h2>\n<ul class=\"x-ul-icons\"  >\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>id<\/strong>: add a unique ID to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>class<\/strong>: add a class or multiple classes to the shortcode. <\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>style<\/strong>: add inline styles to the shortcode.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>border<\/strong>: &#8220;top,&#8221; &#8220;left,&#8221; &#8220;right,&#8221; &#8220;bottom,&#8221; &#8220;vertical,&#8221; &#8220;horizontal,&#8221; or &#8220;all.&#8221;<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>bg_color<\/strong>: add in any color (i.e. &#8220;red,&#8221; &#8220;#fff,&#8221; &#8220;transparent,&#8221; et cetera) to be used as the background for the band.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>bg_pattern<\/strong>: insert the URL to an image to be used as a repeatable pattern for the band.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>bg_image<\/strong>: insert the URL to an image to be used as a full width background for the band.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>parallax<\/strong>: input &#8220;true&#8221; to activate the parallax background effect for background patterns and images.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>bg_video<\/strong>: insert the URL to a video to be used as a full width background for the band.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>bg_video_poster<\/strong>: insert the URL to an image to be used as a full width background for the band on mobile devices.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>no_margin<\/strong>: input &#8220;true&#8221; to remove all margins (useful when laying out home page designs, leaving default margin is helpful in creating consistent spacing on elements like posts and standard pages).<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>padding_top<\/strong>: accepts any unit of measurement for the inner padding of the content band.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>padding_bottom<\/strong>: accepts any unit of measurement for the inner padding of the content band.<\/li>\n<li class=\"x-li-icon\"  ><i class=\"x-icon-chevron-circle-right\" aria-hidden=\"true\" data-x-icon-s=\"&#xf138;\"  ><\/i><strong>inner_container<\/strong>: input &#8220;true&#8221; to have a container placed inside the content band.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>With the &#091;content_band&#093; shortcode, it&#8217;s incredibly simple to add custom, one of a kind elements to your pages and posts with hardly any work at all. Easily set a simple color, background image pattern, or full-width background image that adds tons of style and personality in a matter of seconds! You can place whatever you&#8217;d like inside the &#091;content_band&#093; shortcode, &#8230; <a href=\"https:\/\/demo.theme.co\/renew-1\/shortcodes\/content-band\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":16,"featured_media":0,"parent":259,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"_links":{"self":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/337"}],"collection":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/comments?post=337"}],"version-history":[{"count":1,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/337\/revisions"}],"predecessor-version":[{"id":7775,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/337\/revisions\/7775"}],"up":[{"embeddable":true,"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/pages\/259"}],"wp:attachment":[{"href":"https:\/\/demo.theme.co\/renew-1\/wp-json\/wp\/v2\/media?parent=337"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}