Create A Blog Archive And Single Post Template Using…

Create templates for your archive page and your single post pages using the Elementor Pro theme builder. You create the …

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.

hello people my name is FY and in this tutorial I will show you how you can create a blog post archive page and a blog post single page template using Elementor Pro let me show you what we will cover in this tutorial this is the blog archive page we will create and in order to display the latest blog post will make use of the loop Builder this is the loop Builder and here I can create anything I want if I hover over here and it goes to the right it will also happen over here if I go to this image and at the St I say that the Border radius should be 20 it will be 20 everywhere we will do the same with a single block post template it’s a matter of dragging and dropping so you can create exactly what you have in mind using Elemental Pro so I have a bread Crump a featured image title really simple if I want to change that bring this over here and here in the sidebar we will make use of display conditions what does it mean I can decide that this Banner will be displayed when the category of a blog post is Che body and this Banner will be displayed when it falls on the category Elementor this one with hostinger so if I go to this blog post about two body only two will be displayed and if I go to a blog post about affiliate marketing which includes hosting and Elementor these two will be displayed and two body will not be displayed and of course we’ll make sure that everything we create in Elementor Pro will be optimized for all devices this tutorial is part of a complete Elementor Pro tutorial that you can watch for free by going to 30.com for/ Elementor Pro hit enter and there you see the tutorial and all the other tutorials that are attached to that tutorial so you can learn anything you need to learn in order to create amazing websites using Elementor Pro if you don’t have Elementor Pro yet let me show you how you can get it you can go to 30. come/ Elementor hit enter and you will be redirected to the Elementor Pro login page there are four plans if you take look at the essential plan that’s for one website but it does not have all the witches there are and it is also missing a few important features we need in this tutorial so I would go for the advance plan it’s €99 or dollars per year you can install it on three websites you have premium support and 82 widgets and you also have the popup Builder custom code and CSS e-commerce features and collaborative notes now let’s continue with this tutorial in order to create the blog page and the blog post template I need to have blog post if you have them that’s great if you don’t have them you can follow along in this tutorial if you go to the images tutorial folder and then block there are five dummy block post you can import let me show you how I click over here I go to plugins just kidding to tools import and then WordPress I click on install now run the Importer choose a file desktop images tutorial block and then this one five Dy blog posts I open it and I click on upload and import I assign all the blog post to 30 and I click on submit now I go to Media at new media file select fils and I go for Block post one until 5 holding shift open there they go then I go to the posts and there they are I click on the first one to see if everything is working yes I go back and now I hold command or control on the PC and I click on block post 1 2 3 4 five this is how I like to work when I addit a lot of things at the same time on my MEC I say command tap then I go to fet image command tap fet image command tap tap feature image come on tap come on tap then click click click click click then I go to block post one 2 3 four five so for every block post I selected a different image and now I say click Comm on Tab click and now I click on update update update update and update so now I have five blog posts with five featured images that’s how I like to work I go to the website and I go to the blog page and it looks beautiful I wouldn’t change anything this is especially this that people need to figure out what’s saying over here wow I love it now of course not we’re going to make this look so much better now at least we have something to work with for the sake of the tutorial I will import one more blog post there it is if I click on it it looks like this so there’s room for improvement and that’s exactly what we’re going to do I have three comments I will accept those so now if I go to my blog post latest one paste down I see them over here so how can we configure this first I will configure the blog page I mean the block archive page the overview with all the other blog post and then the single blog post template so in order to do that I go to the back end to templates theme builder then I go for an archive page it says no template found want to create one yes I click on add new I start from scratch I click on the plus now I click on publish I add a condition and for now I just want to include it at all archives or the post archive save and close so now if I click on the I I go to the blog page I see nothing because I need to add some information over here before I do that I go to the homepage addit with Elementor because we can copy and paste things within Elementor so I click over here right Mouse click copy I can paste it here but maybe you don’t have that era in the website I show you how you can create it in my complete Elementor Pro tutorial if you don’t have that let me show you how to create this from scratch I want to have things next to each other or even better want to have two containers I create a new area over here create a minimum height of 300 pixels and that way for now I get rid of this area that’s interfering with my content so now what do I want to display I go to the structure I call this one the title I go to the sty gradient color first color is light purple second one also so but then even lighter or you know what let’s make the first color even lighter and I want to make it a radial at the bottom right and I increase location a bit and I decrease it drastically to around 50 like that here at the left I want to have a title or it says log I go to the St make it white go to Advanced change it to inline then I go to the background and I make it darker how about custom in pixels and then I can play around with the pading five and check this maybe a bit more over here and I would like to have a border of 20 or 10 now if I go to the blog post the blog page you see this over here then I want to tell something about my blog page so I can click on the plus I can go for a text area here below go to the sty change the text color to white I leave it with that and what I want is a breadcrumb so people can see where they are in the website in order to do that I need to install a plugin so I go to the backend plugins at new and I go for y SEO I’ll make a complete y SEO tutorial again but right now I just want to install one thing so I’m not going to configure everything install y’s SEO by far the most popular SEO tool within WordPress I activate it and then I refresh the page and there’s y’s SEO closes closes I go to the settings I scroll down to Advanced and then I see bread Crump I change this to an arrow to the right shift dot that’s it for now then I refresh this page and now look at this if I search for bre Grump it’s from yast I drag it here on top style typography I like to make it a bit bigger make it uppercase and a bit Bolder and the colors white link also white and we when people hover over it then it can be orange so in the case of our blog post or blog page it says home block exactly what I want there can be less space here so what I can do I can go to The Container over there I say 10 or yeah 10 is okay with me then here at the right there’s a container I prefer to have an image instead of a container so I go for an image I drag it in between and then I get rid of the second container I go for this image PNG well let’s make it a lot smaller what I do want to do this image Advanced I want to align it at the end and now I want to uncheck this this is what I want want so now it’s aligning like that at the top I say 60 at the bottom I prefer to say zero because I want to align this over here what I can do click over here Advanced uncheck and at the bottom increased over here so this image sticks here below um let me make the image bigger can also click over here go to Advanced make it grow so it pushes the image to the right unless I say over here I increase height and it stays within the boundaries within the width of our website so if I refresh this okay well let’s bring this back a bit uh let’s not expound it anymore but what I can do increase the percentage also here I can also say yeah make it bigger and that’s how I like to play around refresh and then if I want to I can also click over here go to with custom and then I say 400 publish refresh so I like it nice overview but I do not like uh I like the header but I prefer to have a transparent header just like here so in that case I go to the elemental page builder to the theme Builder and then over here I go to the header this one is right now available or visible on my blog page I want to turn it off so I click on edit conditions entire site exclude the front page and exclude the singular page which is a page called blog save and close that’s better okay I like this area so um now want to display my blog post over here how can I do that I go back [Music] to the elemental archive let’s me let’s rename this by clicking here call this one the block archive publish so the next area click on the plus and what I can do I can do a few things I can click on the plus again go for this structure and then click on the plus and I search for the post or I see already over here archive post and now I can configure this but I prefer to do something else I can also work with a loop Builder and that gives me more freedom to create what I have in mind so I search for the loop Builder or The Loop grid okay I have to create a template for this so I click over here I save the changes so there’s an area over here that’s the loop grid and if I create something over here it will be repeated through the loop grid let me illustrate it to you if I search for an image I drag it over here and now with Dynamic Tex if I select the featured image it will fetch that from my blog post so now if I save it and go back I see all the images from all the blog posts I can edit the template again go over here Advanced uncheck this and I go to sty border 20 pixels or even better uh let’s go to the image itself 20 pixels and now they all have 20 pixels in Border radius so now I can go for a heading or a post title can drag it here below it looks weird let me make it H2 I go to the St I go to typography I say capitalize and make it less big increase the line height and then I go to semi bolt let’s make it bolt save and back now I see all the titles so that’s how you can work with the loop Builder what else do I want to show an excerpt like that and then a rem more button over here I say read more and then I want to have a dynamic link and that is the post URL when people hover over it I go to Advanced transform hover offset x 10 like that I can also go to the image over here content link it to a custom URL which is also the post URL when I go to the image and I go to the St I can go to the hover area I can add a CSS filter so I can make it a bit brighter bit more contrast bit more saturation give it a 0.5 seconds to adjust so when you hover over it you see a small adjustment then I go to the container layout and I think 30 pixels is a lot distance in between things let’s say 20 publish let’s take a look at the blog page now it looks like that and what I see is that the read more button is lower than here because of there’s less text so if you want to adjust everything that’s what I want to do I go to the third element excerpt I go to Advanced and I say grow that will push everything down but they’re still not aligned that’s why I go to The Container height layout minimum height and I go for 450 or I increase it a bit more more 480 or 70 publish so now they’re all aligned the same I want to do with the images because right now it looks weird so what I can do I can click over here I can go to the width well that’s 100% then I can go to the height I prefer to maintain the aspect ratio of 16 by9 so I say 200 object fit cover and now they’re all 16 by9 even though those images have a different different aspect ratio okay it’s still not working so what I need to do change it from percentage to pixels 360 now everything has a nice aspect ratio and the read more button is also at the same play what else can we do we can have pagination so if I would say let me go save and back now I can go to the loop Builder edit it by default I have three columns I can say four let’s say three and I can also say I want to have a maximum of three items per page that brings us to the pagination area I can say I want to have numbers so I can go to number two I can have numbers or numbers and previous and next I like that I go to the St there’s not a lot you can do that’s what I don’t like I would like like to have a circle around it I can do that then I need to use CSS let’s keep it with default the Boulder and then I want to have more space so spacing let’s say um 30 pixels awesome and then the way it’s loaded let’s go to content pation I prefer IO publish can be that I need to uh resave some settings so let’s see if I go to page two okay it’s working if it’s not working for you then go to the back end to tools uh sorry settings per links and save those twice Blog Page awesome a really important question to ask yourself is how does it look on a different device so let me show you how you can optimize your block archive page for all devices how does it look on a different device okay so far so good let’s bring this back to six layout six publish I can also edit the template turn off the height publish save it and go back now I can go over here and say equal Heights so that makes it even better publish I here looking at this view I think that’s fine and the smartphone let’s increase or decrease the space like that and then over here Advanced just for the mobile I go to transform offset bring it a bit more to the center publish okay for the template let’s see it still looks okay for the smartphone I go for the image [Music] sty that’s still great command Z but the height should be different until that point where it starts to go a different direction so [Music] publish so it’s optimized for all the devices let’s see if I go to a block post it looks like this well I don’t like that so how can we make that look better let me show you I think the block archive looks great of course you can do your own thing give it your own spin I’m happy with it what I want to show you now is how you can create a single post template and that template will be used for all block posts you have on your website let me show you how to make that in order to create a single block post template I go to our blog post it look like this because it has no configuration whatsoever and in order to do that in order to create a configuration I go to Elementor and I go to the theme Builder I go for a single post area and I click on the plus at new I don’t need to have a pre-made template I start from scratch and I click on the plus flexbox area down I want to make this 300 pixels and then I want to click on publish I want to add a condition I want to add this to a post all posts okay so if I would to refresh this you would see nothing anymore so it’s working awesome then I click on the plus again if I cannot do that I click on the plus over here create an area with two columns like this and I go to the structure and I bring this container top call this one temp uh it’s just for the space and this is two [Music] columns container left block post and and double click sidebar over here I changed the width from 33 to 6666 and at the other one I changed it to 33.33 or even better 33 [Music] and 67 go to the columns so that the overview I can give this a background maybe really light just for now publish and I go to the blog post area and I can click on the plus and I go for the bread Crump or close it go to the block page edit with Elementor or I want to edit the blog archive copy paste change the colors by default they can be text color link color also when people hover over it they see this publish so this is what we see so far interesting what else do I want to show I click on the plus I want to show an image of course the featured image so I click on this Dynamic Tech area and I go for the featured image go to the St 20 pixels then I want to have the title since we’re working on the single template automatically I see a lot of related elements so I go for the Post title there it is it is age one so it has the same style as on our homepage which is this with the background so I can click on it go to sty make the text color white but I don’t want to display it like this so I bring this back what I will do Post tile Advanced I give this a CSS class I call this one block title then publish I go to the S settings custom CSS I scroll down and then I say dot block title H1 opening closing I say background # FFF now there’s no more backgrounds or it is white I want this to be transparent so what I also can say is RGB opening 0 comma 0 comma 0 comma 0 and no space bom so no more background save the changes close this and I go back I want this to be H1 you can have only one H1 per page and this is the title so it’s the most important one so it needs to be in H1 but I don’t want to step like this so I go to the Post title sty typography and then I say transform to capitalize so only the first letter of every word looks like that and then I go to typography it a lot smaller and less big yeah okay one more thing uh there are still still some STS that that applied over here so what I will do I’ll overwrite them by going to custom CSS add something else padding zero pixels so that looks better save the changes close it okay so far so good look at this I can click on Plus or I go to single and then I go for the Post content wow a lot of big titles so let me publish it and let’s see how it looks very big titles I think the text can also be a bit bigger so in order to do that I go to the S settings typography and and then the body text let’s make it 18 and 32 or maybe 36 the double that’s a lot 32 okay by default every H2 look like this because that’s what we have on the homepage but I don’t need that for my blog post so again I can do something especially for this area I go to the content I go to Advanced and then CSS class I say normal titles copy this and I go to the side settings custom CSS do paste opening closing background always test if it’s working hashtag yes so what I want to do H2 okay I’m having the right areas and then I want to say text transform capitalize so it will only make a capital of every first letter what else do I want to do font size a bit smaller how about 30 pixels how about 26 and third one font weight semi bolt or or bolt and 22 smaller and then I say margin [Music] bottom minus 10 pixels I mean Marin minus 10 is a lot – 6 even zero how about 10 in the Plus or four in the plus yes okay save the changes it’s really important that that’s readable our blog post so this how it looks now there’s not a lot of space over here so what I can do I can go to the side settings again to custom CSS plug titles margin button also just say margin Zer pixels Zer pixels and zero pixels and the a above T gives it some more space save the changes I need to change the name over here single post publish refresh block there you go and my website is a bit bigger so the normal screen would look like this I think that’s great so there are a few things we can do we can go to the two columns the first one go to Advanced or style create a background like that and play around with it and the margin uh I prefer to keep it as this and also for the two columns get rid of the background I think that looks clean then I want have the right area and here I want to display add advertisements sidebar image it over here I can go to FS I decided to go with those two so let’s add hostinger okay and go to the sidebar uncheck then I can have a link over here um on the first image to HPS 30.com hostinger open in a new T publish then I go to Advanced and then go for a border solid white let’s see how it will look may think why should I have a white border if the background is white let me show you in a minute because I can also have a boxed Shadow maybe a bit horizontally to the right vertically down blur spread a bit [Music] more let’s say 12 and 12 I want to decrease I want to make it more transparent publish well no than you that’s way too much image three and three and more transparency okay then I go to the blog page because there I can see how it really will look okay I go to the sidebar top 60 bottom 60 I want to stick this with us so I click over here layout motion effects sticky top and I want to have an offset of 60 pixels because of the menu go to the block page single block if the menu comes okay it doesn’t have to be like that so I can say zero I think that’s great it’s really close to each other so what I can do I can go to the two columns layout and say how about 30 pixels so there’s a bit more space in between those areas sticks with us okay then I can duplicate it go for the second one Elementor change it to Elementor publish and that will automatically also stick with us they’re really big the images all the way down it still sticks with us so uh I go to the section motion effects and I want it to stay in the column so at the end it will stay there right now I want to talk about display conditions a powerful tool with an elemental Pro instead of trying to explain it to you right now I’m just going to show you how it works let’s say I want to have a link over here that’s related to tube body let’s duplicate it one more time I don’t see it anymore I cannot go there because it’s sticking with us so I need to go to the structure I can call this one tube Budd I can turn this off turn this off and now I see the third one I can change it upload files I go to the desktop images tutorial block and then two body okay there you go and here I say chbe budy publish so for now I also say just for the sake of the tutorial I go to responsive turn it off for the desktop also the second one [Music] Advanced responsive turn off so I see only see this what I can do now go to Che body and go to Advanced layout and then here it says display conditions this is really interesting so this is about two body so what I can say only display this image when and I click over here I can add a condition the category is instance tube body or the category is chbe body guides save and close publish now if I go to the blog page to this one disappears because I said it should be in the category two bu or the other one now if I edit the post and over here and categories I turn off those two so it’s not in those categories anymore it is gone this is so interesting because now at the single post template I can have all these let me bring them back all these ads and with display conditions I can link them to the right blog post so uh let’s take look at another blog post blog blog post five it’s now shown them both if I click on edit post and go to categories so let’s say subcategory 2 click over here when the category is sub Category 2 then it should appear go to the block page now it appears but if I go to another block this one it will not appear because this does not contain the category subcategory 2 so you can make a list over here but if you ads you want to display and then you can assign the right ads to the right pages I can also uh assign it to a specific post so how to body so if I see I need to get rid of this and this again if I click over here I could also say instead of using this and this I can say if the page title is how okay it’s not a page of course so I should say the post title is tube body save it publish block two body there it is so that’s how you can work with display conditions pretty cool if you ask me so how are I doing how is it looking so far sticks with us I can read the blog post there’s a bit of space over here text is readable how does it look here below there’s a few more things we can do for instance I can edit page with Elementor go to the single post template what I want to do a whole container want to give it a background here at St gradient from color let’s do this one to another color text I change or I leave the angle as this let’s let’s see it starts with red so what I will do I start with a really light color let me first go to secondary and I make that color a lot lighter okay then I go to the second color something like that so the more I scroll down the more purplish it becomes but I don’t have a purple text or a purple background but at this text so what I will do click over here I go to the let me see the post content then I go to Advanced or even better I go to the block post container scroll down all the way so I see the results here’s the purple background I go to St background type color white okay then I go to the border border radius 20 so this the whole block post container so everything that’s included and I think I should look at the yes I should go to advance and the pading because it’s now there’s no space in between so I should have a space of 30 pixels so here okay you see there’s no space here so I should fix that at top I should say 60 okay so far so good this sticks with us okay this aligned very well what I want to do I want to add a few more things over here so I click here and I want to go to a new element and search for comments post comments I can drag them here below within the left container like this and there’s one thing I don’t like about this we canot St this within Elementor here I have to do it with this there’s not a lot I can do but what I can do I will do and that’s this there’s no comment over here so I need to go to the blog page this one page down okay so over here right Mouse click inspect or I go to the comments Advanced I give this a class I say blog post comments copy this I think this is an H2 so I go to the side settings custom CSS dot block post comments H2 font size 10 pixels yes that’s working so I can say 20 and I can say text transform capitalize okay okay save the changes right Mouse click inspect again say enter over here font size 20 pixels yes okay how about let’s copy this refresh the page I scroll [Music] down I go to the side settings custom CSS paste this now it’s 20 that’s a lot about 12 [Music] 14 okay okay take a look over here save the changes I should have pixels over here yes right Mouse click inspect wait a minute wait a minute okay I should leave the color away save the changes if all the headers are black I just close Elementor click on the ey and click on edit with Elementor now everything is back to the color it should be right Mouse click okay you know what let’s go to the blog post paste down right Mouse click inspect element to get H3 copy custom CSS okay colors okay or let’s check it okay I don’t see it yet here so I can go to this one let’s see if it really is an H3 I go to the blog page this is how I roll sometimes it just takes a while to figure something out and that’s what I like when it works I’m happy when it doesn’t work this back to normal so let’s see what is happening here right Mouse click inspect title comments it’s even better okay is this one okay yes title comments I think it’s a class you know what I try always [Music] background yes okay now I have the right area now I can say which color it should be I think the color is okay font size 25 for pixels why is this not working font weight bolt okay it is working font size why is it why is that not working I don’t know let’s see inspect font size 60 so it seems that I have to do something over here so if I would say 24 there it works so I copy this go to the side settings custom CSS long block post okay get rid of this okay then I wonder if I even need this yes I need it or let me see if I can place it here yes so I don’t need this one perfect what else with this area people can leave a comment but what else do I want to display over there well great that you ask I go to command I click on temp then I click on the plus and I have some reason blog post so if I go to the plus and since I’m here at the single post template I see a few nice things over here featur image table of content the author so I can say something about myself well that’s not that’s not much what I can do I can click on the eye go to the back end or here to add a profile scroll down and say something about myself or if better over here something like that I can have uh some links over here so YouTube for instance Instagram Facebook update profile now if I would go let me it’s already published let me go to a blog post this is what I see well doesn’t look that appealing I can also drag it over here if I click on it I [Music] can show my profile picture the picture size display the name link it to a website if I want to I can show my biography I can show all posts play around with the image size but um that’s okay then here below click on the plus I want to show the post navigation and I want to place it here below okay how do I want to display that I think it can be bigger so let’s make this bolt 16 and the title even Bolder and probably a different color 20 or 18 and then also bolt semi bolt and then here below finally I want to show the post most recent post so I go for this one or I get rid of this I go to the block page edit with Elementor the blog archive right Mouse click copy right Mouse click paste there you go I click on it and now I say show only three no pagination and then it’s the same and the great thing is when I change something in the loop it also be changed on the Block archive page so I click on add a template because over here I want to link this I also want to link this post URL so now if I go to the block post block page this is a link but also if I go to this page or single post and I take a look over here then this is also a title well if it’s a title I prefer to go to the St there’s no hover over here then I go to transform hover offset how about five that’s enough that’s a little bit of change let me see publish block pitch this one scroll down now there are related post I only need a title so what I will do click on the plus go for a [Music] heading let me see command I okay I need to get out of this area now on top I can have a heading so I search for a heading yes and then I can say more block post 24 okay over here St background overlay gra this [Music] one no repeat position bottom right pacity fully visible CSS 60 and display custom make it a bit smaller publish so now if I take look at the final result of my blog post it looks like this that the blog page and then the block post this sticks with us based on which blog post people are reading there’s a nice gradient when I have my website in normal view see this can stick with us easily previous blog post I can go to the next one something about me more blog post okay I [Music] can go to this area get rid of it go to the block post again face down that’s really close so click over here the bottom I say 60 or maybe 120 publish refresh okay I think it’s still not good enough okay how about 180 publish blog page single post like that now there’s no space over here of course so let’s say 60 what else if I scroll up I see breath Crump feat image the title but I want to have more information over here so I can click on the plus and I want to drag post info over here it looks like this how can we make this look better well first of all what do I want to display the author the date I don’t want to show the time so I close that but I do want to show the amount of comments I can also add items and add things like these but I’m okay so let’s go to the author I can do a few things I can change the type I can have something before D 30 I can have Avatar so it shows my face no thank you I can have a link so if you click over here you see all my blog posts and I can have an icon let’s say custom I can change it so I can go for a user this one for instance then the second one date custom let’s go for an agenda or calendar like this one and then the comments is perfectly fine I would like to change the St over here so I go to the St space in between I can have a divider I’m okay the icon I want to make the icon orange and a bit bigger and then the text let’s make it the text color no indent typography let’s increase it like that and let’s see bit bowler maybe that’s okay publish block click over here from 30 on this date with these amount of comments if I click over here I go to the comment section so I’m happy with that what else and also for the single block post template I’m going to show you how you can optimize it for all devices really important how does it look on a different device do I want to have a sidebar when I’m on a tablet I go to the two columns and I say layout below each other this one will be [Music] 100% And this one will also be 100 let’s place things in the center like that 100% And then I go to the image style how about pixels a tablet and make it 350 here also sty pixels 350 and here sty [Music] 350 I click over here go for 45 and this is all fine previous post then I go to the smartphone it looks like this okay I think it’s uh great to read it like this it’s a doable so that is how we have created blog page one more thing I need to go to the homepage because I want to show newest tutorials or this not tutorials okay let’s say newest blog post so I can edit this with Elementor let’s say okay let’s copy this go to sty gradient light purple click over here maybe use a darker color over here click over here make this white and then I say recent tutorials get rid of this stuff and then I want to go over here copy paste okay and then I break this back to light something lighter this back to the dark one and it’s already optimized for um all devices newest tutorials [Music] recent posts and there they are publish so now also our homepage is up to date with the latest blog posts thank you for watching this tutorial this tutorial is part of a complete Elementor Pro tutorial that you can watch for free by going to 30.com for/ Elementor Pro hit enter and there you see the tutorial and all the other tutorials that are attached to that tutorial so you can learn anything you need to learn in order to create amazing websites using Elementor pro thank you for watching this tutorial if you like this video then please like the video and feel free to subscribe for more upcoming tutorials on how to make websites and generate money with them have a great day and good luck with your business and with your life

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.