{"id":811689,"date":"2022-01-01T16:00:00","date_gmt":"2022-01-01T16:00:00","guid":{"rendered":"https:\/\/www.lafactory.com\/blog\/non-classifiee\/how-to-include-a-fullwidth-featured-image-in-your-divi-blog-post-template\/"},"modified":"2022-01-01T16:00:00","modified_gmt":"2022-01-01T16:00:00","slug":"how-to-include-a-fullwidth-featured-image-in-your-divi-blog-post-template","status":"publish","type":"post","link":"https:\/\/www.lafactory.com\/blog\/en\/how-to-include-a-fullwidth-featured-image-in-your-divi-blog-post-template\/","title":{"rendered":"How to Include a Fullwidth Featured Image in Your Divi Blog Post Template"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"post-165305\">\n<p>Fullwidth featured images look great on any blog post. Fortunately, they\u2019re easy to add using the Divi Theme Builder. There are multiple ways to add them, so you can choose the method that works the best for your needs. In this article, we\u2019ll see four ways to add a fullwidth image to the blog post template.<\/p>\n<h2>Preview<\/h2>\n<h3>Dynamic Section Background Desktop<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Dynamic-Section-Background-Desktop.png\" alt=\"Dynamic Section Background Desktop\" width=\"960\" height=\"464\" class=\"with-border aligncenter size-full wp-image-165607\" \/><\/p>\n<h3>Dynamic Section Background Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Dynamic-Section-Background-Phone.png\" alt=\"Dynamic Section Background Phone\" width=\"960\" height=\"722\" class=\"with-border aligncenter size-full wp-image-165606\" \/><\/p>\n<h3>Post Title Module Desktop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Post-Title-Module-Desktop.png\" alt=\"Post Title Module Desktop\" width=\"960\" height=\"480\" class=\"with-border aligncenter size-full wp-image-165647\" \/><\/p>\n<h3>Post Title Module Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Post-Title-Module-Phone.png\" alt=\"Post Title Module Phone\" width=\"960\" height=\"690\" class=\"with-border aligncenter size-full wp-image-165646\" \/><\/p>\n<h3>Separate Image Desktop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Separate-Image-Desktop.png\" alt=\"Separate Image Desktop\" width=\"960\" height=\"1079\" class=\"with-border aligncenter size-full wp-image-165634\" \/><\/p>\n<h3>Separate Image Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Separate-Image-Phone.png\" alt=\"Separate Image Phone\" width=\"960\" height=\"690\" class=\"with-border aligncenter size-full wp-image-165633\" \/><\/p>\n<h3>Fullwidth Image with a Text Module Desktop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Fullwidth-Image-with-a-Text-Module-Desktop.png\" alt=\"Fullwidth Image with a Text Module Desktop\" width=\"960\" height=\"528\" class=\"with-border aligncenter size-full wp-image-165616\" \/><\/p>\n<h3>Fullwidth Image with a Text Module Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Fullwidth-Image-with-a-Text-Module-Phone.png\" alt=\"Fullwidth Image with a Text Module Phone\" width=\"960\" height=\"764\" class=\"with-border aligncenter size-full wp-image-165615\" \/><\/p>\n<h2>About Blog Post Templates<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/About-Blog-Post-Templates.png\" alt=\"About Blog Post Templates\" width=\"960\" height=\"793\" class=\"with-border aligncenter size-full wp-image-165613\" \/><\/p>\n<p>First, you\u2019ll need to create or upload a blog post template. The blog post template provides the design that the content will use when it\u2019s displayed on the front end. You can get free blog post templates for many of the Divi layouts by searching the Elegant Theme blog for \u201cfree blog post template\u201d. Download the template file and unzip it.<\/p>\n<p>When you upload the blog post template to the Divi Theme Builder, you will not have to assign it. This is done automatically. If you\u2019re building the template from scratch, you\u2019ll have to assign it to the posts manually in the template settings.<\/p>\n<p>For my examples, I\u2019m using the <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/download-a-free-blog-post-template-for-divis-home-care-layout-pack\">free Blog Post Template for Divi\u2019s Home Care Layout Pack<\/a>. This template already includes a featured image. We\u2019ll see how it works and see other ways we can add it.<\/p>\n<h2>Upload Your Blog Post Template<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Upload-Your-Blog-Post-Template.png\" alt=\"Upload Your Blog Post Template\" width=\"960\" height=\"464\" class=\"with-border aligncenter size-full wp-image-165614\" \/><\/p>\n<p>To upload your unzipped blog template JSON file, go to <strong>Divi<\/strong> &gt; <strong>Theme Builder<\/strong> in the WordPress dashboard. Select <strong>Portability<\/strong> in the upper right corner and select the <strong>Import<\/strong> tab in the modal that opens. Navigate to your unzipped file and select it. Click <strong>Import Divi Theme Builder Templates<\/strong> and wait for the import to finish. Click <strong>Save Changes<\/strong>. The template is automatically assigned to <strong>All Posts<\/strong>.<\/p>\n<h2>Add a Fullwidth Image to the Blog Post Template<\/h2>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template.png\" alt=\"Add a Fullwidth Image to the Blog Post Template\" width=\"959\" height=\"424\" class=\"with-border aligncenter size-full wp-image-165612\" \/><\/p>\n<p>Click the <strong>edit icon<\/strong> to open the template.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-2.png\" alt=\"Add a Fullwidth Image to the Blog Post Template\" width=\"960\" height=\"464\" class=\"with-border aligncenter size-full wp-image-165611\" \/><\/p>\n<p>This template displays the meta at the top of the screen followed by the categories, post title, a newsletter signup form, the body of the content, comments, and a CTA.<\/p>\n<h3>Add a Fullwidth Image to the Blog Post Template with a Dynamic Section Background<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Dynamic-Section-Background.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Dynamic Section Background\" width=\"960\" height=\"687\" class=\"with-border aligncenter size-full wp-image-165610\" \/><\/p>\n<p>First, let\u2019s look at the method this template uses. The featured image is selected <strong>Dynamically<\/strong> in the Section\u2019s <strong>Background<\/strong>. It includes a white linear gradient with a direction of 90deg, a starting position of 35%, an end position of 90%, and it\u2019s placed over the background image.<\/p>\n<ul>\n<li>First color: #ffffff<\/li>\n<li>Second color: rgba(0,0,0,0)<\/li>\n<li>Gradient Type: Linear<\/li>\n<li>Gradient Direction: 90deg<\/li>\n<li>Start Position: 35% (45% for Tablet)<\/li>\n<li>End position: 90%<\/li>\n<li>Place Gradient Above Background Image: Yes<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Dynamic-Section-Background-2.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Dynamic Section Background\" width=\"959\" height=\"815\" class=\"with-border aligncenter size-full wp-image-165609\" \/><\/p>\n<p>Select <strong>Image<\/strong> and click <strong>Use Dynamic Content<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Dynamic-Section-Background-3.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Dynamic Section Background\" width=\"960\" height=\"887\" class=\"with-border aligncenter size-full wp-image-165608\" \/><\/p>\n<p>Select <strong>Featured Image<\/strong> at the top of the list. Save and exit. The featured image will now appear behind the content in that section.<\/p>\n<h3>Add a Fullwidth Image to the Blog Post Template with the Post Title Module<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"504\" class=\"with-border aligncenter size-full wp-image-165605\" \/><\/p>\n<p>First, <strong>delete<\/strong> the row with the category and post title text. These are text modules. We\u2019ll replace them with a post title module.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-2.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"212\" class=\"with-border aligncenter size-full wp-image-165604\" \/><\/p>\n<p>You\u2019ll have a section with the background image and an optin module. Open the <strong>Section\u2019s set<\/strong>tings.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-3.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"961\" height=\"655\" class=\"with-border aligncenter size-full wp-image-165603\" \/><\/p>\n<p>Scroll to the <strong>Background<\/strong> options, select the <strong>Gradient<\/strong> and delete it.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-4.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"961\" height=\"668\" class=\"with-border aligncenter size-full wp-image-165602\" \/><\/p>\n<p>Select <strong>Image<\/strong> and <strong>delete<\/strong> it.<\/p>\n<h4>Fullwidth Section<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-5.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"239\" class=\"with-border aligncenter size-full wp-image-165601\" \/><\/p>\n<p>Hover over the top section and click the <strong>blue icon<\/strong> to add a new section. Select <strong>Fullwidth<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-6.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"679\" class=\"with-border aligncenter size-full wp-image-165600\" \/><\/p>\n<p>When the module modal opens, select the<strong> Fullwidth Post Title <\/strong>module.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-7.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"692\" class=\"with-border aligncenter size-full wp-image-165599\" \/><\/p>\n<p>Select to show the title, meta, post categories, and featured image. Uncheck author, date, and comments count. For the Featured Image Placement, select Title\/Meta Background Image.<\/p>\n<ul>\n<li>Show Title<\/li>\n<li>Show Meta<\/li>\n<li>enable Show Post Categories<\/li>\n<li>Show Featured Image<\/li>\n<li>Featured Image Placement: Title\/Meta Background Image<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-8.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"812\" class=\"with-border aligncenter size-full wp-image-165653\" \/><\/p>\n<p>Open the <strong>Design<\/strong> tab and scroll to <strong>Title Text<\/strong>. Select Poppins for the font, semi bold for the weight, and change the text color to #000763.<\/p>\n<ul>\n<li>Font: Poppins<\/li>\n<li>Font Weight: Semi Bold<\/li>\n<li>Color: #000763<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-9.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"959\" height=\"809\" class=\"with-border aligncenter size-full wp-image-165652\" \/><\/p>\n<p>Set the <strong>Text Size<\/strong> to 72px for the desktop. Select the tablet icon and select 40px. Select the phone icon and set it to 34px. Set the <strong>Line Height<\/strong> to 1.3em.<\/p>\n<ul>\n<li>Text Size: 72px (tablet 40px, phone 34px)<\/li>\n<li>Line Height: 1.2em<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-10.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"959\" height=\"751\" class=\"with-border aligncenter size-full wp-image-165651\" \/><\/p>\n<p>Scroll to <strong>Meta Text<\/strong> and choose Poppins for the font, semi bold for the weight, alignment to Center, and change the text color to # e53796. Set the <strong>Text Size<\/strong> to 20px for the desktop. Select the phone icon and select 14px.<\/p>\n<ul>\n<li>Font: Poppins<\/li>\n<li>Font Weight: Semi Bold<\/li>\n<li>Color: #e53796<\/li>\n<li>Text Size: 20px (phone 14px)<\/li>\n<li>Alignment: Center<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-11.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"709\" class=\"with-border aligncenter size-full wp-image-165650\" \/><\/p>\n<p>Scroll down to <strong>Spacing<\/strong> and set the Bottom Margin to 10px. Set the Right Padding to 300px for Desktop and 0px for Phone.<\/p>\n<ul>\n<li>Margin: Bottom 10px<\/li>\n<li>Padding: Right 300px (Phone 0px)<\/li>\n<\/ul>\n<h4>Add the Gradient<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-13.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"731\" class=\"with-border aligncenter size-full wp-image-165649\" \/><\/p>\n<p>If you want it to have the same gradient as the original, open the <strong>Content<\/strong> tab, scroll down to <strong>Background<\/strong>. Choose <strong>Gradient<\/strong> and set the first color to #ffffff and the second color to rgba(0,0,0,0). Choose Linear for the type. Set the direction to 90deg, start position to 35%, and the end Position to 90%.<\/p>\n<ul>\n<li>First color: #ffffff<\/li>\n<li>Second color: rgba(0,0,0,0)<\/li>\n<li>Gradient Type: Linear<\/li>\n<li>Gradient Direction: 90deg<\/li>\n<li>Start Position: 35%<\/li>\n<li>End position: 90%<\/li>\n<li>Place Gradient Above Background Image: Yes<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-the-Post-Title-Module-12.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with the Post Title Module\" width=\"960\" height=\"713\" class=\"with-border aligncenter size-full wp-image-165648\" \/><\/p>\n<p>Go to the <strong>Design<\/strong> tab, scroll to <strong>Spacing<\/strong>, and set the Bottom Padding to 0px. Save your settings and close the builder.<\/p>\n<h3>Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"544\" class=\"with-border aligncenter size-full wp-image-165645\" \/><\/p>\n<p>Open the settings for the <strong>Section<\/strong> with the post title and categories.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-2.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"660\" class=\"with-border aligncenter size-full wp-image-165644\" \/><\/p>\n<p>Scroll to <strong>Background<\/strong>. Select <strong>Gradient<\/strong> and delete it.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-3.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"657\" class=\"with-border aligncenter size-full wp-image-165643\" \/><\/p>\n<p>Select <strong>Image<\/strong> and <strong>delete<\/strong> it. Close the settings.<\/p>\n<h4>Add a New Row<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-4.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"1179\" height=\"717\" class=\"with-border aligncenter size-full wp-image-165642\" \/><\/p>\n<p>Hover over the <strong>Row<\/strong> with the title and click to add a new row. Add a <strong>single column row<\/strong> and drag the row above the row with the title.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-5.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"569\" class=\"with-border aligncenter size-full wp-image-165641\" \/><\/p>\n<p>Hover over the new row and click the <strong>gray icon<\/strong> to add a new module. Search for <strong>Image<\/strong> and add it to the row.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-6.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"541\" class=\"with-border aligncenter size-full wp-image-165640\" \/><\/p>\n<p>Delete the placeholder image.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-7.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"645\" class=\"with-border aligncenter size-full wp-image-165639\" \/><\/p>\n<p>Select to <strong>Use Dynamic Content<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-8.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"961\" height=\"812\" class=\"with-border aligncenter size-full wp-image-165638\" \/><\/p>\n<p>Next, select <strong>Featured Image<\/strong> from the list.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-9.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"961\" height=\"667\" class=\"with-border aligncenter size-full wp-image-165637\" \/><\/p>\n<p>Select the <strong>Design<\/strong> tab and scroll to <strong>Sizing<\/strong>. Enable Force Fullwidth.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-10.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"657\" class=\"with-border aligncenter size-full wp-image-165635\" \/><\/p>\n<p>Open the <strong>Row settings<\/strong> and select the <strong>Design<\/strong> tab. Set both the Width and Max Width to 100%.<\/p>\n<ul>\n<li>Width: 100%<\/li>\n<li>Max Width: 100%<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Fullwidth-Image-to-the-Blog-Post-Template-with-a-Separate-Image-in-its-Own-Row-11.png\" alt=\"Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row\" width=\"960\" height=\"674\" class=\"with-border aligncenter size-full wp-image-165636\" \/><\/p>\n<p>Scroll down to <strong>Spacing<\/strong> and add -84px to the Top Margin. Save your work and close the builder.<\/p>\n<h3>Add a Dynamic Fullwidth Image with a Text Module<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"604\" class=\"with-border aligncenter size-full wp-image-165632\" \/><\/p>\n<p>First, open the settings for the <strong>Section<\/strong> that includes the post details and remove the gradient and dynamic image from the Section\u2019s background.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-2.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"961\" height=\"664\" class=\"with-border aligncenter size-full wp-image-165631\" \/><\/p>\n<p>Next, set the <strong>Section\u2019s background<\/strong> to white and close the settings.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-3.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"516\" class=\"with-border aligncenter size-full wp-image-165630\" \/><\/p>\n<p>Hover over the section and click the blue icon to <strong>add a regular section<\/strong> under it.<\/p>\n<h4>Add a New Row<\/h4>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-4.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"602\" class=\"with-border aligncenter size-full wp-image-165629\" \/><\/p>\n<p>Add a <strong>single column row<\/strong>.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-5.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"961\" height=\"661\" class=\"with-border aligncenter size-full wp-image-165628\" \/><\/p>\n<p>Open the <strong>Row settings<\/strong> and add 100% for the Width and Max Width under Sizing. Close the Row settings.<\/p>\n<ul>\n<li>Width: 100%<\/li>\n<li>Max Width: 100%<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-6.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"648\" class=\"with-border aligncenter size-full wp-image-165627\" \/><\/p>\n<p>Next, add a <strong>Text module<\/strong> to the Row.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-7.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"959\" height=\"673\" class=\"with-border aligncenter size-full wp-image-165626\" \/><\/p>\n<p>In the Text module settings, delete the dummy content in the body text editor.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-8.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"961\" height=\"665\" class=\"with-border aligncenter size-full wp-image-165625\" \/><\/p>\n<p>Scroll down to the <strong>Background<\/strong> settings, choose the <strong>Image<\/strong> tab, and select Use Dynamic Content.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-9.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"959\" height=\"799\" class=\"with-border aligncenter size-full wp-image-165624\" \/><\/p>\n<p>Select <strong>Featured Image<\/strong> from the list.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-10.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"961\" height=\"891\" class=\"with-border aligncenter size-full wp-image-165623\" \/><\/p>\n<p>Select the <strong>Gradient<\/strong> tab and choose white for the first color and white with no opacity for the second color. Keep Linear for the Type and set the Direction to 90deg, Start Position to 35%, and End Position to 90%. Check to place the gradient above the background.<\/p>\n<ul>\n<li>First color: #ffffff<\/li>\n<li>Second color: rgba(0,0,0,0)<\/li>\n<li>Type: Linear<\/li>\n<li>Direction: 90deg<\/li>\n<li>Start Position: 35%<\/li>\n<li>End Position: 90%<\/li>\n<li>Place Gradient Above Background Image: Yes<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-11.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"959\" height=\"720\" class=\"with-border aligncenter size-full wp-image-165622\" \/><\/p>\n<p>Select the <strong>Design<\/strong> tab and scroll to <strong>Spacing<\/strong>. Add 200px for the Top and Bottom Padding. Close the module\u2019s settings.<\/p>\n<ul>\n<li>Padding: 200px (Top, Bottom)<\/li>\n<\/ul>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-12.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"420\" class=\"with-border aligncenter size-full wp-image-165620\" \/><\/p>\n<p>Open the settings for the <strong>Section<\/strong> with the newsletter optin. We\u2019ll make adjustments so that the newsletter appears above the featured image.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-13.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"961\" height=\"691\" class=\"with-border aligncenter size-full wp-image-165621\" \/><\/p>\n<p>We\u2019ll have to set the <strong>Z Inde<\/strong>x higher than the second section. Go to the <strong>Advanced<\/strong> tab and scroll down to <strong>Position<\/strong>. Set the Z Index to 10. Close the settings.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-14.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"464\" class=\"with-border aligncenter size-full wp-image-165619\" \/><\/p>\n<p>Next, we need to reduce the space between the featured image and blog post content. Open the <strong>Row\u2019s settings<\/strong> that contain the blog post content.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-15.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"960\" height=\"659\" class=\"with-border aligncenter size-full wp-image-165618\" \/><\/p>\n<p>Select the <strong>Design<\/strong> tab, scroll to <strong>Spacing<\/strong>, and add -160px to the Top Margin. Close the settings.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Add-a-Dynamic-Fullwidth-Image-with-a-Text-Module-16.png\" alt=\"Add a Dynamic Fullwidth Image with a Text Module\" width=\"961\" height=\"661\" class=\"with-border aligncenter size-full wp-image-165617\" \/><\/p>\n<p>Open the settings for the <strong>Section<\/strong> with the Text module and add 0px padding for the top and bottom. Close the settings and save your work.<\/p>\n<ul>\n<li>Padding: 0px (Top, Bottom)<\/li>\n<\/ul>\n<h2>Results<\/h2>\n<h3>Dynamic Section Background Desktop<\/h3>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Dynamic-Section-Background-Desktop.png\" alt=\"Dynamic Section Background Desktop\" width=\"960\" height=\"464\" class=\"with-border aligncenter size-full wp-image-165607\" \/><\/p>\n<h3>Dynamic Section Background Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Dynamic-Section-Background-Phone.png\" alt=\"Dynamic Section Background Phone\" width=\"960\" height=\"722\" class=\"with-border aligncenter size-full wp-image-165606\" \/><\/p>\n<h3>Post Title Module Desktop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Post-Title-Module-Desktop.png\" alt=\"Post Title Module Desktop\" width=\"960\" height=\"480\" class=\"with-border aligncenter size-full wp-image-165647\" \/><\/p>\n<h3>Post Title Module Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Post-Title-Module-Phone.png\" alt=\"Post Title Module Phone\" width=\"960\" height=\"690\" class=\"with-border aligncenter size-full wp-image-165646\" \/><\/p>\n<h3>Separate Image Desktop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Separate-Image-Desktop.png\" alt=\"Separate Image Desktop\" width=\"960\" height=\"1079\" class=\"with-border aligncenter size-full wp-image-165634\" \/><\/p>\n<h3>Separate Image Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Separate-Image-Phone.png\" alt=\"Separate Image Phone\" width=\"960\" height=\"690\" class=\"with-border aligncenter size-full wp-image-165633\" \/><\/p>\n<h3>Fullwidth Image with a Text Module Desktop<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Fullwidth-Image-with-a-Text-Module-Desktop.png\" alt=\"Fullwidth Image with a Text Module Desktop\" width=\"960\" height=\"528\" class=\"with-border aligncenter size-full wp-image-165616\" \/><\/p>\n<h3>Fullwidth Image with a Text Module Phone<\/h3>\n<p><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.elegantthemes.com\/blog\/wp-content\/uploads\/2022\/01\/Fullwidth-Image-with-a-Text-Module-Phone.png\" alt=\"Fullwidth Image with a Text Module Phone\" width=\"960\" height=\"764\" class=\"with-border aligncenter size-full wp-image-165615\" \/><\/p>\n<h2>Ending Thoughts<\/h2>\n<p>That\u2019s our look at four methods to add a fullwidth image to the blog post template. Each of the methods is easy to use and modify. This gives you several choices, so you can use the method that works best for you.<\/p>\n<p><strong>We want to hear from you. Do you use any of these methods to add a fullwidth image to your blog post template? Let us know in the comments. <\/strong><\/p>\n<p><span class=\"et_social_bottom_trigger\" \/>\n<\/div>\n<p>[ad_2]<br \/>\n<br \/><a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-include-a-fullwidth-featured-image-in-your-divi-blog-post-template\">Source link <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] Fullwidth featured images look great on any blog post. Fortunately, they\u2019re easy to add using the Divi Theme Builder. There are multiple ways to add them, so you can choose the method that works the best for your needs. In this article, we\u2019ll see four ways to add a fullwidth image to the blog [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[529],"tags":[],"class_list":["post-811689","post","type-post","status-publish","format-standard","hentry","category-wordpress"],"_links":{"self":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/811689","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/comments?post=811689"}],"version-history":[{"count":0,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/posts\/811689\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/media?parent=811689"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/categories?post=811689"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lafactory.com\/blog\/en\/wp-json\/wp\/v2\/tags?post=811689"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}