7.1 Create a Blog Post Template with the Divi Theme Builder

[Music] we are going to use the divi theme builder to create a beautiful template for our blog posts and this is one example of how it can look we have the category the blog post title publish date dynamically we have the featured image with a nice overlay and a nice divider shape in the bottom then we have the blog post content to the left with text and images and stuff and to the right we have our global sidebar and if we browse down we'll see related content that is populated dynamically so let's jump into our development site and we can just have a look how a blog post looks by default in db so it looks okay but not too nice so i think we can do far better than this so we will add a global template in our theme builder by going to the wordpress dashboard we go to divi and the theme builder and earlier we created a template for a global header and footer so we'll add a new template for blog posts so we will assign it to all posts and now we will add a custom body since the header and footer is already inherited from the earlier global footer and header so we click add custom body and we will build it from scratch or maybe not really from scratch though because we are going to recycle some content if you see in the earlier chapters of this course you know that i like to recycle things and save some time so i'll choose clone existing page and we will use our news page because we already have the sidebar and the header and some stuff there that we can work on so i'll start by just deleting this blog post module or sorry the blog and we'll start by adapting the header and now we are going to work with dynamic content since all posts are different we won't have a static image up here or a static title we will fetch that dynamically from every individual post so let's start here by the background image i'll go to the section settings and background and i'll go to the background image and simply delete it and now i will add a dynamic content by clicking the small icon to the top right corner and now i say that this area should display the featured image as a background image and now it's just a dumb image but this way it will dynamically show this post's picture image as the background image up there so really simple okay and we want to have the blog title we want to have the blog post category up here so let's create a new text module that will be filled with dynamic content so first off let's add our blog category blog post category so i'll click the dynamic content icon and let's display the post category and we can have text before and after the category but that's not needed here and if you have several categories you can have a divider between them and we want to show the taxonomy type or category type categories you can also display tags here if you want to and if you have other custom taxonomies but we'll go for the categories and i will actually use use the this font which is the h4 the heading 4 so we'll add a little bit of html here we have bracket and h4 and then you see that it's already styled like i like our heading 4 and then i will end it by having this closing tag h4 nice and now we want the dynamic heading so i'll just add add another text module below this and i click the dynamic content icon and we'll have the post slash archive title this will be the title for the post that's displayed here okay let's add some html here as well this should be an age one a heading one and we want to close the heading 1 like that and now we want this one to be white so i go to the design tab heading text and for the heading 1 i want it to be white now let's switch order so this one is above this one and now we can delete this old template here looks pretty good i think and actually if i look at the design here the category should be on top the post name and then the publish dates so let's rearrange it again so we put this one on top like that and we'll fix this um spacing just by a little bit of dragging like that and now we will add the dynamic publish date here when the post was published so i click plus and we add another text module and we click the dynamic content icon and we choose publish date there we have it post publish date nice and we really don't need any html in this one we can change the date format if we would like to to something else here but let's keep the default one i go to the design tab text because this is regular text and i want it to be white and i want to have a smaller size maybe 50 maybe even smaller maybe 14 that's good let's add some letter spacing and maybe we'll have it in bold so you can just play around with these settings if you like to okay so we're actually going to add some text before our publish date so before it you said say published column and space so there we have it looks pretty neat so let's close this one and let's reduce some space here by just dragging this one up nice okay so we have our heading or our header so let's include this post content because the sidebar is already here so we can keep that as is so to add the post content we will add a new module called post content and now we have kind of a template that we can build here we can say how should the different heading levels look the text the images etc etc and this will style all the blog posts made in gutenberg or the classic builder so we'll go to the design tab and we can use this it's very effective so the heading 1 we already have up here so we don't need to use any h1s in the post content so we'll start by post content 2. and the heading font that we will use is cormorant garamond so let's use that one and the sizing there we can reuse what we had in the text module before so 42 pixels for desktop will look nice and i think it was 32 for tablet maybe yes and for mobile 26 and let's change the line height to 1.1 okay we go on with the post content heading 3 and there we also have the cormorant carmond font but here we want to have it bold and let's see 24 pixels for desktop and for ipad or tablet we use 22 and 21 for mobile so that looks pretty nice too i think and let's see we have a smaller font so we should increase the line height a little bit so 1.3 is good if you have line breaks in your headings good and you could also add an h4 h5 h6 etc in the same manner then we are going to style our body content body copy so that's text and we use the font carla there we go and let's have 17 as the font size there and let's do the mobile styling for mobile we'll use 16 maybe oops was too slow 16 and tablet will just keep 17 as on desktop okay and we can keep on designing stuff like the image if you would like to have all images and blog posts to be for example rounded edges you could just type a value here and all images will be rounded or you can add border width or shadows to all your images in blog posts we can check out a few more options here i would like to have not baby blue links i want them to be golden so let's go back to the text settings we click the link settings here or the link style and we will inherit the font from the regular text but the color of link should be gold so here we can see the preview and this will also of course affect the settings in desktop and tablet and this is a nice classic format in wordpress it's the block quote and you can style it here in the db builder so we can change the text color nope sorry i would like to change the block called font here or the font weight i can change the text color if i like to but i could also change this blue one that was what i was looking for ah there it is they had hidden it down there so i can do it like that and maybe we can style it to be italic and maybe a little bit bigger like that and we have a nice blocky quote also you can fix the bullet lists and the numbered lists so here we have the bullets so i can actually change this to maybe golden or so but we keep it as is but i want to have square instead of disks like that so we can be consistent yeah and you can do all the styling that you can do in a regular text module here so there's one more thing to add in our blog post template and that's related posts and this is really easy to achieve with the divi theme builder so we head back to the theme builder and let's add a new row below the other one and it's a one column row and we'll add the blog module that we used on the home page earlier in this tutorial and i want to display the latest three posts and we have the grid design already if you don't go to design layout and choose grid and i only want to display the latest three posts here okay so this is an important setting because this is a smart dynamic feature so it will never recommend the same post that you are reading right now when you build it like this in the divi theme builder but you can choose to display recommendations from all your categories and this is default if you don't click anything here so that's what happening right now but you can also choose current category and that means that you will only display related posts from the category that you are now reading so if i'm reading a post in the category inspiration i will only see recommendations from the category inspiration here and vice verse so it's up to you how you want to organize it i don't even have three more than three posts in in every category so i'm just going to leave it as is and we can just have a little bit of a shorter excerpt there i think maybe like 120 looks better and since we styled this grid before it looks nice with the shadow when we have a hover effect also that will be visible in front and we can just make one final change to this row and that's to make the spacing a little bit more narrow so i go to the design settings sizing use custom guide width and we reduce that from three to two so now it looks good and consistent okay so this is our blog post template let's see how it looks in real life so i save this exit and since this was the first time i edited this particular template i have to click save changes again here it's a easy thing to forget so now i click visit site and let's go to news and let's click one post here okay so we can see that the correct feature image is displayed here you could see it also here in the list that this is the nice couch with the pillows and if i click here that's what's shown in the top area we have the category case we have the correct title and the publish date if we browse down i can see the content from this post in this nice design with the sidebar and i can also see related posts and i see it from all categories since that was what i used so this is how you create a nice blog post template with the divi theme builder

Channel: DiviMundo

Views: 343

Keywords:

Id: TIVAbRX6bls

Length: 15min 59sec (959 seconds)

Published: Fri Jun 25 2021