Divi Theme Tutorial | How to make your blog posts look awesome

by default when you set up your blog post they look something like this and i'm sure you can agree with me that uh this needs a bit of work so in this video i want to show you how to transform this design which is pretty much basic out of divi and transform it and make it look like this so as you can see here this is a total transformation this looks way much better and it has also scope to be optimized and make it look however you want you can add opt-in forms you can add pretty much anything to this design but i'm sure you can agree with me that from here to here this is a much better design so i'm going to show you step by step how to use the theme builder to come up with this design now before we get started i'd like to remind you that if you buy divi using my affiliate link i will give you access to my web design formula course a course that teaches you step by step how to become a professional designer from scratch all you have to do is to buy divi using my affiliate link and once you've done that just let me know either via email or if you go to funnel to income dot com on the bottom right if you click on the support tab you just add your invoice number in there and i'll be able to send you the course all right without wasting a lot of time let's dive in and let's get started all right so the first thing we need to do is to head over to our theme builder so we're going to come all the way down here to divi and then click on theme builder so this is where we're going to design our post template so now i'm going to click on this plus button and i'm going to go to all posts because this needs to be applied to all the posts on my site i'm going to click on create template and this is going to be the template for all my posts now over here i can remove the header if i don't need to have the same header on all my posts but you know what in this example i'm just going to leave this as it is on there right so the main area that we need to go to here is the main custom body so i'm going to come over here build custom body now this is going to take us now into our builder so i'm going to build this from scratch and i'm going to start off with let's go with a single column go ahead and select that and in that column i'm going to add text module okay select that so this text module here i want it to be dynamic because i want this to pull the actual title of the post so i'm going to click here and i'm going to say post all archive title so that's dynamically going to do that all right so now that we have that all set i am going to save this and on the top here i am going to add a background color that goes across my main heading so i'm going to come over here go to background and then i'm just going to choose my color here i mean to be honest i can go with really any color that i want it's just me it just needs to be a color that you have on your color palette so i'm going to come over here and i'm just going to go in and choose my color so i'm going to go with this okay now it's time to work on my text so i'm going to save this and then i'm going to go into my module here design and then i'm going to click here on my text now let's go to all caps and over here i can play around with the colors now so i'm going to click here on my my color picker and the color i'm going to play around with here is let's see what we can go with right so let's try let's try this one here in fact i like that right so next i am going to make my text bigger now so i'm going to come over here to my text size and i'm just going to add let's try 5vw see how that looks and that's a bit too much so let's go down to about vw and let's make it bold because uh this is a title here so it looks much better if it's really bold and also i think i'll have it centered i think i like it centered okay right so let's look for our bold and here it is i'm going to set it to bold and just in case we might have two lines like what we saw earlier on when i increase the size let's just adjust our line height over here okay so let's bring this down okay so 1.7 in fact let's go to 1.8 as my line height so now that i have that you can see here it's very easy to change my colors i can just go in here change the background color and boom it's done now if you want to have let's say something more more universal like maybe it's a tech website and you like to use your grays you can always go in and change the background color over here so the reason why i added this color here is to show you how easy it is so at any point while you're working on your site you decide you know what i want to change colors you can just come over here change your color there to white or you can just make it a slight gray because that's a bit too that's a bit too much okay and then you save that come over here to your background you can go to your background as well and you can just change this to a really dark color and you can even go with a dark gray like that so that's how easy it is to go in and change your colors and this will be applied globally across all your posts all right so i'm going to stick with that for now and then the next step is to add another module here so i'm going to click on this plus button and this needs to be a text one so i'm going to add my date here so let's see if we can add our date yeah post publish date there we go and what i want to say here is i'm going to say published okay published on colon and space so this is going to be before i add this dynamic text so you see once it refreshes here it's going to show my date here and that will look really nice now i want to save this and then i'm also going to come over here to my design and i'm going to center it because everything else is centered so i'm going to click here on text then i want to come all the way down here and center it now you may also go further and add the author of this article so you can go in and add you know many items as you want here you can also add social media icons in fact you know what let's add some social media icons here so i'm going to save that then i'm going to come back here click on let's click here on this plus button and search for social media so here i'm just going to add a few i'm just gonna duplicate this let's go in and facebook twitter let's add instagram here let's go back and what's the other popular one let's see instagram okay let's just put youtube all right so now i have all my icons now what i normally like here when i design using these icons is to just go in here and reset item styles so this just gets rid of the colors reset item styles is what i need so you just want to go in and just do this to all of them like that next i can now add my color so i can just go over here to design icon and i can then customize my color over here so i can just change this to whatever i want that matches my website so again let's go with a light gray and what i can also do while i'm here is to add a hover state so on hover i can choose my color here and let's say i want to go with let's go with this orange color on hover okay and then finally i want to center all this right so if you want to center it all you have to do is to come over here to alignment and then you want to center that so you can choose here whether you want to have this here on the top on the bottom so let's see i would rather have the publish date on the top and then the social media on the bottom but of course it's your choice next you can go in now into your section settings here and you can then choose to add section dividers so over here on dividers i'm going to add my divider here at the bottom and i can choose my different styles so i could go with let's go with this one here but we want it reversed so let's see if we can reverse that there we go so now i've just reversed that and let's increase our height oops that's not what i wanted to do let's bring it down to about 80. okay that's looking great and finally oh in fact not finally let's head over here to our header spacing and here i'm going to add ivw because i want my header nice and big and this needs to be applied both to the top and the bottom and if you feel it's not enough you can just add this by just nudging it up like that okay so now that we have that all set what you can also do here is to take a look and see how things look on mobile devices so i've just clicked on this one here i can click on that and as you can see things look pretty pretty cool all right so the next step now is to hit save okay now i'd like to add my image now but anyway as i look at this i think this header area here is way too much so i'm just gonna bring this down a little bit okay let's go with five all right so the next step here is to add another section so i'm gonna click here on this plus button regular and this time i'm gonna add a single column like what i did before and in that column i'm gonna add an image and select that right so this image here is going to act as my featured image so i'm going to delete this and then i'm going to come over here and set my featured image over here so this is going to be dynamically added on to my site which is really cool all right so now that i have my featured image here what i can also do here is to play around with my positioning so i can use negative margins i can drag this all the way up like that and again i'd like to see what this looks like on different devices and that looks okay and that looks okay on there as well so okay so so far so good we have our featured image we have our hero area here all looking great all right so the next step now is to add our post content so i'm going to come over here and i'm just going to search for a post content over here so this is what's going to represent our information on our blog so now that i have this all set i can go in here and i can go to advanced no design spacing and i can just add zero over here i don't want any padding and i don't want any margins here and then i can go to my text now and change this to my favorite font and you know it is that change it here as well there we go so you can see here all that has been updated i can save this now and pretty much this is what our layout is going to look like all right so now i'm going to save this okay so next i'm going to close here and save changes so now all my changes here have been saved now let's take a look and see what our post looks like so i'm going to refresh this and there we go so this is now my post it has all my content in there and this looks really really awesome so if i go in and i decide you know what i want to go in and reduce this image size because as you can see it's just way too big once you go back over here you can customize this make it look smaller and this change will be applied pretty much across the whole website all right so let's have a look once this image loads we're going to go in and adjust the size so i'm going to go over here to my row settings design sizing and i'm going to reduce my width let's go with 60 percent save changes save this one more time and now let's refresh this and see what that looks like okay so you can see it's much smaller but as i'm looking at this this image here is not really proportional normally what i do is when i use my images i have it at 1280 by 720 so this one here is a bit you know it's a bit off so i would go into photoshop and resize it and make it look much better now as i mentioned with this layout now this is how it look like across pretty much your whole website i can see here this text here can be increased a little bit and i can go back over here and say right i want my body text here to increase so i'm just going to bump it up to about about 16. in fact you know what this needs to be applied to all of it there we go 16 i'm going to give this some line height as well right so now it's much easier to read and i'm happy with that so let's save this and we're going to close this save it one more time and then over here now when i refresh you're going to note you're going to notice that my text is going to be much bigger and it looks much much better all right so this is pretty much how you design a custom post layout for your blog post so if you like this video please give me a thumbs up and do subscribe hit the subscribe and bell notification by doing so you'll be notified when i release new tutorials until next time thanks for watching and i'll see you in the next video

Channel: MAK

Views: 8,451

Keywords: Augustine mak, Divi 4.0, divi 4.0 tutorial, divi 4.0 templates, Divi 4.0 template, Carflows divi, wordpress funnels, Cartflows, wp fusion, Divi Theme Tutorial

Id: hVeVFTBRQc0

Length: 14min 34sec (874 seconds)

Published: Thu May 14 2020