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

by | Jan 1, 2022 | Etcetera | 0 comments

Fullwidth featured photographs glance nice on any weblog publish. Thankfully, they’re simple so as to add the usage of the Divi Theme Builder. There are a couple of techniques so as to add them, so you’ll be able to make a selection the process that works the most efficient in your wishes. On this article, we’ll see 4 techniques so as to add a fullwidth symbol to the weblog publish template.

Preview

Dynamic Segment Background Desktop

Dynamic Section Background Desktop

Dynamic Segment Background Telephone

Dynamic Section Background Phone

Put up Name Module Desktop

Post Title Module Desktop

Put up Name Module Telephone

Post Title Module Phone

Separate Symbol Desktop

Separate Image Desktop

Separate Symbol Telephone

Separate Image Phone

Fullwidth Symbol with a Textual content Module Desktop

Fullwidth Image with a Text Module Desktop

Fullwidth Symbol with a Textual content Module Telephone

Fullwidth Image with a Text Module Phone

About Weblog Put up Templates

About Blog Post Templates

First, you’ll want to create or add a weblog publish template. The weblog publish template supplies the design that the content material will use when it’s displayed at the entrance finish. You’ll be able to get unfastened weblog publish templates for most of the Divi layouts by way of looking out the Chic Theme weblog for “unfastened weblog publish template”. Obtain the template document and unzip it.

While you add the weblog publish template to the Divi Theme Builder, you are going to no longer need to assign it. That is executed mechanically. When you’re construction the template from scratch, you’ll need to assign it to the posts manually within the template settings.

For my examples, I’m the usage of the free Blog Post Template for Divi’s Home Care Layout Pack. This template already features a featured symbol. We’ll see the way it works and spot different ways we will upload it.

Add Your Weblog Put up Template

Upload Your Blog Post Template

To add your unzipped weblog template JSON document, cross to Divi > Theme Builder within the WordPress dashboard. Make a choice Portability within the higher proper nook and make a choice the Import tab within the modal that opens. Navigate in your unzipped document and make a choice it. Click on Import Divi Theme Builder Templates and look ahead to the import to complete. Click on Save Adjustments. The template is mechanically assigned to All Posts.

Upload a Fullwidth Symbol to the Weblog Put up Template

Add a Fullwidth Image to the Blog Post Template

Click on the edit icon to open the template.

Add a Fullwidth Image to the Blog Post Template

This template presentations the meta on the best of the display adopted by way of the types, publish identify, a publication signup shape, the frame of the content material, feedback, and a CTA.

Upload a Fullwidth Symbol to the Weblog Put up Template with a Dynamic Segment Background

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

First, let’s take a look at the process this template makes use of. The featured symbol is chosen Dynamically within the Segment’s Background. It features a white linear gradient with a route of 90deg, a beginning place of 35%, an finish place of 90%, and it’s positioned over the background symbol.

  • First colour: #ffffff
  • 2nd colour: rgba(0,0,0,0)
  • Gradient Sort: Linear
  • Gradient Course: 90deg
  • Get started Place: 35% (45% for Pill)
  • Finish place: 90%
  • Position Gradient Above Background Symbol: Sure
See also  The Ultimate Guide to HTTPS and SSL for WordPress

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

Make a choice Symbol and click on Use Dynamic Content material.

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

Make a choice Featured Symbol on the best of the record. Save and go out. The featured symbol will now seem at the back of the content material in that phase.

Upload a Fullwidth Symbol to the Weblog Put up Template with the Put up Name Module

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

First, delete the row with the class and publish identify textual content. Those are textual content modules. We’ll substitute them with a publish identify module.

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

You’ll have a bit with the background symbol and an optin module. Open the Segment’s settings.

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

Scroll to the Background choices, make a choice the Gradient and delete it.

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

Make a choice Symbol and delete it.

Fullwidth Segment

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

Hover excessive phase and click on the blue icon so as to add a brand new phase. Make a choice Fullwidth.

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

