Site icon Hip-Hop Website Design and Development

How to Include a Fullwidth Featured Image in Your Divi Blog Post Template

Pixeldust WordPress Developer

Fullwidth featured images look great on any blog post. Fortunately, they’re 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’ll see four ways to add a fullwidth image to the blog post template.

Preview

Dynamic Section Background Desktop

Dynamic Section Background Phone

Post Title Module Desktop

Post Title Module Phone

Separate Image Desktop

Separate Image Phone

Fullwidth Image with a Text Module Desktop

Fullwidth Image with a Text Module Phone

About Blog Post Templates

First, you’ll need to create or upload a blog post template. The blog post template provides the design that the content will use when it’s 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 “free blog post template”. Download the template file and unzip it.

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’re building the template from scratch, you’ll have to assign it to the posts manually in the template settings.

For my examples, I’m using the free Blog Post Template for Divi’s Home Care Layout Pack. This template already includes a featured image. We’ll see how it works and see other ways we can add it.

Upload Your Blog Post Template

To upload your unzipped blog template JSON file, go to Divi > Theme Builder in the WordPress dashboard. Select Portability in the upper right corner and select the Import tab in the modal that opens. Navigate to your unzipped file and select it. Click Import Divi Theme Builder Templates and wait for the import to finish. Click Save Changes. The template is automatically assigned to All Posts.

Add a Fullwidth Image to the Blog Post Template

Click the edit icon to open the template.

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.

Add a Fullwidth Image to the Blog Post Template with a Dynamic Section Background

First, let’s look at the method this template uses. The featured image is selected Dynamically in the Section’s Background. It includes a white linear gradient with a direction of 90deg, a starting position of 35%, an end position of 90%, and it’s placed over the background image.

Select Image and click Use Dynamic Content.

Select Featured Image at the top of the list. Save and exit. The featured image will now appear behind the content in that section.

Add a Fullwidth Image to the Blog Post Template with the Post Title Module

First, delete the row with the category and post title text. These are text modules. We’ll replace them with a post title module.

You’ll have a section with the background image and an optin module. Open the Section’s settings.

Scroll to the Background options, select the Gradient and delete it.

Select Image and delete it.

Fullwidth Section

Hover over the top section and click the blue icon to add a new section. Select Fullwidth.

When the module modal opens, select the Fullwidth Post Title module.

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.

Open the Design tab and scroll to Title Text. Select Poppins for the font, semi bold for the weight, and change the text color to #000763.

Set the Text Size to 72px for the desktop. Select the tablet icon and select 40px. Select the phone icon and set it to 34px. Set the Line Height to 1.3em.

Scroll to Meta Text and choose Poppins for the font, semi bold for the weight, alignment to Center, and change the text color to # e53796. Set the Text Size to 20px for the desktop. Select the phone icon and select 14px.

Scroll down to Spacing and set the Bottom Margin to 10px. Set the Right Padding to 300px for Desktop and 0px for Phone.

Add the Gradient

If you want it to have the same gradient as the original, open the Content tab, scroll down to Background. Choose Gradient 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%.

Go to the Design tab, scroll to Spacing, and set the Bottom Padding to 0px. Save your settings and close the builder.

Add a Fullwidth Image to the Blog Post Template with a Separate Image in its Own Row

Open the settings for the Section with the post title and categories.

Scroll to Background. Select Gradient and delete it.

Select Image and delete it. Close the settings.

Add a New Row

Hover over the Row with the title and click to add a new row. Add a single column row and drag the row above the row with the title.

Hover over the new row and click the gray icon to add a new module. Search for Image and add it to the row.

Delete the placeholder image.

Select to Use Dynamic Content.

Next, select Featured Image from the list.

Select the Design tab and scroll to Sizing. Enable Force Fullwidth.

Open the Row settings and select the Design tab. Set both the Width and Max Width to 100%.

Scroll down to Spacing and add -84px to the Top Margin. Save your work and close the builder.

Add a Dynamic Fullwidth Image with a Text Module

First, open the settings for the Section that includes the post details and remove the gradient and dynamic image from the Section’s background.

Next, set the Section’s background to white and close the settings.

Hover over the section and click the blue icon to add a regular section under it.

Add a New Row

Add a single column row.

Open the Row settings and add 100% for the Width and Max Width under Sizing. Close the Row settings.

Next, add a Text module to the Row.

In the Text module settings, delete the dummy content in the body text editor.

Scroll down to the Background settings, choose the Image tab, and select Use Dynamic Content.

Select Featured Image from the list.

Select the Gradient 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.

Select the Design tab and scroll to Spacing. Add 200px for the Top and Bottom Padding. Close the module’s settings.

Open the settings for the Section with the newsletter optin. We’ll make adjustments so that the newsletter appears above the featured image.

We’ll have to set the Z Index higher than the second section. Go to the Advanced tab and scroll down to Position. Set the Z Index to 10. Close the settings.

Next, we need to reduce the space between the featured image and blog post content. Open the Row’s settings that contain the blog post content.

Select the Design tab, scroll to Spacing, and add -160px to the Top Margin. Close the settings.

Open the settings for the Section with the Text module and add 0px padding for the top and bottom. Close the settings and save your work.

Results

Dynamic Section Background Desktop

Dynamic Section Background Phone

Post Title Module Desktop

Post Title Module Phone

Separate Image Desktop

Separate Image Phone

Fullwidth Image with a Text Module Desktop

Fullwidth Image with a Text Module Phone

Ending Thoughts

That’s 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.

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.

The post How to Include a Fullwidth Featured Image in Your Divi Blog Post Template appeared first on Elegant Themes Blog.