How To Create An Awesome Blog Post Template WITHOUT…

Are you looking to create a custom blog template that’s perfect for your online website but DONT want Elementor Pro? In this video …

Ready to captivate your audience? Let me craft your next article or post!

✔️Here i show you a top rated social service: Click Here.

✔️And Here i show you more writers.

today we’re going to make a custom blog post template without Elemental Pro now I have covered this video before in the previous video we had made it using Elemental sections and columns function things have changed and Elemental now uses the container widg like I said before we are not using Elemental Pro here we simply using the free version of Elemental the other plugin you’re going to need for this is pro elements if you don’t have Pro elements installed there’s going to be a link above and a link in the description of where you can get that so without further Ado let’s get started [Music] okay so this is going to be the template that we’re going to be building so over here you can see there’s this background image now this background image is actually the featured image just stylized as the background so every time this post changes the background is going to change as well it’s a really cool little feature I’m going to show you how to do that so if I scroll down and I choose a different post you can see how the background actually changes to suit the post itself other thing we’re going to be adding is going to be adding The Heading we’re going to be adding the metadata the featured image over here the main text and then also we’re going to have a related article section and over here you can see there’s three different cards for different types of posts that people can click on okay something to note before we start building the template is please have a couple of example posts in your website already before building the template even if it’s just one post so you’re going to need the title you’re going to need the featured image you’re going to need some sort of content and a post exit would help as well so having a couple of example posts will help you when you’re building out the post template cuz Elemental will pull data from one of your existing posts while you’re building out the templat it can help you show how exactly the post is going to look like so having this example post is going to help you tremendously while building a template okay so here in the back end of our WordPress website in order to start creating our custom post what we’re going to do is we’re going to go into templates and we’re going to go into the theme Builder so here in the theme Builder you have a whole bunch of different options of different templates you can make So today we’re going to be concentrating on making our own custom post so to do that we’re going to hover over post and you have the option of creating a new post from this plus sign over here or you can click this and a whole new window opens up from here if you have any existing templates you can edit them from here but in our case we don’t have any so we’re going to create one so to do that from here we can click on this add new button on the top right okay so now that the elemental Builder has loaded up you can see that the library window has popped up now this library is actually cated for Elemental Pro so you’re going to need Elemental Pro to use any of these kits but that’s not a concern for us because we’re going to be creating our own custom post from scratch so what we’re going to do is we’re going to close this window so as you can see in my website I have this foter over here you obviously won’t have this in your website so you don’t have to worry that this looks different area we’re going to be concentrating on is this area over here this is where we’re going to build a custom post so the first thing we going to need is the main container that’s going to house the entire template so to do that we’re going to click on this plus sign I’m going to select this first container over here now that we have our first container here you’re going to see all the settings on the left hand side if you don’t see these settings over here then all you have to do is click on the six dot icon of this container and then the settings will definitely appear here on the left now the content withth I’m going to keep this same and generally most of the stuff I am going to be keeping the same here in these settings only thing I’m going to be changing in this window is if I go into additional options the Overflow I want hidden so nothing spills over from this container anywhere else into the page then I’m going to head over to style then under style I’m going to change the background top to a classic I’m going to make the color a black I’m not going to add a background image here under the background image because I want to stylize it and I can only stylize it if it’s an overlay so I’m going to keep the color black because when I Fade Out the image just a little bit when I BL it the back background underneath is going to help make the writing on top stand out better so now let’s go over to background overlay and then I’m going to choose a type as a classic and over here I’m going to add the image now I’m not going to click on this so what I’m looking for is this icon over here this ISS Dynamic Tags I’m going to click on that and you can see our whole new window pop up and what we’re looking for is the featured image so now you can see there’s a featured image in the background there and it’s quite dark but we’ll fix all of that now so the next thing we going to do is going to make the position center the attachment are one fixed repeat are one no repeat and display size I wanted to cover the opacity I’m going to put to 0.7 and then under CSS filters I’m going to click on this pencil icon and then this window pops up now the blur I’m going to crank this up all the way up to 10 and I’m going to leave everything else as is you do have the option of making this black and white to change the Hue or anything else I get but I’m only looking for that blow feature over here this is what we can’t do to the image under the background tab it’s all these CSS filters it’s only available to the background overlay so now that I have the blur I’m going to get out of this window and pretty much happy of how this container is looking so now you can actually see that the background is actually a little bit on the dark side and that’s because of the original background here is set to Black so if I had to set this to White you can see how it actually lightens it up okay so the next thing I’m going to add now is a spacer to move everything else away from the top of the page so I’m going to click on this n do icon I’m going to scroll down to basic I’m going to find the spacer widget I’m going to click and drag that across until it’s in the right place I’m going to let go this spacing over here I’m going to give it a spacing of 150 pixels I’m going to right click on this spacing I’m going to say duplicate the second one I’m not going to have it as wide I’m going to make it as a 50 pixels now that I have the two spaces it’s time to add the post title in between them so I’m going to click on this n dot icon I’m going to look for post title I’m going to click and drag that widget until it’s in the middle of the two spaces and I’m going to let go now that we have the post title over here I’m not going to change any settings over here in this window of content I am going to be going directly into Style just to stylize this the way that I want so here if I click on style I’m going to change the alignment to Center the text column happy with white because it offsets from the dark background the typography I’m going to make this smaller I’m going to give this a 25 pixels and then the last thing I’m going to do over here is under transform I’m going to say this is uppercase and the final thing I’m going to do to this title styling is under text Shadow I’m going to click on that I’m going to make the shadow as 0.4 and then under blow I’m going to put this as a three pixels so what that’s doing is this making sure that text stands out from the background and there we go our title all stylized so next thing we’re going to do is we’re going to add the post method and that’s going to be like the post info widget so to get that we’re going to click on this 9 do icon I’m going to look for the Post info widget I’m going to click and drag that until it’s underneath the title and I’m going to let go here in the settings of the post info widget you can see that there’s author date time and comments now personally for me I don’t want time and comments I just want the author and date so I’m going to remove these two if you want to add any for whatever reason all you have to do is click on add item and under top you can see there’s a whole bunch of different things that you can add to the strip but again for me I only want those first two so I’m going to get rid of this the last thing I need to do is I’m just going to head over to style I’m going to Center Line underneath the title now I don’t have to change the color or sizing or anything else like that I’m quite happy with how it’s looking over here if you need to change them it’s going to be here under style and here you can change the icon size and coloring in that and under the text you can also do the same thing there you can modify it how you like okay so now that we have that out the way we’re going to add next is a container so I’m going to click on the N do icon I’m going to look for the container I’m going to click and drag that until it’s underneath the bottom spacer and I’m going to let go so what I’m going to do with this container is I’m going to give it a background color in that I’m going to offset it off the page so it can really stand out so the person can read it quite easily so I’m going to go to style and on the background top I’m going to say it’s a classic I’m going to say this is white and then I’m going to go down to border cuz I want to give it a more rounded edge and a shadow so to do that under the Border radius I’m going to give this a 15 pixel so you can see it rounds off the edges there a bit and then under box Shadow I’m going to add one of these I’m going to say the blue keeps it’s 10 and I’m actually quite happy with how it’s looking at a 0.5 Shadow so the final thing I’m going to do to this container is I’m going to give a little bit of padding just to keep the text away from the edges so so I’m going to go under Advanced and under padding I’m going to give it a 40 pixel so now you can see that there’s a space over here that text won’t pass then I’m very happy with how this container is looking now what I’m going to do is I’m going to hover over this icon here for the container I’m going to right click on it and I’m going to say duplicate so the first container is going to house the actual text content and the second container here is going to be the one for the related posts so in order to keep the design consistent that’s why I duplicated this now because I’m going to be needing the exact type of container later so now we’re going to add the main content of this template so we’re going to click on the N do icon I’m going to look for the featured image first I’m going to click and drag that until it’s in this first container and I’m going let go now you can see here’s the featured image you do have the options under style to stylize it anywhere you like but for me in this example I’m quite happy with how it’s looking so then the final thing I’m going to add to this container is the text content so I’m going to click on the N do icon I’m going to look for post content I’m going to click and drag this until it’s underneath the featured image and I’m going to let go so if I scroll down you can see here’s the content of the article okay so that’s everything we need for this first container so now we can start scrolling down and stylize rest of the page so the next thing I’m going to be adding is actually a spacer over here between these two containers cuz they’re very close together so I’m going to click on a n do icon I’m going to go to basic I’m going to find a spacer I’m going to click and drag that until it’s in between these two different containers I’m going to let go now that we have the spacer now we can concentrate on the second container so first thing I’m going to add to this container is a title that says related articles so I’m going to click on this n do icon on the top I’m going to look for a heading I’m going to click and drag this widget until it’s in the second container and I’m going to let go here in the settings of the title I’m going to change the title text two related articles there we go so now we’re going to go over to style I’m going to keep this on the left I am going to change the typography so what I’m going to do is I’m going to click on this pencil icon I’m going to say that I want this as a 30 I’m going to keep the weight the same the transform I’m going to say uppercase and that’s everything I’m going to do to this title okay so now underneath this title what we’re going to add is going to be the posts widget and that’s going to show all the different related posts to this article so to do that we’re going to click on this n. icon and in the Search widget field I’m going to top out posts and here you can see the post widget you do have the option of using the loop widget we’re not going to cover that in this tutorial because the Lop Rd is a little bit more advanced so we’re going to keep everything simple and the post widget is a very good widget anyway so I’m going to click and drag this post widget until it’s underneath this title and I’m going to let go so here’s the post widget in action so here you can see the post widget over here you can see it gives a whole bunch of different posts that are on your website but I don’t want so many posts I just want three and I don’t want the style I’m going to change the style to a card so to do that Under the Skin in settings I’m going to change this from classic to a card and now you can see this is a better Style to fit this design so again if you don’t see the settings over here on the left all you have to do is hover over this widget and you can click on the pencil icon and then the settings will definitely be here on the left hand side the next thing I’m going to change over here is this post per page I’m going to say three because I only want three so now you can see the others are gone and then I’m going to look down for postm and I’m going to remove this from here this is that bottom section here I don’t want any post meta for these you can add any that you’d want but for me in this design I’m just going to remove all of them I’m also going to be removing the badge and I’m going to remove the Avatar as well now the Avatar is this circle over here of the author under query here you can actually add all the different categories that you want to display in this post template so you have the option of excluding different categories if you want another thing you can do is actually put related articles of that same author so here under include by instead of term you’d say author then you can put in the author that you want only their post to be displayed in this template but in this design that I’m showing you in this example I’m just going to remove all of this then we’re going to move on to stylizing this widget so to do that I’m going to click on style and I’m happy with all the row gaps that’s over here I am going to make the sentor aligned here within the cards and then the next thing I’m going to concentrate on is the actual content because I’m happy with the widget and the card itself so content is where I’m going to be heading up to next the title for this is too big I just want it a lot smaller cuz it’s a small card so I’m going to put this as a 20 and then under transform I’m going to put this as uppercase so now than happy with the title something that I’m seeing over here is that there’s too much exert being displayed I want this a lot smaller so to do that I’m going to head over back into content and here under content I’m going to go down to the exit I’m going to change this EX length into 20 and I’m going to say to apply this to custom exerts as well what a custom exert is is on the right hand side when you’re creating a blog post you’ll see a little window that says custom exit and that is what this is referring to so now that I’m happy with how these cards are the last thing you’re going to do is add a spacer underneath this container so to do that I’m going to click on this n do icon I’m going to scroll down to basic I’m going to click and drag this spacer underneath this container and I’m going to let go so for the settings of the spacer what I’m going to do is I’m going to put this to 100 and I’m pretty much happy with how this is looking now if I scroll scoll up you can see everything that we’ve built for this template so now let’s just go into mobile view and just finalize all the corrections that we need to do there so to do that I’m going to hover over this responsive mode icon I’m going to click that and now you can see this top menu appear so what we’re looking for is mobile so I’m going to click on mobile and here you can see how this is going to look in Mobile so now you can see that titles in that is just a little bit too big so I’m going to click on the main post title and under style I’m going to go to topography I’m going to make this a little bit smaller I’m going to make this at about a 25 I’m going to make the space above just a little bit smaller so I think I’m going to put this as maybe a 120 then I’m going to click on this main container here I’m going to take away this padding and in advance I’m going to change the padding to a 15 so it uses more space in the screen these related articles obviously this is way too big so I’m going to go to topography I’m going to click on a pencil icon I’m going to say this is about a 25 as well then the last thing I’m going to do to this title is I’m going to make this more center line for mobile you don’t have to worry about these settings affecting the desktop version because this is strictly just for mobile and then the final thing I’m going to do is I’m going to click on this widget here I’m going bring all the settings on the left hand side what I’m looking for here is I want to make this title a lot smaller so to do that I’m going to go to content I’m going to look for the title and under topography I’m going to make this about a 20 then obviously I have to make this container more uniform to the top one so I’m going to click on this icon here bring up the settings go to Advanced and under padding I’m going to sa 15 here as well and there we go that’s pretty much how template’s going to look on both desktop and mobile okay so now it’s going to go back into desktop mode and the last thing that we have to do to make this go live is we’re going to click on this publish button button over here now when you click on publish this whole display conditions window pops up this is where we’re going to tell WordPress to only use this template for our post so to add a condition we click on this button here now you can see it says include in all singular now we don’t want all singular what we want is just a blog post you don’t want this to affect any main pages of your website I’m going to click on all singular I’m going to look for posts and here it’s going to be all posts you do have the option to make different templates for different posts so if you wanted to do that specifically you click on all and you can top out the post name and you can fill out all the posts that you want this template to affect but here in this example we want it for all our blog posts and then the last thing we have to click is this button over here that says save and close and there we go our blog article has been successfully published into our website so let’s go preview this in our live website and hopefully I get these two bugs that are actually kind of common in Elemental for some reason but I’m hoping that the display has so I can show you how to fix them so let’s go preview this template so to do that I’m going to hover over the preview I icon I’m going to click that I’m going to say preview and there we go here’s our template in action you can see mine is black and not displaying the featured image like we had stylized which is one of the bugs that I was hoping would happen to me so I can show you in this video and how to fix it but for now you can see how this post is actually working so if you can scroll down you can see all these other related posts so if I click on one of these what’s most likely going to happen because I have the first bug is going to be the second bug that triggers now the second bug is going to be the featured image and it’s going to be tiled in some weird way but again I’m going to show you how to fix that which is very easy so I’m going to click on this post over here and you can see that the post is is being displayed now again you can see that this background is exactly like I was going to say on the second bug that is actually displaying the background featured image like this and not the way we stylized it so now let’s go fix that completely so on the top you can see here’s your website if you hover over that you can click on dashboard so let’s just go do that now or you can go to dashboard through a different window it doesn’t really matter so in order to fix that b we go over to elemental we’re going to go over to the tools we’re going to click on that and the Very two options over here we’re going to regenerate the files and data and we’re going to resync the library so if you go look at our posts now you’ll see that they’ll be displaying correctly and there we go you can see that the post is completely fixed and all the stylizing that we had done is now being displayed correctly so if I go to a different post you can see that now the featured image of that post is in the background and it’s blurred out and everything’s correct so if you’re ever having a problem if you edit your template just remember go into the tools and just regenerate the files okay now that is how to build a custom blog post without Elemental Pro we did have to use the free version of Elemental but it was free I hope you like this video if you have any suggestions or anything then please leave a comment down below please remember to like And subscribe because that stuff helps my channel a lot and I’ll see you in the next one [Music] cheers

Need compelling content? Get in touch for expertly written articles and posts:
✔️Here i show you a top rated social service: Click Here.

✔️More writers.