When the module modal opens, make a choice the Fullwidth Put up Name module.

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

Make a choice to turn the identify, meta, publish classes, and featured symbol. Uncheck writer, date, and feedback rely. For the Featured Symbol Placement, make a choice Name/Meta Background Symbol.

  • Display Name
  • Display Meta
  • allow Display Put up Classes
  • Display Featured Symbol
  • Featured Symbol Placement: Name/Meta Background Symbol

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

Open the Design tab and scroll to Name Textual content. Make a choice Poppins for the font, semi daring for the burden, and alter the textual content colour to #000763.

  • Font: Poppins
  • Font Weight: Semi Daring
  • Colour: #000763

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

Set the Textual content Dimension to 72px for the desktop. Make a choice the pill icon and make a choice 40px. Make a choice the telephone icon and set it to 34px. Set the Line Top to at least one.3em.

  • Textual content Dimension: 72px (pill 40px, telephone 34px)
  • Line Top: 1.2em

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

Scroll to Meta Textual content and make a selection Poppins for the font, semi daring for the burden, alignment to Heart, and alter the textual content colour to # e53796. Set the Textual content Dimension to 20px for the desktop. Make a choice the telephone icon and make a choice 14px.

  • Font: Poppins
  • Font Weight: Semi Daring
  • Colour: #e53796
  • Textual content Dimension: 20px (telephone 14px)
  • Alignment: Heart

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

Scroll all the way down to Spacing and set the Backside Margin to 10px. Set the Proper Padding to 300px for Desktop and 0px for Telephone.

  • Margin: Backside 10px
  • Padding: Proper 300px (Telephone 0px)

Upload the Gradient

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

If you need it to have the similar gradient as the unique, open the Content material tab, scroll all the way down to Background. Select Gradient and set the primary colour to #ffffff and the second one colour to rgba(0,0,0,0). Select Linear for the kind. Set the route to 90deg, get started place to 35%, and the top Place to 90%.

  • First colour: #ffffff
  • 2nd colour: rgba(0,0,0,0)
  • Gradient Sort: Linear
  • Gradient Course: 90deg
  • Get started Place: 35%
  • Finish place: 90%
  • Position Gradient Above Background Symbol: Sure
See also  Download a FREE Header & Footer for Divi’s Fashion Designer Layout Pack

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

Pass to the Design tab, scroll to Spacing, and set the Backside Padding to 0px. Save your settings and shut the builder.

  • Backside Padding: 0px

Upload a Fullwidth Symbol to the Weblog Put up Template with a Separate Symbol in its Personal Row

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

Open the settings for the Segment with the publish identify and classes.

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

Scroll to Background. Make a choice Gradient and delete it.

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

Make a choice Symbol and delete it. Shut the settings.

Upload a New Row

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

Hover over the Row with the identify and click on so as to add a brand new row. Upload a unmarried column row and drag the row above the row with the identify.

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

Hover over the brand new row and click on the grey icon so as to add a brand new module. Seek for Symbol and upload it to the row.

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

Delete the placeholder symbol.

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

Make a choice to Use Dynamic Content material.

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

Subsequent, make a choice Featured Symbol from the record.

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

Make a choice the Design tab and scroll to Sizing. Permit Drive Fullwidth.

  • Drive Fullwidth: Sure

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

Open the Row settings and make a choice the Design tab. Set each the Width and Max Width to 100%.

  • Width: 100%
  • Max Width: 100%

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

Scroll all the way down to Spacing and upload -84px to the Most sensible Margin. Save your paintings and shut the builder.

  • Margin Most sensible: -84

Upload a Dynamic Fullwidth Symbol with a Textual content Module

Add a Dynamic Fullwidth Image with a Text Module

First, open the settings for the Segment that comes with the publish main points and take away the gradient and dynamic symbol from the Segment’s background.

Add a Dynamic Fullwidth Image with a Text Module

Subsequent, set the Segment’s background to white and shut the settings.

  • Background: #ffffff

