Blog post design - WordPress blog layout design with Divi 4.0

hello everyone and welcome in today's tutorial I'm gonna show you step by step hard to create this template so this is your blog template so anything that you add on to your blog post will pretty much be reformatted and it this is how it's going to look so as you can see here this will show your author and over here on the top this is your social media icons it also shows the published date and this will happen per article and then over here this is where your featured image would show and this is also the format that I've created in actual templates so all your links will show up this way and this is your quote and this is your headings over here on the comments section as you can see this has been highly customized pretty much this is designed from scratch adding all our branding colors so now if i refresh this page you'll notice that this is a default layout that you'd normally get with Divi so as you can see here this is the standard that's any other website would look like and this is not how you want to be designing your blog post template so as you can see here it doesn't have a footer and also this button is not highly customized and pretty much this is using your standard text that comes in with dimi so I'm gonna show you how to pretty much redo this and have a custom blog layout oops and I forgot if you buy Divi using my affiliate link I will also give it access to my Divi course called the web design formula this cost about 497 dollars but if you buy Divi using my affiliate link I'll give you access to my course absolutely free just let me know that you've what Divi using my affiliate link and I'll give you access to it alright so right now we are in our admin dashboard so the very first thing we need to do is to head over here to Divi click on a theme builder so this is where all our work is going to be done so I'm gonna click here on add new template and because this template is going to be applied to all our blog posts on the click on all posts create a template and I'm gonna head over here now to add custom body click on custom body and because all our work here is going to be done from scratch I'm going to click here on start building so the first thing I'm gonna do is to add my background color here on my headers area so I'm gonna click on background click on this plus button and add my background color so that's all I need to do here save that so the next stage is to add my blog post title so I'm gonna click here on this plus button and we need to add a single column and in that column we're going to add a text module go ahead and do that now for this to work you need to click here on this little icon here this is the dynamic icon so here we need to dynamically bring in the post title post all archive titles I'm going to go ahead and select that so pretty much that's all we need to do here next we need to come over here to design text and we just need to make this all-caps change our color over here so I'm just gonna paste my color in here and then next I'm just going to increase my size like that so maybe about 32 will do and let us spacing I think I'll just leave it as it is okay great so that's my main title go ahead and save that now over here we may also want to add some design elements so what I'm gonna do in fact as you can see here we can actually add a divider they on the top so let's go ahead and add it so I'm going to search for my divider module I'm gonna select it click on design so over here on the line it is a few things that we can do we can actually change the the color off the line so let me go ahead and do that I'm gonna click here on this little icon change paste my color in here and then I'm going to come over here to sizing increase the size for the divider not too much maybe about 4 pixels and then for the width I'm gonna bring this all the way down to about let's say 8% okay let's save that and now I can just drag this above my title alright so now that I have my title here the next thing we need we may need to do here and again you can see I don't have access to add a new module so I'm gonna go back over here to my wireframe mode click on this plus button and let me add a blurb module so here it is select it switch over here to my front-end editor so what I'm gonna do here is I'm also going to pull the post comments count so here we go so we just want to give an idea of how many people have actually commented on this actual post so as you can see here the numbers come up is 12 let me just say here comments okay so now it's showing that it's comments 12 I've just added a column okay great so I'm going to go ahead and save this now because this is a blurb module what you're gonna do as well is to add an icon so I'm gonna click here on use icon and I'm just gonna use my icon here I'm gonna go with this one here okay so that's gonna pretty much show us that this is our chat great so now that we have this in place pretty much it's not looking really well so we want this to be on the left side so let me come over here now to design image an icon and first of all I want this left aligned and I want this to the left so now I can see everything is now over here to the left all I have to do now is to adjust my icon size and drag this down to about say 20 26 26 looks okay so now what I need to do next is to give this some color so I'm gonna click here on this eyedropper tool and paste my color in here like that so that's gonna be my color for my icon and I also need to add some colors to this text over here so I'm gonna click here on this icon because this is a link change my font here to poppins this all caps in fact you know what we have too many all caps let's leave it like that increase the size a little bit to about maybe about 16 and then I'm gonna add my color in here great so that color has worked that's looking really nice I'm gonna go ahead and save so the next thing we need to do now is to add pretty much our content so we need our content container this is where all our blog posts whatever you type on your blog needs to go into so let's go ahead and do that so I'm gonna click here on this plus button at a regular section and this section here is going to have a 1/4 3/4 column someone go ahead and choose that so over here now I'm going to start by adding my social media follow icons so I'm gonna search for social media select that so next I'm just gonna add a few more here and then go into this gear icon and change this from Twitter to let's say Pinterest go back over here and then this waiter here needs to be changed to let's go for Instagram because Instagram is quite popular as well alright so now that I've added all these here I can pretty much leave them as they are Save Changes next I need to add a divider so go ahead and search for divider here so that's my divider line to be honest the color here I'm not sure I like that so let me just go in and adjust that click here on design click on line and I'm just gonna paste my color in here now this color of just pasted is the same color here as the background on my section so now I'm gonna add some transparency to it great so I'm pretty much happy with that when it's safe next I'm gonna come over here now and add another module and this time we are going to add a Content module scroll down here and here it is post content so this is our post content module so I'm gonna go in now and customize my headings by pretty much my images and anything that needs to come in here so I'm gonna start here by clicking on this brush a little brush tool so this will take me directly to my heading font change this to Poppins and you know what I am also going to change the color of the heading so the reason why I'm highly customizing this is because I really want to see I want you to see how you can really customize this alright so now that I've got that in place next let's head over here to our normal paragraph text change this to Poppins next I'm gonna change my links here you can see my link color here is has the color I'm gonna change that by coming over here to recent so now you can see I've changed my link colors I can even make them underlined just like that so this is really cool I'm really customizing all my text here okay so let's come over here and this is heading two again I'm going to change this to Poppins my size to be honest it's okay I'll leave it as it is and absolutely change the color off the heading and I'm gonna do the same to heading 3 change the color alright so pretty much my content area here has been has been sorted out now this image here can also be changed so if you want to add some corners to this image we can also do it right here but what I've also noticed is we have this line here it doesn't have the colors of our branding so let's go ahead and fix that so the color I'm gonna use there is I'm just going to choose one of these colors here for my palette I'm going to click here on design text and this is for my blog quote over here at my color so here in fact you know what it's not dark enough let me just adjust that let's make it italic okay that's great now let's head over here to the border so here on the border color I'm gonna add my color like that okay there we go safe all right so pretty much everything that I need here is in place that's looking great now over here to the to the left we need to add some more information so the first thing I need to add here is the date this was published so I'm gonna click on this plus button search for my text module and here I'm gonna click on this dynamic content and let me publish taste that's what I'm looking for and then I'm just gonna say published on oh just say published : now the date format here is what can be changed I'm just going to click here and this time I'm think I'm gonna go with the shorter version go with that okay published okay so that's looking great now what I may also need to do here after saving is to come over here to design click on text and we can also change the text color over here like that but you know what that doesn't look great so I'm just gonna go with gray so I'm just gonna go with that right so let's save that next we're gonna add a blurb module and I'm gonna show you what I'm gonna do with this so this is pretty much the author information so I'm gonna click here on blurb so what I'm gonna do now is I'm gonna start here with this image okay so I want to come to you image an icon delete it and then I'm going to click here on dynamic and then we need the author profile picture so this is pretty much the author of this article so this is where the image will come right so now that I have this in place so this title here we want this title to be the name right so I'm gonna come over here in fact I need to go back to text and then click here on dynamic content and then off post author so that's where the name would come okay and here is all the description so I'm gonna save this okay and this will be the author bio okay there we go so that's the author bio now I can go in and customize the text so let me start here with this text here so I'm gonna come over here and let me choose a light a slightly darker gray that now this dynamic texts to be honest I think this is okay and size wise we don't want this to be way too way too much now let's head over here to the image so what I'm going to do with the image here I'm just gonna make it round so on to everything rounded there so I'm going to add a hundred pixels and now you can see when once my image is pulled in that's how this would show great so now I am going to pretty much save this so I'm pretty much deciding how do I want this to be do I want my publish date to be on the bottom or on the top so I think it's better if I had the publish date over here so publish date is over there and this is my author bio so I think pretty much this looks okay now I can save this now the next area which is which in my opinion is very important is the actual comments area so let's go ahead and add that all the way down here click on this plus button and I'm going to click on regular right so here I'm going to add our comments area so I'm going to add a single column here add my comments and then just save this now the first thing I need to do here on the comments is to work on my background color here so I'm gonna click on section settings click on background and I'm gonna go to recent colors here let me see what works I think I'll go with this gray so that just distinguishes like pretty much my main text area here and I'm in my main comment area I mean my main post area and my comments so this is the line that's pretty much gonna separate into alright so I'm pretty much happy with this to be honest so I'm gonna go ahead and save now I can go in now into my settings and start changing my fonts so over here are kids here with this heading change the color so I'm gonna experiment here with my colors and see what works better so I think that works fine and then over here want to change this to pop ins okay that looks this looks fine now let's head over here let's work on this image first and again I want this to be rounded and then over here change our fonts from default to poppins and the color is Wow needs to be changed here over here so let's see right so I'm gonna use a very light grey like that and over here the same thing change this from default to poppins and I think that's okay now on submit a comment gain is change this to Poppins now let's go to the forum so over here on the forum you can actually customize pretty much everything here and look by adding a white background I've just pretty much changed this form I can also change the comments you know the colors to that so let's change the fonts field let's change it to Poppins so that looks even more customized so that that's looking great next what I can also do here is to change the buttons so I'm gonna scroll all the way down here let's see where we have our options to work on our button so here it is I'm gonna click on button activate use custom styles for buttons so by activating that it means we can now go in and start designing this button so the very first thing I'm gonna do here is to change my button text color to white add my background color over here so I'm gonna really go with this dark color and then my border width changes to zero and I also need to change my font so my fault can be found over here so this is the default font let's change this to Poppins great so that looks that's looking great already now I also want to make this slightly different too or maybe just add a color in there so I want to make this really highly customized so I'm gonna come back over here to my text color and I'm gonna test one of these colors on my palette now it doesn't look great so go back to white alright so pretty much that's looking great all right so we're gonna save this so now we've customized our comments area that's looking great now the other thing that we can also do here is to add our featured image so I'm just gonna save this for now adjusting case I lose all this hard work that we've put in here already so now I'm gonna click on this plus button and I'm gonna search for my image module click on image so now I'm gonna add in my featured image so to add my featured image just delete this and then click here on this dynamic content and then click on featured image so this will pull in any featured images that you add on to your post great so pretty much I think I'm happy with this I'm gonna save this so now we could have the author here we've got the publish date we've got the comments because the social media icons so pretty much we have everything that we need I'm gonna save this now there's also more items that you can add here so let me just show you if I click on if I search for my text module here and I come over here to dynamic so here you can see we have a we have quite a lot of things that we can add here we have a publish date already and we can also add our post category so we can actually add our post category here so that the category actually shows when people come to aren't go and cut when people come onto this page alright so here we have all our categories so what I may want to do here is to first of all save this dragged it over here to the top ok now I'm gonna go in and change these category colors okay so I'm gonna go with that alright so that looks great I'm gonna save that save one more time alright so all I have to do now is to close here click on Save Changes so now it's time to create a brand new post and see how our template template is gonna work so I'm gonna come over here to posts open this in a new tab so that it's easier for me to work okay so on my new post here I'm gonna say in fact you know what I'm gonna use some lorem text so I'm gonna click here and to add your text I mean your content you need to do it in the normal Gutenberg editor by the way so let me just add my text here so this is gonna be my text and I'm gonna choose my title here so I'm gonna paste it in here great so after my title I have my text here now in here I can also add you know some images and that would show really well into our post so what I'm going to do next here to set my featured image so I'm gonna click here add from library so my featured image here is going to be a server look okay this one the right size okay let's go with this one here for our featured image set featured image now I'm gonna hit publish publish one more time now let's view the post so I'm going to view the post in a new tab so now when you take a look at this you can see now it shows us our category here it shows us our title for my social media icons here and this really looks cool now as you can see this is my featured image and this is my text and look at that this is my comments area so this is how my design now has pretty much transformed how my post would look so you may be thinking well so what happens now if I start adding you know headings into this actual article does it take the headings that we set up in the template and yes it does let me prove that to you so if I go in and click on edit post and let's say this is my heading one so I'm just gonna name this add my my heading block and let's say over here I add a blockquote here we go I'm just gonna paste it in here and let's say over here we want to add a link let's go ahead and add it here this is gonna be a blank link there we go so I've just added my heading quote and also my link over here so if I click update and now I click on View Post let's scroll down here notice what happens there's my quote there's my link and there's my heading so this looks really really cool so this is how you actually create this now there's one more thing I need to talk about here and as you can see the footer is that with the food of that we have here is pretty ugly to be honest and on the top here we don't really have a really nice header so what I've done here is I've actually created a header and footer template this is called Genesis template this can be used on pretty much any type of website so what I'm going to do is I want to install this so you can see how it works now if you want to purchase this it's only seven dollars so let me show you how it works so now I'm gonna go back over here to my theme builder so to add my templates my for the template all I need to do is to click on portability click on import and then over here now this is where you want to click and choose your file now my file is already on my desktop I'm gonna click on open import DV team layouts now this is importing my header and footer and by the way I also forgot to mention that it also has a 404 page so the 404 page also shows up when someone goes to a page that doesn't exist on your website alright so now that everything is imported I'm gonna click on Save Changes so one thing that you may want to do as well here is to make sure you add your global header and footer to your post template so I'm just gonna drag it over here drag the footer over here Save Changes now when I go to my post if i refresh this there we go now you have a header and if I scroll all the way down here we have this beautiful footer now this footer is very easy to customize so let's say you want to go in and change the color of this footer all you have to do is to click here on edit and now it's gonna take you to the Builder I can click here click on background and now I can adjust my colors make it slightly darker just by dragging this and pretty much once you're happy with that you can just go ahead and save save one more time and you can also do the same with the header as well you can go in and make some changes to the header as well so now that I have saved this the best way to view this is when you've logged out so I'm so close this here save all changes and then over here I'm just gonna click on log out there we go so now you can see I have my header I'm in my logo here here are my links I also have a search bar on the top here so if you want to search for any articles you can search them here and if I scroll down here you can see this contracts and as I'm scrolling through here these are my social media icons this is my page all the way down here we can now have this new footer that I've just added it also has the copyright all rights reserved this will update every year and you can also add all your links over here to the bottom so pretty much this is how you create your own template in WordPress thank you very much for watching if you like this video please give me a thumbs up and don't forget to hit the subscribe button by doing so you'll be not fight every time I release new tutorials thanks for watching see you another one

Channel: MAK

Views: 11,728

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

Id: cdMW9xhFdLw

Length: 22min 12sec (1332 seconds)

Published: Fri Jan 17 2020