Divi blog post template design using Divi Theme Builder

in today's video I'm going to show you step-by-step how to create a blog post template using DV 4.0 theme builder so when you start designing a blog post in fact this is what we used to get before we got the theme builder so as you can see this is pretty much boring it's not exciting it's also quite difficult to customize this text here unless you go into some CSS but I'm going to transform this blog post and show you what you can do with a brand new theme builder alright so the first thing you want to do is to come over here in fact let me come to the dashboard so you can see how you get started so this is where you log in to your WordPress admin dashboard right so you want to come over here to Divi theme builder now before I go into the tutorial I have a course coming up called Divi a blueprint for this is a course which should teach you step-by-step how to create awesome looking websites with Divi and this is ideal for beginners to advanced so if you bind Divi using my affiliate link which I'll live in the comments box below you get access to this course it's worth about three hundred and ninety seven dollars so let's dive in and let me show you how to build it so over here what we gonna do is we are going to add a brand new template so I'm gonna click here on this plus button and I'm gonna come to all posts because this is what we needs to create a blog post template alright so now I'm going to click on create template and where we need to go here is here where it says add custom body so I'm gonna come over here build custom body and then next I'm gonna come over here to build from scratch so I'm gonna start off by adding a single column and in here we're going to add a post I mean post content right so as you can see it comes in with this detail here which we can go in and customize so if I go into my module settings here I can go into design and change my headings my paragraph text and so on so let's start with the heading text so over here we're gonna change this from a monster at to let's say Leto and let's leave it as all caps let's move on to the next one which is heading two so right now I'm just changing these fonts so you can see how easy it is to go in and change it so this is what your blog posts are going to look like when you start creating your content so now I've just changed all this content to leto so that's all my headings in fact you know what for heading 3 I don't think I like that color so I'm going to come over here and just use this default color all right so now that I've added all my headings you can do the same for your paragraph text as well so here you can come to text and being change this to whatever you want let's say you want this to be monster rat there we go and I'm pretty much happy with the size here and the line height so that's looking good next over here on the images you can use you can do basic styles like adding rounded corners if you want to and let me show you how to do that so if I come over here to my image I can add some rounded corners here just like that you can see my rounded chrome is being added there so I'm gonna go with let's say 10 right so these are subtle changes that I'm adding here I'm gonna save this and then save this one more time and then close it and then over here on the theme builder you want to make sure you save this so what we've done here is we've just gone in and customized and given our headings a custom size and also with a custom font type so this is the initial change that you may want to do to your blog posts now let me show you how to add all your contents into your blog post and how that's going to be transformed once you apply it this template right so what I want to do here is I want to go back over here to my post and just create a brand new post so over here I'm just gonna come and click on add new let's do this in a new tab so that I don't have to keep going back and forth so here I'm just gonna say my new my new template so instead of using the Divi Builder here because what we've done already is to go in and create our template so now we don't need to go into the builder all we have to do now is to come to the default editor so come over here and this is where we can add all our content so let's say I want to add an image something come over here click on image media library and I'm going to add my image from the media library so I'm gonna go with let's say this one right here click on select and now you can see my image has been selected next I'm gonna add some paragraph text here paste it now what you may also want to do here is to add a heading right so I'm gonna come over here just this kiss just give this a capital C right and this text right here I want to change this to a heading so I'm gonna highlight it go to heading and just give it a heading 1 great so that's what I'm gonna do I'm just gonna add an image here and I'm also gonna add a title so what's gonna happen now is those settings that we added in the templates are going to apply once we save this ok so let me show you how that works so if I in fact before we publish you may also want to add a featured image let's go ahead and edit featured image here so my featured image here is going to be let's go with let's go with this one here select that so now I have a featured image for my blog post next I'm gonna hit publish publish one more time okay now this is pretty much the layout that we had before and even if i refresh this you'll notice a change now I have lorem ipsum here you can see this is the styling that I added this was my paragraph text this was my my heading text and the image that I added had rounded corners so now you can see the rounded corners so my template now has been applied to all my blog post on my website now let's take a look at the post that I've just created so if I come over here I can click on View Post and again you can see I have my rounded corners here I have my title text may am i heading text and my body my body text so that's looking great but of course we want it a bit more advanced than this because this to be honest looks quite boring but at least it's better than what we had before but the most important thing here is now you have a standard customized layout that's gonna be applied to all your blog posts which is really really good and we also we also have one place that we can do all our changes and these changes will be applied across the whole website alright so what we're gonna do now is we're gonna add a featured image so I'm gonna come over here go to our custom body so the way I'm going to add my featured image here is by adding it as a design element so I'm gonna come over here to the bottom scroll all the way down here click this plus button and let's add a full width header I mean post title right so here I'm going to come over here to elements so we can disable what you do want to show here you can see we have a featured image that shows in here but I prefer not having it in there so I am going to not show the featured image so all I have now is the blog title and the meta text so we can go in and also customize this meta text but before I do that it's on to save this and show you how we're gonna build this design so let's drag this all the way up to the top and then I'm gonna come over here to my section settings click on background and this is how I'm going to add my featured image I'm gonna click here on this plus button to add my featured image as a dynamic image and over here I can do some clever stuff as parallax and all of that but you know what I'm not gonna do that for this next I'm gonna come over here and add a gradient so my first color here is gonna be this really dark gray and then my second color is just gonna be transparent great so I want this gradient to show so I'm gonna come over here place gradient above image and now you can see my grade has been added but I want my angle to start from the left so there we go so that's looking much better so the next thing I'm gonna do now is to save this and then stylize my text so I'm gonna click here on this gear icon to go into my fool with post settings click on design and then over here on my title text I'm going to change my font here too monster at all caps let's make it bold and let's also make it white so it's easier to read and on the major text I'm gonna do the same as well change this to monster rad make it white and this time I'm gonna be making at a list go to bold alright so that's looking much better you may want to add some space here I mean some padding to make sure that your image shows really well so let's go in and do that some let's go all the way down here come to spacing add a bit of padding to the top and a bit to the bottom as well and then I'm gonna save this come over here a game to my section settings design sizing and this is where I want to add a height so I can play around here with my height I can make it maybe 426 if this looks better save that then I'm just gonna drag this into position by just adding more padding alright so pretty much I'm happy with that so this area here is where my dynamic image is gonna come so notice what happens when I save someone come over here save and right now I'm working on my template so now that I've saved this I also need to save it over here on my theme builder so if I go now to my post and refresh look at the design that we've just achieved so now we have this featured image with our title here of our blog post and we have our contents right here on the bottom now I'm gonna go to a post that I've created before refresh this and let's see what happens there we go so that looks beautiful and this is a quick way to actually go in and create you know beautiful looking pulse types using the new Divi 4.0 then build it now you may be asking right so how do I add other elements to this blog template like for example you may want to add an opt-in form so that when people come to your blogs they are able to add in the opt their email to build your mailing list so let me show you how to do that so what we gonna do here again I'm gonna come over here to our template so all the work that you need to do is can be done on the so template so what I'm gonna do now is I'm gonna come all the way down here let's add a new row single column and this time is gonna be an email opt-in so here we go we have our email opt-in I'm gonna come over here - in fact let's go to content so here we can choose our email provider so let's see choose convert kids you can choose your lists and then once you've chosen your list just click on add and then over here on fact let me cancel this over here on the fields you can show the name if you want to but if you want to disable it you can just click that and now I've disabled it so that's looking great on the background as well you can remove the background all together and then save and then what you want to do is to come over here to your row settings and this is where you want to add a background so this is just how I'm just playing around with this design so as you can see here my content is way too close to the edges so you want to go in now into your spacing add some padding so let's say 20 let's try 20 here and let's do 20 as well all around okay that's not enough so anyway I can just play around by just adding a bit more here so let's go with 40 like that so that looks much better now and for the text here you can also go in and customize this text make you look great make it look like it's part of human design so I've just added my opt-in here now this opt-in is going to be added on to every single blog post on my website and this is the beauty of using this post template so let me show you how that works so I want to save this now and then over here I'm gonna save this in fact I'm gonna close it and then save here on the theme builder now let's take a look at this template and see if we have our opt-in on the bottom here so I'm gonna refresh that and now here's our opt-in so to double check and make sure that this opt-in is on all the blog posts let's open a another post that's on my website here and see that looks so I'm gonna come over here again I haven't refreshed this so if i refresh it take a look at what happens now we have the opt-in which is fantastic so all the features that you need to add can be added on the theme builder and all the changes there will be transferred throughout your whole template so when you take a look at our template here we can see that we don't have an option where people can come over here and make some comments to our blog post so this can also be added in our theme builder so let me show you how to do that so I'm gonna come over here go back into our custom body and all the way down here let's add a new section regular section single column and this is where we're going to add comments so I'm gonna select it here and we are also able to go in and totally customize this and make it look the way we want you to look so I'm gonna save this for now and I'm just gonna give it a slight gray background here so we can distinguish this from from everything else so I'm gonna add some transparency to it I'm gonna come over here to my row settings come over here to design let's head over here to spacing so again I'm gonna add some padding here just to give this some breathing space great and then I can also add a background color here and some transparency to it save it save it one more time so as you can see all the elements that I'm adding here are all being added to my templates and all the changes are being applied across all my posts on my website so now I'm gonna come back over here let's do a quick refresh now if I go all the way down here now we have our comments section isn't that cool so this is how we used how we use the theme builder to create a custom layout alright guys so that's what I have for you today let me know what you think and if you have any suggestions or anything that you don't understand let ask me your questions in the comments box below but the most important thing is if you haven't bought dv8 you can buy GV using my affiliate link and i'll give you access to TV a blueprint course and also if you want to get access to all my courses head over to funnels to income comm and become a VIP member in fact I'll leave all the links in comments box below keep on designing awesome websites using Divi

Channel: MAK

Views: 58,766

Keywords: How to make business website with wordpress and divi, Augustine mak, divi 3.0 course, divi 3.0 training, divi 3.0 theme tutorial, WordPress website tutorial

Id: O8PJPomtP_4

Length: 15min 47sec (947 seconds)

Published: Sat Nov 02 2019