{"id":1019,"date":"2016-04-10T22:28:17","date_gmt":"2016-04-10T12:28:17","guid":{"rendered":"http:\/\/benryan.com.au\/?p=1019"},"modified":"2020-04-17T21:48:25","modified_gmt":"2020-04-17T11:48:25","slug":"themeco-full-width-parallax-featured-image","status":"publish","type":"post","link":"https:\/\/benryan.com.au\/themeco-full-width-parallax-featured-image\/","title":{"rendered":"Full Width Parallax Featured Images for the X Theme or Pro Theme"},"content":{"rendered":"<div id=\"cs-content\" class=\"cs-content\" ><div id=\"x-section-1\" class=\"x-section\" style=\"margin: 0px;padding: 0px; background-color: transparent;\"  ><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><div class=\"x-text\"  ><p><span  class=\"x-dropcap\" >In<\/span> April 2016 I wrote the original piece of code for the full width parallax featured image. It was a style that I began to see on a stack of blogs and fell in love with. The full width parallax featured image was trending in 2016 and it seems it has really blown up in 2017. Not only is it eye catching, the full width parallax featured image is functional and I&#8217;m going to show you exactly how to achieve this style on either the X Theme or Pro Theme by ThemeCo.<\/p>\n<p><strong><em>UPDATED &#8211; 17 Apr 2020<\/em><\/strong><\/p>\n<p>Over the past few weeks I have been working on improvements to the full width parallax featured image as requested by users within the <a href=\"https:\/\/www.facebook.com\/groups\/xthemeusers\/\" target=\"_blank\" rel=\"noopener noreferrer\">X Theme Users Community facebook page<\/a>. The latest improvements include:<\/p>\n<ul>\n<li>Support for both ThemeCo&#8217;s X Theme and the NEW Pro Theme<\/li>\n<li>More streamlined coding<\/li>\n<li>Better support of mobile devices<\/li>\n<\/ul>\n<p>Hope you enjoy and keep the requests and feed back coming.<\/p>\n<\/div><div class=\"x-text cs-ta-center\"  ><p><span class=\"tve-leads-two-step-trigger tl-2step-trigger-2479\"><a class=\"x-btn btn-lead-magnet x-btn-global\" href=\"#\" data-options=\"thumbnail: ''\" style=\"outline: none;\">Download Child Themes<\/a><\/span><\/p>\n<\/div><h2  class=\"h-custom-headline cs-ta-left h2\" ><span>X Theme and Pro Theme sites using the Full Width Featured Image<\/span><\/h2><div class=\"x-text\"  ><p>Every day I smile at the emails, facebook messages, and comments that I receive regarding the full width parallax featured image. Supporters sharing links to their sites, asking questions about how they can add more function, even hiring me to recreate the parallax featured image around the styling of their sites.<\/p>\n<p>I do try and check out all the links I am sent however some do slip through the cracks. If I have responded or made comment about how good your site looks, please feel free to contact me again. For everyone else, keep sending those links, I love to see my little contribution to the internet in action.<\/p>\n<p>Below are 2 of my favourite adaptations of the full width parallax featured image:<\/p>\n<\/div><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><h3  class=\"h-custom-headline cs-ta-left h3 accent\" ><span>Integral Life<\/span><\/h3><div class=\"x-text cs-ta-left\"  ><p><a href=\"https:\/\/integrallife.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/integrallife.com<\/a><\/p>\n<\/div><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><a  class=\"x-img x-img-link x-img-none\"  href=\"https:\/\/integrallife.com\/loving-ais\/\" title=\"Integral Life - Full Width Parallax Featured Image\" target=\"_blank\" rel=\"\"   data-options=\"thumbnail: 'http:\/\/benryan.com.au\/wp-content\/uploads\/2017\/08\/Integral-Life-Full-Width-Parallax-Featured-Image.jpg'\"><img src=\"http:\/\/benryan.com.au\/wp-content\/uploads\/2017\/08\/Integral-Life-Full-Width-Parallax-Featured-Image.jpg\" alt=\"Integral Life - Full Width Parallax Featured Image with Co Author plugin\"><\/a><div class=\"x-text\"  ><p>The team at Integral Life hired me to not only implement the full width parallax featured image on the site, but also add a bit more function to it. In a lot of their posts there are multiple authors so we needed to create a way for multiple authors names to appear and link back to other posts written by those members. I achieved this with the assistance of the <a href=\"https:\/\/en-au.wordpress.org\/plugins\/co-authors-plus\/\" target=\"_blank\" rel=\"noopener noreferrer\">Co-Author Plus Plugin<\/a>.<\/p>\n<p>Other styling updates to the full width parallax featured image included:<\/p>\n<ul>\n<li>A transparent overlay<\/li>\n<li>Date the post was written<\/li>\n<li>And social sharing buttons<\/li>\n<\/ul>\n<p>If this is something you may need implemented on your site, feel free to <a href=\"http:\/\/benryan.com.au\/get-in-touch\/\">contact me<\/a>.<\/p>\n<p>Check out the styling <a href=\"https:\/\/integrallife.com\/loving-ais\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<\/div><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><h3  class=\"h-custom-headline cs-ta-left h3 accent\" ><span>Will Pursell Photography<\/span><\/h3><div class=\"x-text cs-ta-left\"  ><p><a href=\"https:\/\/www.willpursell.com\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/www.willpursell.com<\/a><\/p>\n<\/div><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><a  class=\"x-img x-img-link x-img-none\"  href=\"https:\/\/www.willpursell.com\/blog\/swaneset-golf-course-wedding\" title=\"Will Pursell - Full Width Parallax Featured Image\" target=\"_blank\" rel=\"\"   data-options=\"thumbnail: 'http:\/\/benryan.com.au\/wp-content\/uploads\/2017\/08\/Will-Pursell-Full-Width-Parallax-Featured-Image.jpg'\"><img src=\"http:\/\/benryan.com.au\/wp-content\/uploads\/2017\/08\/Will-Pursell-Full-Width-Parallax-Featured-Image.jpg\" alt=\"Will Pursell - Full Width Parallax Featured Image and full height\"><\/a><div class=\"x-text\"  ><p>If you are reading this post from Canada, and about to get married, do yourself a favour and give Will Pursell a call. The gallery on his site is simply stunning but the full width parallax featured image on his blog pages really helps show off those images.<\/p>\n<p>Will has taken the full width parallax featured image and made it a full screen, and I must say it looks simply stunning.<\/p>\n<p>Check out the styling <a href=\"https:\/\/www.willpursell.com\/blog\/swaneset-golf-course-wedding\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<\/div><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><h2  class=\"h-custom-headline cs-ta-left h2\" ><span>WOW &#8211; How do I add the full width parallax featured image to my X Theme or Pro Theme site?<\/span><\/h2><div class=\"x-text\"  ><p>When I create a new piece of styling or functionality, I want it to be as simple as possible to implement. There is no use having something beautiful if no one gets to appreciate it. To make adding it as simple as possible, I have constructed 2 methods:<\/p>\n<\/div><\/div><\/div><div class=\"x-container cs-ta-left\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><h3  class=\"h-custom-headline cs-ta-left h3\" ><span>Method 1- A prebuilt child theme for either the X Theme or Pro Theme<\/span><\/h3><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><div class=\"x-text\"  ><p>I had a lot of visitors contact me who have never attempted any customisation within WordPress but wanted the Full Width Parallax Featured Image. A very common request. Lets face it, not everyone has experience in editing files within a FTP structure. You have your core business to focus on and you shouldn&#8217;t need to also learn to how to become a great web developer. Thats what you have me for \ud83d\ude42<\/p>\n<p>To help out as much as possible I have pre installed the parallax featured image in a child theme for both the X Theme and Pro Theme.<\/p>\n<p>Follow the below steps to get your copy of both Child Themes.<\/p>\n<\/div><h5  class=\"h-custom-headline h5\" ><span><strong>Step 1<\/strong><\/span><\/h5><div class=\"x-text\"  ><p>Click the below button and follow the instructions in the email I send you.<\/p>\n<\/div><h5  class=\"h-custom-headline h5\" ><span><strong>Step 2<\/strong><\/span><\/h5><div class=\"x-text\"  ><p>Enjoy Parallax Featured Image function pre-installed in the child theme for both the X Theme and Pro Theme. And let me know if I can help in any way.<\/p>\n<\/div><div class=\"x-text cs-ta-center\"  ><p><span class=\"tve-leads-two-step-trigger tl-2step-trigger-2479\"><a class=\"x-btn btn-lead-magnet x-btn-global\" href=\"#\" data-options=\"thumbnail: ''\" style=\"outline: none;\">Download Child Themes<\/a><\/span><\/p>\n<\/div><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><h3  class=\"h-custom-headline cs-ta-left h3\" ><span>Method 2 &#8211; Make a coffee and lets get coding<\/span><\/h3><\/div><\/div><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><div class=\"x-text\"  ><p>Honestly, the full width parallax featured image shouldn&#8217;t take you any longer then what it took to make your cup of coffee. I&#8217;ve simplified the process to ensure your articles look amazing in no time.<\/p>\n<p><em><strong>Note:<\/strong> Make sure you use a child theme when adding any customisation to a wordpress site. Without a child theme you run the risk of losing all your customisations when the theme is updated. Don&#8217;t lose your hard work! For more information on why a child theme is so important check out <a href=\"https:\/\/theme.co\/apex\/forum\/t\/customizations-best-practices\/205\" target=\"_blank\" rel=\"noopener noreferrer\">Customizations &#8211; Best Practices<\/a> on the ThemeCo Knowledge Base<\/em><\/p>\n<\/div><h5  class=\"h-custom-headline h5\" ><span><strong>Step 1<\/strong><\/span><\/h5><div class=\"x-text\"  ><p>Make sure you are using a child theme<\/p>\n<\/div><h5  class=\"h-custom-headline h5\" ><span><strong>Step 2<\/strong><\/span><\/h5><div class=\"x-text\"  ><p>Choose the stack your using from the below tabs<\/p>\n<\/div><div  class=\"x-raw-content\" ><main>\n\n<input id=\"tab1\" type=\"radio\" name=\"tabs\">\n<label for=\"tab1\">Integrity<\/label>\n\n<input id=\"tab2\" type=\"radio\" name=\"tabs\">\n<label for=\"tab2\">Integrity Pro<\/label>\n\n<input id=\"tab3\" type=\"radio\" name=\"tabs\" checked>\n<label for=\"tab3\">Renew<\/label>\n\n<input id=\"tab4\" type=\"radio\" name=\"tabs\">\n<label for=\"tab4\">Renew Pro<\/label>\n\n<input id=\"tab5\" type=\"radio\" name=\"tabs\">\n<label for=\"tab5\">Ethos<\/label>\n\n<input id=\"tab6\" type=\"radio\" name=\"tabs\">\n<label for=\"tab6\">Ethos Pro<\/label>\n\n<input id=\"tab7\" type=\"radio\" name=\"tabs\">\n<label for=\"tab7\">Icon<\/label>\n\n<input id=\"tab8\" type=\"radio\" name=\"tabs\">\n<label for=\"tab8\">Icon Pro<\/label>\n\n  <section id=\"content1\">\n    <strong><h4 class=\"mts mbm\">Integrity<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/x-child\/framework\/views\/integrity<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/INTEGRITY\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Integrity.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;title h2&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n\t&lt;?php x_integrity_entry_meta(); ?&gt;\n\t&lt;?php endwhile; ?&gt;\n      &lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-container max width offset&quot;&gt;\n    &lt;div class=&quot;&lt;?php x_main_content_class(); ?&gt;&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'integrity', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\n    &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n  &lt;\/div&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: &quot;&quot;;\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}\n\n.entry-header .p-meta&gt;span {\n  display:none;\n}<\/pre>\n\n  <\/section>   \n\n  <section id=\"content2\">\n    <strong><h4 class=\"mts mbm\">Integrity Pro<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/pro-child\/framework\/views\/integrity<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/INTEGRITY\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Integrity.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;title h2&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n\t&lt;?php x_integrity_entry_meta(); ?&gt;\n\t&lt;?php endwhile; ?&gt;\n      &lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-container max width offset&quot;&gt;\n    &lt;div class=&quot;&lt;?php x_main_content_class(); ?&gt;&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'integrity', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\n    &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n  &lt;\/div&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: &quot;&quot;;\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}\n\n.entry-header .p-meta&gt;span {\n  display:none;\n}<\/pre>\n\n  <\/section>  \n\n  <section id=\"content3\">\n    <strong><h4 class=\"mts mbm\">Renew<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/x-child\/framework\/views\/renew<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/RENEW\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Renew.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;title h2&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n\t&lt;?php x_renew_entry_meta(); ?&gt;\n\t&lt;?php endwhile; ?&gt;\n      &lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-container max width offset&quot;&gt;\n    &lt;div class=&quot;&lt;?php x_main_content_class(); ?&gt;&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'renew', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\n    &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n  &lt;\/div&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: &quot;&quot;;\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}\n\n.entry-header .p-meta&gt;span {\n  display:none;\n}<\/pre>\n\n  <\/section>\n\n  <section id=\"content4\">\n    <strong><h4 class=\"mts mbm\">Renew Pro<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/pro-child\/framework\/views\/renew<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/RENEW\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Renew.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;title h2&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n\t&lt;?php x_renew_entry_meta(); ?&gt;\n\t&lt;?php endwhile; ?&gt;\n      &lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-container max width offset&quot;&gt;\n    &lt;div class=&quot;&lt;?php x_main_content_class(); ?&gt;&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'renew', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\n    &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n  &lt;\/div&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: &quot;&quot;;\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}\n\n.entry-header .p-meta&gt;span {\n  display:none;\n}<\/pre>\n\n  <\/section>\n\n  <section id=\"content5\">\n    <strong><h4 class=\"mts mbm\">Ethos<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/x-child\/framework\/views\/ethos<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/ETHOS\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Ethos.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;title h2&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n\t&lt;?php x_ethos_entry_meta(); ?&gt;\n\t&lt;?php endwhile; ?&gt;\n      &lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-container max width main&quot;&gt;\n   &lt;div class=&quot;offset cf&quot;&gt;\n    &lt;div class=&quot;&lt;?php x_main_content_class(); ?&gt;&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'ethos', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\n    &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n  &lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: &quot;&quot;;\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}\n\n.entry-header .p-meta&gt;span {\n  display:none;\n}<\/pre>\n\n  <\/section>\n\n  <section id=\"content6\">\n    <strong><h4 class=\"mts mbm\">Ethos Pro<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/pro-child\/framework\/views\/ethos<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/ETHOS\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Ethos.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;title h2&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t&lt;?php while ( have_posts() ) : the_post(); ?&gt;\n\t&lt;?php x_ethos_entry_meta(); ?&gt;\n\t&lt;?php endwhile; ?&gt;\n      &lt;\/div&gt;\n\t&lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-container max width main&quot;&gt;\n   &lt;div class=&quot;offset cf&quot;&gt;\n    &lt;div class=&quot;&lt;?php x_main_content_class(); ?&gt;&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'ethos', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\n    &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n  &lt;\/div&gt;\n  &lt;\/div&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: &quot;&quot;;\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}\n\n.entry-header .p-meta&gt;span {\n  display:none;\n}<\/pre>\n\n  <\/section>\n\n  <section id=\"content7\">\n    <strong><h4 class=\"mts mbm\">Icon<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/x-child\/framework\/views\/icon<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/ICON\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Icon.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;header class=&quot;entry-header&quot;&gt;\n\t\t&lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;entry-title&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-main full&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'icon', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\t  \n  &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: \"\";\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}<\/pre>\n\n  <\/section>\n\n  <section id=\"content8\">\n    <strong><h4 class=\"mts mbm\">Icon Pro<\/h4><\/strong>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 3<\/span><\/h5><\/strong>\n    <p>Create the file wp-single.php under \/public_html\/wp-content\/themes\/pro-child\/framework\/views\/icon<\/p>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 4<\/span><\/h5><\/strong>\n    <p>Insert the below code into the wp-single.php file you've just created.<\/p>\n    <pre class=\"brush: php; title: ; notranslate\" title=\"\">&lt;?php\n\n\/\/ =============================================================================\n\/\/ VIEWS\/ICON\/WP-SINGLE.PHP\n\/\/ -----------------------------------------------------------------------------\n\/\/ Single post output for Icon.\n\/\/ =============================================================================\n\n$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );\n\n?&gt;\n\n&lt;?php get_header(); ?&gt;\n\n&lt;?php global $post; ?&gt;\n\n&lt;div class=&quot;benryan featured-image bg-image parallax&quot; style=&quot;background-image:url(&lt;?php the_post_thumbnail_url(null); ?&gt;) !important;&quot; data-x-element=&quot;section&quot; data-x-params=&quot;{&amp;quot;type&amp;quot;:&amp;quot;image&amp;quot;,&amp;quot;parallax&amp;quot;:true}&quot;;&quot;&gt;\n\t&lt;div class=&quot;x-container max width&quot;&gt;\n      &lt;header class=&quot;entry-header&quot;&gt;\n\t\t&lt;div class=&quot;caption&quot;&gt;\n        &lt;h1 class=&quot;entry-title&quot;&gt;&lt;?php the_title(); ?&gt;&lt;\/h1&gt;\n\t\t&lt;\/div&gt;\n      &lt;\/header&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt; \n  &lt;div class=&quot;x-main full&quot; role=&quot;main&quot;&gt;\n\n      &lt;?php while ( have_posts() ) : the_post(); ?&gt;\n        &lt;?php x_get_view( 'icon', 'content', get_post_format() ); ?&gt;\n        &lt;?php x_get_view( 'global', '_comments-template' ); ?&gt;\n      &lt;?php endwhile; ?&gt;\n\t  \n  &lt;\/div&gt;\n\n    &lt;?php if ( $fullwidth != 'on' ) : ?&gt;\n      &lt;?php get_sidebar(); ?&gt;\n    &lt;?php endif; ?&gt;\n\n&lt;?php get_footer(); ?&gt;<\/pre>\n    <strong><h5  class=\"h-custom-headline\" ><span>Step 5<\/span><\/h5><\/strong>\n    <p>Insert the following CSS into the Global CSS under Customise. <em>To navigate here, go to Customise &gt; Custom &gt; Edit Global CSS<\/em><\/p>\n    <pre class=\"brush: css; title: ; notranslate\" title=\"\">.entry-thumb {\n  background-color:transparent;\n}\n.entry-featured {\n  border:none;\n}\n.single-post .entry-featured {\ndisplay:none;\n}\n.single-post .entry-header .entry-title {\ndisplay:none;\n}\n.featured-image {\nposition: relative;\nheight: 500px;\nbackground-size: cover;\nbackground-attachment: fixed;\nbackground-repeat: no-repeat;\nbackground-position: center center;\n}\n\n@media (max-width: 736px) {\n.featured-image {\nbackground-attachment: initial;\nbackground-position: center center;\n}\n.featured-image .caption{\nbottom: 5% !important;\n}\n}\n\n.featured-image:after {\ncontent: \"\";\nheight: 100%;\nwidth: 100%;\nposition: absolute;\ndisplay: block;\n}\n\n.featured-image:after {\nbottom: 0;\nbackground: rgba(96, 124, 138, 0.85);\n}\n\n.featured-image img {\nwidth: 100% !important;\nheight: auto;\nmargin: auto;\n}\n\n.featured-image .caption {\nposition: absolute;\nz-index: 999;\ncolor: #fff !important;\nbottom: 15%;\n}\n\n.featured-image .caption h1 {\ncolor: rgba(255, 255, 255, 0.7) !important;\n}<\/pre>\n\n  <\/section>\n\n<\/main><\/div><div class=\"x-text\"  ><p>And your all done \ud83d\ude42 Hope you enjoy and feel free to share a link to show me the full width parallax featured image in action.<\/p>\n<p>I use Featured Images with a dimension of 1440&#215;900 and .jpg format. If you need to shrink the file size of that file to preserve your <a href=\"http:\/\/benryan.com.au\/services\/\">Speed Optimisation<\/a>, I would recommend <a href=\"https:\/\/tinypng.com\">TinyPNG<\/a>.<\/p>\n<\/div><\/div><\/div><\/div><div id=\"x-section-2\" class=\"x-section\" style=\"margin: 0px;padding: 0px 0px 45px; background-color: transparent;\"  ><div class=\"x-container\" style=\"margin: 0px auto;padding: 0px;\"  ><div  class=\"x-column x-sm x-1-1\" style=\"padding: 0px;\" ><div  class=\"x-author-box cf\" ><h6 class=\"h-about-the-author\">About the Author<\/h6><img alt='' src='https:\/\/secure.gravatar.com\/avatar\/b755ada45ba5e11e0b42486551812405?s=180&#038;d=mm&#038;r=g' srcset='https:\/\/secure.gravatar.com\/avatar\/b755ada45ba5e11e0b42486551812405?s=360&#038;d=mm&#038;r=g 2x' class='avatar avatar-180 photo' height='180' width='180' loading='lazy'\/><div class=\"x-author-info\"><h4 class=\"h-author mtn\">Ben Ryan<\/h4><a href=\"https:\/\/www.facebook.com\/BenRyanDevelopment\/\" class=\"x-author-social\" title=\"Visit the Facebook Profile for Ben Ryan\" target=\"_blank\" rel=\"\" ><i class=\"x-icon-facebook-square\" data-x-icon-b=\"&#xf09a;\"><\/i> Facebook<\/a><a href=\"https:\/\/twitter.com\/BenRyanMe\" class=\"x-author-social\" title=\"Visit the Twitter Profile for Ben Ryan\" target=\"_blank\" rel=\"\" ><i class=\"x-icon-twitter-square\" data-x-icon-b=\"&#xf081;\"><\/i> Twitter<\/a><a href=\"https:\/\/plus.google.com\/+BenRyanWebDeveloper\" class=\"x-author-social\" title=\"Visit the Google+ Profile for Ben Ryan\" target=\"_blank\" rel=\"\" ><i class=\"x-icon-google-plus-square\" data-x-icon-b=\"&#xf0d4;\"><\/i> Google+<\/a><p class=\"p-author mbn\"><\/p><\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In April 2016 I wrote the original piece of code for the full width parallax featured image. It was a &#8230; <a href=\"https:\/\/benryan.com.au\/themeco-full-width-parallax-featured-image\/\" class=\"more-link\">Read More<\/a><\/p>\n","protected":false},"author":1,"featured_media":1024,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[3,5,6],"tags":[],"yst_prominent_words":[304,298,212,290,306,299,800,798,799,796,797,795,123,120,266,268,307,305,124,267],"jetpack_featured_media_url":"https:\/\/benryan.com.au\/wp-content\/uploads\/2016\/04\/Parallax-Blog.jpg","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p7pOOz-gr","_links":{"self":[{"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/posts\/1019"}],"collection":[{"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/comments?post=1019"}],"version-history":[{"count":8,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/posts\/1019\/revisions"}],"predecessor-version":[{"id":5999,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/posts\/1019\/revisions\/5999"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/media\/1024"}],"wp:attachment":[{"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/media?parent=1019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/categories?post=1019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/tags?post=1019"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/benryan.com.au\/wp-json\/wp\/v2\/yst_prominent_words?post=1019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}