Add a Dynamic Fullwidth Image with a Text Module

Hover over the phase and click on the blue icon to upload a typical phase beneath it.

Upload a New Row

Add a Dynamic Fullwidth Image with a Text Module

Upload a unmarried column row.

Add a Dynamic Fullwidth Image with a Text Module

Open the Row settings and upload 100% for the Width and Max Width beneath Sizing. Shut the Row settings.

  • Width: 100%
  • Max Width: 100%

Add a Dynamic Fullwidth Image with a Text Module

Subsequent, upload a Textual content module to the Row.

Add a Dynamic Fullwidth Image with a Text Module

Within the Textual content module settings, delete the dummy content material within the frame textual content editor.

Add a Dynamic Fullwidth Image with a Text Module

Scroll all the way down to the Background settings, make a selection the Symbol tab, and make a choice Use Dynamic Content material.

See also  How to Use the Filter Products by Stock WooCommerce Block

Add a Dynamic Fullwidth Image with a Text Module

Make a choice Featured Symbol from the record.

Add a Dynamic Fullwidth Image with a Text Module

Make a choice the Gradient tab and make a selection white for the primary colour and white with out a opacity for the second one colour. Stay Linear for the Sort and set the Course to 90deg, Get started Place to 35%, and Finish Place to 90%. Take a look at to put the gradient above the background.

  • First colour: #ffffff
  • 2nd colour: rgba(0,0,0,0)
  • Sort: Linear
  • Course: 90deg
  • Get started Place: 35%
  • Finish Place: 90%
  • Position Gradient Above Background Symbol: Sure

Add a Dynamic Fullwidth Image with a Text Module

Make a choice the Design tab and scroll to Spacing. Upload 200px for the Most sensible and Backside Padding. Shut the module’s settings.

  • Padding: 200px (Most sensible, Backside)

Add a Dynamic Fullwidth Image with a Text Module

Open the settings for the Segment with the publication optin. We’ll make changes in order that the publication seems above the featured symbol.

Add a Dynamic Fullwidth Image with a Text Module

We’ll need to set the Z Index upper than the second one phase. Pass to the Complicated tab and scroll all the way down to Place. Set the Z Index to ten. Shut the settings.

  • Z Index: 10

Add a Dynamic Fullwidth Image with a Text Module

Subsequent, we want to scale back the distance between the featured symbol and weblog publish content material. Open the Row’s settings that include the weblog publish content material.

Add a Dynamic Fullwidth Image with a Text Module

Make a choice the Design tab, scroll to Spacing, and upload -160px to the Most sensible Margin. Shut the settings.

  • Margin, Most sensible: -160px

Add a Dynamic Fullwidth Image with a Text Module

Open the settings for the Segment with the Textual content module and upload 0px padding for the highest and backside. Shut the settings and save your paintings.

  • Padding: 0px (Most sensible, Backside)

Effects

Dynamic Segment Background Desktop

Dynamic Section Background Desktop

Dynamic Segment Background Telephone

Dynamic Section Background Phone

Put up Name Module Desktop

Post Title Module Desktop

Put up Name Module Telephone

Post Title Module Phone

Separate Symbol Desktop

Separate Image Desktop

Separate Symbol Telephone

Separate Image Phone

Fullwidth Symbol with a Textual content Module Desktop

Fullwidth Image with a Text Module Desktop

Fullwidth Symbol with a Textual content Module Telephone

Fullwidth Image with a Text Module Phone

Finishing Ideas

That’s our take a look at 4 upload a fullwidth symbol to the weblog publish template. Each and every of the strategies is simple to make use of and regulate. This will provide you with a number of alternatives, so you’ll be able to use the process that works right for you.

We wish to listen from you. Do you employ any of those upload a fullwidth symbol in your weblog publish template? Tell us within the feedback.

The publish How to Include a Fullwidth Featured Image in Your Divi Blog Post Template gave the impression first on Elegant Themes Blog.

0 Comments

Submit a Comment