How to Create a Separate Page for Blog Posts | Divi Builder Tutorial | The WordPress Buddy

this is ashwani and you are watching my channel the wordpress buddy in today's video i am going to show you how you can set a custom template for wordpress blog page so i have installed db theme and this is the default wordpress blog page template so this looks pretty confusing like you can't identify where a post is starting or ending so we gonna turn it into a custom template for the blog page with a a more organized uh blog module more organized sidebar and there will be a slot automatic uh post slider at the top which would be sticky as well so it will stick to the top when you hover over it so your new wordpress blog page template will look like this so as you can see it has a sticky post slider with automatic post change or you can also slide to the next post using these arrows you can see the sidebar with the highly designed post so let's get started how we build this post template blog post template sorry blog page template okay look after logging into the wordpass go over hover over the db and then click on the theme builder you will get something like this you have to click on add new template then under pause click check this blog option and then click on create template so it will add this new section here you have to click on the add custom body then click on build custom body so here you will get three options the first one is will give us a empty template to start or design our post blog page design from scratch these two are true this one is to use readymade template from dbs and this one is to clone our existing page made with db but for today's tutorial we going to learn how we create one from scratch so we click on start building so it will gain and give us an empty template here first of all we add the support slider like this one so we click on the so we turn it off and we add a new section we had click on full width it will give so we have to add full width oh slider so by default it will load all the settings with all the default options we have to you can enter the number of post you want to scroll through in this slider for example let's enter five and you have to click all categories if you want to s show post from one specific category then you can check that as well and then uncheck the all categories option so here you can order the order the posts from new to old you can change the read more button text content display so hey it is asking what to show along with the title we are selected show except so but we don't want to show that scrub to we just want to show the title like this so we have to enter zero here and you can see the post except is gone now we have to hide the read more button and meta as well so expand the elements then uncheck toggle this off read more button toggle show post meta turn off show controls as well these controls will disable the little doors at the bottom these doors you can keep either doors or arrows or you can keep both for now we will just use the arrows so we will turn this off okay so for now our template looks like this we have to delete this empty section at the top okay now we have to reduce the pairing because it is taking too much space so open the settings again and go to design and then scroll over to spacing and enter 0 you can see it has removed entire padding from top and bottom but we want to keep some padding so we will add 20 and 20 at the bottom and we have to reduce the font size of the title so just go to the title settings so you can open the settings by hovering over the title and then clicking on this brush icon so by default if the title is set to h2 tag you can change the tag as well and then set the font size okay so now we have set the size but the test is not easily readable because of the background image so we have to darken the overlay as you can see you can turn off the overlay and if you want to use the overlay so that we can read the title then turn it on but increase decreases opacity so it's more easily readable we select this darker black and then we give it a little opacity so that background image is also visible and we can also read the title very easily you can also give instead of giving the overlay to your entire slide you can give overlay just to the text using this option as you can see it has added the overlay to the text and in the same way as the background overlay you can set the color increase decrease the opacity of this text overlay as well but for now we will use a the background overlay and so if you want to slide these posts automatically then you have to scroll down in the end and expand this animation section or widget then turn this automatic animation toggle on you can control the speed of automatic animation sliding of post by entering a lower value for example let's enter 1000 now you will see posts are sliding very quickly so we'll keep it at milliseconds and this option is to turn off the slide automatic animation when we hover over it so by default it's off but if you want to keep the slide sliding the post even over over then you can turn it on but it's better to keep it off so our slider post slider is ready now if you want to stick it to the top when the user scroll the page so that you want to keep showing the slider all the time then you have to click on the advanced tab then go under the scroll effects and then select stick to top let the other settings be as is and then click save changes so now we don't have any elements so we can't really see the scrolling effect but if you see the ready-made page then you you can feel the stick of this slider so now let's move on to adding the others now click on this plus i can create a new section click on regular then we have to select this option so the left big column is for the post and the right small one is to show the sidebar on the left one we have to add a blog blog module here you can control how many posts are visible at one time left center 12 and i want to show post from all category so i will select this one if you want to show from specific categories then you can select all those categories and uncheck this and if you want as you can see the posts are showing in a list form but we want to show in a grid form so we'll go to design tab and then click under layout and change it from folders to grid you can see it has switched the layout from stacked list to grid form so now let's design it a better we want to turn off the meta this information field so you can control all these elements feature the image read more button you are you can also show read more button in the end of each post like this one and you can design it further using read more text and let's turn off the meta we don't want to show order no date no categories no read more button so just the title and few words of the except keep the pagination on so if you have long list of posts then and if you are showing 12 posts at a time then you will see pagination button in the bottom to load more posts but we have only two poster time so you won't see that okay so now we want to decrease the number of words in the excerpt so go into the content column again and set the length here except length extract is a summary of a post so we can control the number of words let's enter 30. you can see it has reduced the number of words or say characters post offset number post offset number means if you want to skip a post from the queries let's say you have 10 post and you want to skip the first one or two pause then you can enter the number here so let's see what happens if i enter one as you can see the first post has been removed and only one post is remaining so that's how this post of offset number works okay go back to zero now if you want to give it a shadow you can do that as well from the design tab i'm going to box shadow and you can change the box shadow from these ready-made options you can further control shadow settings like horizontal vertical position the blur and the spread strength you can also control the color as well okay so we have added our slider we have added the post grid now we want to add our sidebar to show these widgets categories and tags a very good thing about db builder is that we can add widgets or sidebar in to the builder so widgets and sidebars are defined in appearance and widgets as you can see this is the sidebar and we have added two widget share categories and tags and we also have other images footradio one two three four five six these all are blank these are to show the widgets in the footer or in the end of the page but we are not talking about them so click on plus and then click on search for sidebar mode we have sidebar and now widget it will ask which widget area to show by default it picks a sidebar so select the sidebar as you can see we have already got the sidebar here which we see here so as you can see after adding you will see this line this is sidebar separator to remove this you will have to go to the lay design tab then click on the layout options and then if you want to keep the side separator then you can remove this separator to the right or to the left by using the right option from alignment but if you want to remove this separately then you can just toggle it off and it will remove that okay if you want to design the titles of these widgets you just click on this brush icon by default it picks this body text which is for these we just body text but we have to design the title so we go under the title text so you can apply all these settings alignment setting phone setting you can change the phone family and you can do other font styles italic uppercase it will apply these all settings to all the widgets in this sidebar and if you want to change the body text designing as well you can do in the same way and now if you want to give a background go into the content and background and select a color from here you can see which is very narrow and the text is really at the border so we should give it some spacing go to spacing add a padding of 20 pixel from all sides okay and give it some border radius of 5 and lighten the background a bit yeah that looks nice okay if you want to increase the width of this whole row then you can click on row setting go to design tab then sizing and you can choose use custom quarter bits this controls these gaps between different columns so by default it's set to 3 if we decrease it to 2 then as you can see the gap has been reduced if we take it for down further to 1 then it will remove the gap completely but we want to keep the gap so we will keep it at 2 and we also increase the max width to 1200 pixels so now our sidebar also looks a little wider and looks clean now we save the changes and as you can see we have completed our blog page template so you can do anything here any ad any module which is available there is no limit so you can just play with it and now if we save it after completing this is very important after completing your changes completing the template you have to save it and after you see this check mark it means it has been saved you have to close it and then you must press this save changes icon this one save changes button savings if you don't do this step then you your template won't be activated on the front end so you must save your changes so now if we refresh this default block page see our new template is ready so this is how you can play with it this is how we set our template and you can play with it more there's just endless possibilities to make it more interactive you can also stick this sidebar so that only the posts scroll and you can do whatever you want okay in the end if you like my video and if you think i have given some knowledgeable information to help with your development then please motivate me by like pressing the like button and share it with your friends and please subscribe to my channel so that i could keep making more videos thank you let please let me know if you have any questions in the comment thank you

Channel: WordPress Buddy

Views: 258

Keywords: blog page, custom template, divi builder, divi theme builder, blog page custom template, divi theme tutorial, divi theme, wordpress tutorial, blog page design, blog page wordpress, custom blog page in wordpress, wordpress tutorials, divi builder tutorial, how to create a blog on wordpress, create a website, How to Create a Separate Page for Blog Posts, blog page design with elementor, wordpress blog tutorial, wordpress display post, wordpress blogs page

Id: NjsyrRc2a2o

Length: 22min 16sec (1336 seconds)

Published: Thu Aug 19 2021