Divi blog post template design using Divi Theme Builder

INTRODUCTION

This tutor and show you how to create a blog post template for DV 4.  so here is the default blog post template for DV.  this is kind of boring design. so here in today’s tutorial.  I will create a new post template which will look like this so.  it will work for all poster by default so let’s dive into it and let’s get started.  so for this I’m just going to my – both and then I’m going to DV and DV team builder option.  from here I’m just creating a new template and.

selecting all post now create a template.  so for changing this content part only and just clicking on add custom body.  so I’m going to add custom body . now start building. so first I’m taking a new row . here and here I’m taking post title so.  from here I just only will check this title and categories so I’m just.

switching of this image we’re going to element and switching of this featured image and also comment just only want to show here the categories so I’m also leaving.

Ted auto and just title and below these here is categories okay.  now I am creating a new section here.

regular section and single column so for this section here. I am just taking background image and here. I will take from here this post featured image. I’ll save it and now I want to move it to top and here. I’m adding some height or min height. so I’m going to siding and mean height 300 pixel . okay and here I’m going to row settings and from here. I just want to keep wheat to 60%. so I’m just reducing it to 60%.  just going to spacing and here I’m keeping our margins to zero top and bottom and also padding geo for top and bottom okay now doing the same for this section area.  and going to is spacing and from here and we’re just sitting here. for top and video for bottom now standing also zero or top and bottom. hey now I want to keep it up really over this image so I’m going to this module and going to design tab and from here going to spacing and here. I’m adding some – Margene. so I am just here at the 100 pixel so here. I am adding just some background color.

white and adding some padding from here and it’s at 50 pixel for top and bottom and also 50 pigs in for left and right .  I’m just adding some water let’s try with three pixel and we can keep it to black for now and text alignment.  I’m sitting aligned in center and I’m going to edit this text so I’m just making the font family – concert and keeping the font size to 36 Lily okay.  now I’m just going to this data text . so here I am also changing this onto style. so I’m adding here something different so. I am adding a luma and I’m just increasing my font size and changing this color for now.  I’m just using here for orange you can also add here your theme color it looks good. now I’m going to save it I’m going to save this whole section and proximate and I have to save changes here okay now.  I’m going to fish my blog page now so here is our post page till now so it’s looking good.

I’m adding our next section.  so I’m going to builder again here we can decrease our spacing here seems too much spacing so I’m decreasing my padding from spacing and here. I’m trying with 30 pigs in and for bottom we can reduce it to 20 bits in okay and for left and right you can use 30 pixel. okay now it looks better now.  I’m going to add a new section here so. I am taking a ignore section and one column here. I’m just adding post content and here also. I am decreasing our way to going to Saji and setting. our with to same as before so 60% and decreasing this spacing now. I’m going to post content settings from here. I am going to tiling this font style so. I’m changing my font family to monster to keep it constant yeah.

using same font for all headings I’m just doing it.

now I’m going to save it and from here you can also change this color so for now.  I’m just using same color going to save it so low this section.   I want to add in section for author bio so. I’m going to create a new row again sorry.  I’m going to make it two columns so in left side.  I will add Auto image and right side.  I will add some info about author so. I’m just going to in these wrong settings and from here. I’m just dictating wrong with same as before 60% okay so left side I’m just going to add image and here.  I’m just deleting it and I’m going to add here auto picture here. will add auto image by default and so I’m adding some style here going to border.  and I’m making it to round it picture.  so I’m adding some rounded corner to fight it percent we now look around it save it and right side and similar way and fast. I’m just typing text doom. here I’m going to add oil here is auto oil and top of this and here.  I will add author name so.  I’m just editing it and here . I’m going to add first author so here is our author name here is the name format and. we can link our auto name to auto archive or author website so here. I’m just doing it with auto archive now save it and here. I’m just going to add some border for this section . so I’m going to add water top one pixel . I’m adding border color to lighter and also adding border bottom one pixel and using same color.

Hey so now I will add here that post comment.  so I’m going to add a new section here and taking in a row now here. I’m adding comment I’m going to add here comment save it and here.  I’m any light background so. I’m adding just past this color and making it transparent so it just big so light okay save it now. I’m going to edit this comment from here. I am just going to edit this text style similar way so.  I’m going to change this font family to monster and decreasing the font size same way.  I can change font style from here and.

even we can change our buttery style from here so we can advocate a line to left.  and we can change this button style to use custom style for this button.  so I’m going to add some background color so.  I’m going to add this background color to this color and border color also stem and text color to white now going to save it and I’m going to save it now.  I’m facing my blog post page again so here is our post page style.  so when we add a new post page from our dashboard.  so we will get the same time again by default let’s try it so.  I’m going to post a new post from here to post and add new post . so here I’m just typing this is the new course and for now.  we can use default the door so I’m going to add some text here just typing here and below . I’m going to add image I’m going to add your new mate and here. I am going to add a featured image from here okay now save it and publish it. now I’m going to him post.

so you can see here is a post face style we are getting this design by default. we need not to design again and a mean for all fourth page now.  if you want to add a new section here for subscription so.  we can also do this so let’s add something here.  so I am going to again our builder.  I’m going to our dashboard and from here.  I’m going to again our team builder and going to here now we can add a new section below this auto bio.  so I’m going to add a new section with single column . so here I’m going to add new module for me opt-in form.  I’m going to email opt-in and from here.  I’m just going to change this background color first.  I’m going to make it almost similar and here.  I’m going to add some spacing so.  I’m going to add some padding so.  I’m here I’m trying with 30 pixels top and bottom tip Excel 50 pixel . is okay and for left and right and again 50 pixel okay so now you can can leave our first name and last name from here.  so I am just only want to use email and subscription button.  now I’m going to remove some text so I did not want so many text here and removing some text and I’m going to edit this button style so I’m going to use in custom style for this button.  so I am going to using text color to white and border color.

– why

CONCLUSION

it looks good so now I’m going to save it and for here you have to add a mail account for example.  you can use any one from here and just save your account here.  I will create another tutorial how to activate this opt-in form with MailChimp or any others .  so for now I’m just leaving it now.  I’m going to save it again and the fish in my blog post page.  so you can see here is our signup form for now we cannot see this from here and we don’t set up our account.  so when we set up our account we can see this form here so here is all for today.

Leave a Comment