Join our ‘How to Start a Web Design Business’ Course – and use strategies to grow, get clients, and generate recurring income: …
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.
we’ve already mentioned on the home page we’re missing a section for blogs like we’re going to show off three but we don’t even have any posts built so let’s go and get those built into WordPress first when it comes to building your posts you want to be doing it within WordPress but when it comes to presenting it that is done with Elementor in fact we’ll be using an elemental template known as a single post template but the raw ingredients for that post should be done over here and this is what you should do and you’ve got to get your head around this okay because we tend to say build everything in Elemental but the post you know the title the images the the content just do it here so let’s click add new and we’re going to create a post I’ve called it hiking Adventure now adding content is really simple you can either start typing over here or you can use the block over here where you can add a block and you might say I’m going to add in a paragraph where we already are or I might want to go in and add in an image instead you select an image and add it my tip when you are doing posts is that you try and add in as much variable content as you can don’t just have text add in images if you can add in audio go for it you can add a video go for it the more richer you make it the more Google do like that kind of thing the Simplicity I’m just going to drop in some Laura mipson text like that and then down here I’m just going to go and add in another image so I’m going to hit the plus sign click image I’m going to then just pick an image from our media library I’m honestly not overly fussed by what we pick here I’m just gonna go for this one okay just to kind of demonstrate how easy this is to use I’m going to shrink the image down like that I’m going to click the Align feature here or the setting and aligns to be in the center so you can add images and you can resize them ensure that you have assigned a category so I’m going to click add new category and I’m going to give this a name and once you’ve hit return it will automatically tick it you can untick it if you want and assigned elsewhere but I’m going to be at these as we go on can add tags as well so maybe you want to be very specific you might put the highlands or the Rocky Mountains or something like that the other key bit is a featured image this is going to be important for when you are showing off your blog posts you know like the little Advertiser for the archive before you actually read it so go and pick a relevant image and it’s not a bad idea to put in an excerpt as well now you don’t have to do this this isn’t completely relevant but if you are going to give across like an excerpt or a short description before they start reading the post this is a good thing to go for I’m just going to drop in some more Laura mipsum over there and believe it or not that’s mainly the bulk of what you need to do I’m going to hit the publish button there we have our post now what I’m going to do for Simplicity is I’m going to duplicate this by using the duplicate page plugin which I mentioned earlier as well just because I want to speed up the process we’re doing here go over to my posts and now I just duplicate and I duplicate again I’m now going to go into them and change their image the title sorry the featured image and the title I’m not going to show change the body because I just want to get across how this works I’m going to show you what I’m doing just so you understand it better I’m going to call this one Rocky escapes which sounds like a movie but it’s not I’m going to leave the content as it is over here I’m going to add in a new category and I’m going to call this one um mountain climbing hit return untick Adventure because that’s the new category and down here we have an image I’m going to click that and pick something else obviously you change your excerpt as well if you wanted to and then just go and hit publish so I’ve gone and created six posts and you can see that they all have different categories well there are one two three for adventure we have a lifestyle one we have scenery and we have mountain climbing as well and if you ever want to create them rather than creating them on the Fly you could also go over here to categories and go and add in your new ones as well you can see that how many posts I’ve got and I’ve got zero for uncategorize this will become quite important when we come to do some filtering for the posts as of right now these are all ugly looking but we don’t really care too much about that massively just yet what we’re going to do is create a page and we’re going to drop onto there a loop grid that is going to basically be the archive page for our posts and then we’re going to stick a copy of that onto our home page but it will be slightly condensed let’s go and tackle the blog page first I’m going to go over to templates make sure you have click tool to make sure you haven’t already got one in existence I’m going to click add new and I’m going to create a template called archive Okay click that and then I’m going to call it blog archive now the word archive is quite important because I’m going to create a blog archive and then I’m going to create a blog page which is an exact duplicate because that’s the page I’ll actually be using and then we’ll use a copy of that on the home page let me just go and create the template again Elemental is really good at giving you some examples that you could use but I’m just going to build one the way we want to build it we have our header and we have our footer already activated I’m going to take the container from our privacy policy page and I’m going to dump that in over here again you’re just reusing elements that you’ve already built before because it’s got our header and we’ve done are responsive styling for that now we’re going to build our post archive now the most common way to build it is to drag in the archive post and arguably that’s looks okay you mean it’s quite standard but it looks absolutely fine or you might decide to use the posts feature instead or widget so if you go and type in posts it’s this one over here if we now drag that in again it looks practically the same as the archive post the only benefit of the post widget though is that you now have the option to use Query and this is where you can include or exclude certain categories or certain terms with the archive one you don’t get the query Tab and you really do need the query tab if you want to have full-on control over how your posts look the only drawback to using the loop grid uh sorry the posts feature widget or even the archive posts one is that you are very limited as to what you can do here you can you know change the image sizing and move some of these around like in terms of their distance from one another you know how close they are but that’s about it what if you want the header to be above the image you can’t do that what if you want the header to be on the image again you can’t do that but that is why the loop grid is so much more powerful because now you can build out the archive or the blog Pages how you want so what we’re going to do is go here and type in Loop and we’re going to bring over the loop grid as soon as you do that you get a slightly funny layout here don’t worry we’re going to create a template and then that’s going to be used to home or house our blogs I must point out though that to get the loop grid to work you must ensure that you are using the flexbox container in your Elemental features nested elements you don’t really need that but I would recommend you have that activated make sure the loop is also active down here back on our page we are going to create a template let’s hit save now this is this is almost weird in a way in that it now gives you a new look to it and it’s now saying well what do you want to create you’re going to look at this and go but I can’t see how many posts I can’t decide if I want to have two columns five columns 20 rows or whatever don’t worry about that you will do all of that when you hit the button save and back and you’re now back on your original page with the loop Grid at the moment you’re inside the loop grid so what we’re going to do is create a design I want my blog post to be very similar to the style we did on the home page we where we have a call to action widget and we had the text over the image so that’s what we’re going to do we’re gonna click here and we are going to insert one container okay one container I’m gonna add into there the call to action widget and I’ve also just zeroed out the margin and padding of this container as well just so that everything sits fully in go over it’s my call to action and I’m going to turn this into a cover so the text is over the image I can be really cheeky where I reuse some of the content that we already worked on so I’m going to go back to our home page and I’m going to copy this particular call to action that we’ve already built go over to our blog one and I’m going to paste the style like that and we now have to start bear in mind though it doesn’t look exactly the same okay so if I just go over here go and change the whip to be a full width like that we now have it back bear in mind though this is bringing over more that I actually need I mean it’s got the title it’s got a box there for the excerpt if we wanted to show the excerpt which I won’t but we also have a button I’m actually going to get rid of a lot of stuff we have here the only reason I did it was so that it brought through the paddings and the sizing because I’m going to show it on this page I want it to be quite consistent with the look that we have here at the moment so let’s go over to our Image First and rather than picking an image because if you pick an image that image will repeat for every blog post we want the featured image that we set per post and this is what you do when you hover over here you’ll see what’s known as a dynamic tag or a stack that little symbol you click that and then you go and pick featured image that will now bring over the featured image literally that’s what it does I’m also going to change the image size to be full like that let’s go over to the content I don’t want a heading and I don’t want to have a description either don’t worry about the fact that it’s all of a sudden shrunk because it will revert to its proper size when it’s brought over back into the loop grid what I do want to change though is the button so I’m going to go over here and get rid of the word click here of course everything now disappears again stay with me on this I’m going to click the dynamic tag and instead now I’m going to pick the post title I don’t have to pick read more or anything like that I can just go for post title that will now bring over the post title but I am going to click the spanner or the wrench and I’m now going to say after the word I’m going to have space with a bit of an a symbol like that so now we get that so I’m basically implying look click here and now you will go onwards but I need to tell it where that button needs to go so where you have the link again click the dynamic tag and there you will have post URL that will now say that when you click that you’re going to go to the actual post and if I hit save and back you will now see how it looks and you can see it we’ve only got six at the moment we got the image and we got the title now if you feel this looks a little bit lackluster and you wanted something a little bit better than that if I was to hit edit template so now I go back into the template and by the way once you’ve saved it when you go back into edit you will now see more than one post don’t get worried you’re not in the wrong area this is normal saving back means you go back so you know where you are you might want to extend and what we have here so how about I go and drop in a text editor widget and I’m going to drop it in below like this it now sits below my um call to action but it is still within that particular container I’m gonna go here and I’m going to give this a bit of sizing so I’m going to say give me about 20 for the left so it’s in line with the button and I’m gonna say from the right give me about a 20 as well like that I’m going to go to the content and rather than having these words I’m going to hit the tag again and I’m now going to say give me the post excerpt and now what you should get is is that Laura mipson wording that I’d put in there I’m going to go to my style I’m going to very quickly stylize it I’m going to go with an REM of one will keep it quite small and then underneath that I’m actually going to drop in the post info I’m gonna get rid of the comments but you know what in fact we’ll get rid of the time as well but I will leave the date I’m going to click that I’m going to say there’s no need for an icon give it 20 pixels from the left I’m going to go to my container and at the bottom of the container I’m I’m going to add in about 20 pixel margin or padding at the bottom there just to space things out a little bit so if I was to now go and hit save and back now you’re going to get a slightly different looking obviously it’s the same excerpt because I didn’t really change it but you get the idea and the last thing we’re going to add is in the category so I’m just going to duplicate what we have here at the moment with the text editor go to the top one go to content and where we have the post excerpt I’m going to hit the X hit the dynamic tag select post terms hit the spanner or the wrench because nothing appears at the moment and I’m now going to go for category if you want to go for tags you can do the category makes more sense here I’m not yeah we’ll leave a separator in case there was any item in there now at the moment our link is a pinkish color but if you were to go to the style for that the pink color or the purpley color is not there so how do we change that to be our brand color hit the hamburger go to site settings go to typography and down here you will now have your link color so if I go here and I now pick say this purple color instead once you’ve saved all that and you’re back into your Loop grid over here if I click it I have the option over how many columns I want to show I mean the more you have the worse it’s going to look but you can even have just one if you want or two I’m gonna go with three I’m also going to have six items per page you do have the option to kind of like depending on the types of images you got maybe you’ve got a mixture of horizontal and vertical the masonry effect can work for you as well and if you find that you’ve got various different heights like some of your images have got a really big title sorry not images some of your posts have long titles or long excerpts then the equal height can really work well for you but like I said the query tab is really powerful so you might decide to go with I’m only going to show certain categories here so I’m going to say include by term or you could exclude as well so you might exclude a certain category and I’m going to type here adventure and when I pick it it will only show me the adventure ones I’m going to get rid of that because I want to see everything also you can decide how you want to set the dates for this so you might want to go in ascending order or descending order I’m going to go for ascending because that’s the order I went and created things at the moment you can also adjust the spacing as well so if we go to style I might say there is zero gap between all of the columns like that and that looks quite nice because it kind of fits the style we’ve been doing on the home page or you could increase it and make it much wider the same with the rows as well now even if I set this to be zero because we added in some padding to the bottom of the container it’s never going to be right up against it and that was the reason I did it or if you want more Gap you can increase it I think that actually looks really smart with how it’s laid out at the moment so it’s zero Gap there everything looks okay because it sits within the container the 1100 but what about when we get to the mobile let’s just go and view that again the mobile looks fine and even though the text is brand new it looks okay so all you got to do now is have a think about and go well is this definitely the style you want to go for now I think these items are too close to one another now here on the desktop it worked on the mobile not so much so let’s just hit edit template let’s go to our container and for the mobile 50 like that so the content feels more closer to what is above and if we go back to our mobile well it’s sorry our desktop it is still okay let’s now hit update there or save them back I’m sorry you know save them back and then you hit your update I’m now going to go and set the display conditions for this the condition is going to be this is visible for all archives now you do get to decide is this just for post archive or category archives or anything like that all archives makes total sense you could if you want crate two completely different looks in fact you don’t even have to do two you could do 20 different looks and you might say that this particular archive is only relevant for any posts where they have the word Adventure as their category and then you have a different one for lifestyle and then you have a different one for mountain climbing that’s if you want to do that because it might be that maybe you’ve got uh jewelry you might have a certain look for Rings bracelets bags things like that we’re just gonna go for all archive and hit save and close now before we go and create a separate Blog Page and I’ll explain again why am I doing it in two different ways here on the current archive one make sure you set this to be current query the idea is is that if someone goes and clicks a link like the category they will end up here on this page which you with which basically does not have any filtering enabled for it this is just like a landing page for your blogs okay but the real Blog Page will have a filter system on there and I’m going to show you how to do that with the grid Builder WP plugin it is a premium plugin so if you want to use any other tool please be my guest but the really good ones tend to be premium okay so let’s just copy this entire container okay just hit update so that is now closed down go over to Pages click add new and I’m going to call this one blog and then edit with elemental again I just want to reiterate okay on the archive one make sure that when you get to the query tab you have it set as current query otherwise if someone clicks live style and then they end up over here it won’t follow through the word lifestyle so make sure you do that now we’re on the actual Blog Page we are going to get rid of the title like this and I am now going to paste in what we’ve already done I’m gonna basically I’m Gonna Leave the title as well as it is I’ll then click on the loop grid and over here now for the query I’m just going to leave it as um posts like that I don’t need to set it to current query posts is fine and then I’m going to hit publish that’s how easy it is okay that’s all I had to do what I need to do though is add in my filtering system so let’s go and do that by adding in a premium plugin there’ll be a link in the video description for you to go and get this I’m not gonna lie to you okay it’s it’s it’s not cheap it is 49 per year per site but it is super powerful and really really good when you’re doing woocommerce as well so I’m kind of using something that works for Loop grid posts and loop grid products woocommerce as well and once you’ve got it you do need to install it and activate and then you need to download the elemental extension this is free that you get once you’ve subscribed or you’ve got the premium version this is what you need to add in the widget there are other ways to do it by using short codes but this is the much better way to use it what you do is go to grid Builder on the left over here and then click on all facets and what we’re going to do is we’re going to create a filter which is just for the categories I’m going to say create a facet call it categories and just make sure you got the same name for the facet name and the facet title hit save changes then I’m going to go to behavior and I’m going to go for a filter and I’m gonna go for buttons because I do quite like the way the buttons look over here I’m going to scroll down and make sure the taxonomy is definitely using the categories I don’t need to include or exclude anything we want to show any that are empty um no I think not do we want to show how many posts there are maybe that’s not a bad idea so if there’s three for adventure you can show this three if there’s only one for lifestyle that might not look so bad that’s how quick and easy it was okay just like that let’s now go back over to our Blog Page and go back to my widget and I’m now going to type in facet and there it is and that’s what you get with the elemental add-on then I’m gonna set it by clicking here and picking categories because that’s what we’ve just created if I’d called it post cat you would pick post cat and now I’m going to select my Loop grid now if you’re a little bit unsure maybe you’ve got seven Loop grids on your page just go over and click the loop grid go down to where it says WP grid Builder and it will actually give you the ID field over here so a94 rate and if we go back over to here there it is let’s just now pick it and that will now very quickly bring through the items don’t actually like having the title there so I’m going to go over to my typography and I’m going to set that to be a zero I could modify the look of it even further if I wanted and go to my choices and make them be more Square I can make the the boards around them be thicker or thinner you can even go in and modify the typography for the item so most likely you would go in and go with Railway and then you’re going to set your size so you might go with sorry set that to be REM so when you hover over it we’ll go for a white color like that so it’s a little bit clearer on what you’re picking by moving the filters higher up with a negative 50 margin and I’ve added in about 10 from the bottom just to give me a little bit of spacing now just to show you how good this is if I pick scenery you get scenery you go for adventure you get three mountain climbing or you pick all that is really really slick and wonderful to use but let’s just make sure it looks okay on the mobile so let’s just go and pick it and and that looks fine I mean bear in mind though it is gonna wrap because of the length of the wording unless you were to make them ridiculously small or you had much shorter categories of mountain was just one word or climbing that would have fit over there but again it it just works and looks really really good why don’t we go and add this now entire Loop grid to our home page as well so I’m going to go over to my home page and I’m going to copy it well I’m going to copy the loop grid I go back to our home page scroll down until we get to here hit the plus sign and now I’m going to paste in our Loop grid make sure the container it sits in is 1100 because we’ve pasted it in make sure it is zeroed all out so everything is up against one another and I’m going to click the grid and I’m now going to change the layout of this to only actually show three so on the blog post you get six or nine or Twenty the blog archive is where you’re gonna land if you were to go and click on a particular category but on the actual home page this is what you will see and when I double check in the mobile it looks absolutely fine because we’ve already checked that let’s go over to WordPress and go to our menu in appearances the blog is now there so let’s add that to our menu let’s hit save menu and now let’s go and view our site as it is now so you can see here we’ve got our menu our header without the logo because we got two different logos you scroll down and you got your nice I think that’s a really nice layout we’ve got there if I click on any one of these it’s going to take us to the post now bear in mind the post you view is going to be really ugly because we have not done the single post template yet so let me just show you what would happen if you hit hiking Adventure I know really scary right and just to prove it works Rocky escapes look it’s working fine the image there is the same because we left the content as it was but what would happen if you were to now go and hit Adventure it will take you to this page the blog archive page which has just Adventure look let me prove it if I hit scenery you’re only going to get one post the scenery post before we go now all the way back up to the top over here and we go to blog this is the proper blog page and if I now go like that we can start to manipulate or jump around with what we’re viewing okay so that’s the reason why I had the blog archive page which is where you go if you’re now going through a query driven route if you just want your standard the blog page well here it is with the filter system and on the home page well we just have uh three posts that I’m showing you at the moment which I think is pretty nice and easy to look at I mean what do you think do you like it do you like the changes we’ve done and yes we did a bit more than maybe you thought you had to do because maybe you just set up an archive page and you never thought beyond that but think about a good filtering system to make it a much nicer user-friendlier experience for anyone looking at your website the only thing we haven’t done is created a single post template and we’re going to do that and we’re also going to create a sidebar as well just to make it jump and feel more nicer so let’s get on to that right now so there’s gonna be two stages first one is the single post template and then inside of there we’re going to create a sidebar now you may have noticed if you are using the hello theme that you don’t get a sidebar widget with other themes it does come available but you can build it on the Fly inside of Elementor and hello very very easily and that’s what we’re going to do we’re going to go over to templates first remember hit the all now we do currently have seven templates we have two headers we have a footer we have the 404 page we have the blog archive page but we also have elemental Loop item hashtag 209 that is the loop grid and we’ve basically reused it in three different locations so you don’t have to create it three different times just keep reusing what you’ve created now let’s create our single post template let’s click add new go over here and pick the single post which is just it don’t make the mistake of clicking single page just go for single post then be really creative with your naming which is single post template it’s simple and I know what it is Elementor does give you I have to say some really nice styling you know what they give is pretty nice but we’re just going to create one from scratch as we’ve been doing forever I’m gonna use our about page as a template for what we’re going to do here so I’m going to go over and copy the entire container go over to our single post template and hit paste like that I am going to get rid of the padding that we’ve got at the top there I’m going to reduce that down to be about 10. so we still have something but it’s not completely there I’m then going to click the header which says about I’m going to get rid of that I’m then going to just click out of here sometimes you have to click out of it to see the dynamic tags I just want to show you that again if you’ve got words then you delete the words it doesn’t always show you the tag so come out of it go back in and you’ll see the dynamic tag there I’m going to click that and I’m now going to go for post title and then I’m going to get rid of all of the content we have inside of here to be honest but I’m not sure why I even brought that over I’ve got to be honest because I’m actually not really using much just the header but what we do have is a container this container is set as a row um it’s I’m going to set it to be at the top at the moment like that and we do have a rack functionality in here as well I’m going to add in another duplicate container like that so what we now have is just to look at the structure we have container and header and then we have two child containers inside the parent container I’m going to set that to be a row like that so you can now see what it’s doing I’m also going to set it to be wrapped like that so now everything is wrapped but now it almost looks like it’s gone back to a column structure I’m going to go to The Heading and I’m going to say make the width of this be a hundred percent go all the way across container number two though I want you to have a full width but I want you to be uh 50 like that because now it just puts it side by side I’m gonna go over to this first container and I’m now going to increase the size of it and I’m going to set it to be 75 percent I’m not going to set the other container to be 25 so we got 75 and 25 to make a hundred remember the width of this is set to 1 100. into the very first container I’m now going to drop in post content you can drop in a text editor and select that but just dropping in the post content just make things a little bit easier so here we now have our content added in if you had gone and applied any colors or styling to your text in your block editor it would have brought it over but I tend to say don’t go too crazy on that because we’re going to go in over here and we’re just going to make sure the typography is set to a 1.2 REM like that and we’re going to make sure the letter spacing is a one as well I’m also going to create a bit of spacing in this container so still on container number one I’m going to go over here and on the right hand side I’m going to say give me about 50. so we are using 75 percent of the estate but we’re going to have a bit of 50 pixel Gap over there I’m going to go in with about 30 from the top as well just so we’re not pushed up right against the header now you can add in further items to sit within this container if you go over to the widget if you want to add in uh comments if you want to add in a table of uh contents so every time you have a H3 header on your post used if you used it in your block editor you could use table of contents I’ve got a video on that if you want to go and watch that as well over into this container for consistency I’m going to just do a 30 from the top again just so that things sit in line with the wording that we have here I could drop in the post info at the top over here we’ll get rid of the comments one um time not so bothered about that if you want to show the author you can do if you want to add in the post excerpt you can as well I’m just going to add in a little bit of spacing here between the elements and you could also add in the featured image so we could if we want straight after the header go straight into the image over there remembering that the container that we just copied over already has the 20 pixel for the left and right and that is looking okay yeah that’s looking absolutely fine be a good idea Beau to save this before we do the sidebar so I’m going to hit publish add condition and I’m going to say that this is going to be visible for all singular now I would probably say go and pick posts as well just to be on the safe side I’ve seen people just do that and you can get away with that but you’re better off defining is this for per category per her tags or anything like that but just say it’s for all posts and just make sure it’s set to all as well and hit save and close like I said better safe than sorry now what are we going to be doing over here remember this is a 1 000 by 100 uh width and we know that this is 25 of that let’s go back over to our WordPress go to templates and we’re now going to create a new one we are using containers by the way uh sidebar yes sidebar and then we’re going to hit create template I’m going to hit the plus sign and I’m now going to pick a container which is column I’m going to set this now to be a certain size 275 is 25 of 1100 this is where the sizes you pick are can be your friend the minute you go for like 111 then you now start playing with decimals but this is the size of our sidebar that we currently have to help us out I’ve actually gone back into my social page and by the way I’ve got these browsers open in my window I’m going to copy this image go over here and I’m just going to paste it I’m duplicating stuff I’ve already done I’m going to pick up this heading and we’re going to pop it in over here as well paste and I’m going to move it to the top like that I’m going to change this to be about Sarah like that copy this little bit of text over here let’s just drop that in below like this I love exploring the Great Outdoors let’s just check the size of that that was a 1.1 I’m going to drop it down to a one I’ve also dropped that title down to be a 1 0.2 what about the contact form okay you know what let’s go and grab that as well let’s just modify the form and I’m actually going to get rid of the name and get rid of the email I’m going to make sure that this is set to be a full width like that so it goes all the way across I’m going to set the button to actually be full width as well I know I said I don’t like that style but I am going to do it here I’m going to go to the form go to the form field click the email and I’m going to change the placeholder from email to the Subscribe like that go down over here now to where we have the button and change the word send to uh subscribe I’m going to reduce the font over here just to be in line with everything else that we’ve got now if you’re using a service like MailChimp or mailerlite or activecampaign you need to go there and get your API key from them or ID and then what you would do is when you come to actions after submit you would come here and you might go with say MailChimp you’ll have an option down here and what you then want to do is get your API key entered and then go and get this to be connected over to your group or however you’ve set it up so every time someone fills that in and hits the Subscribe button it adds it to your mailing list I’m now going to drop in a loop grid now we are going to have a slightly different one be careful though don’t just go over here uh say to your home page copy this over and then modify because if you modify it it will modify it for every single page now I use it on the blog archive the blog page and the home I can get away with that but if you were going to have a completely different look for them create a separate Loop grid so over here I’ve now got a loop grid I’m going to go to my home page I’m going to hit edit template I’m edit I’m going to copy it but I’m not overwriting it I’m then going to completely copy what we have here so I’m just going to copy the container okay copy the container just hit save and back so everything stays intact go over to my sidebar and here I’m now going to hit create template so we create a brand new template I will now uh well I will now paste over here and what I’m now going to get is the same as what I had before but I’m going to modify this to make it easier for me I’m just going to hit save and back I know this feels like a little bit of back and forth but you’ll understand why once you’ve done that now you can go in and select your column so I’m going to change that to be one by three or one by four even we’ll go with one by four I’m then going to go and edit the template because now it’s easier for me to see because before it was stacked into light well not stacked it was aligned into or inlined into three columns now I’m going to modify this so I’m just going to kind of do something like this um uh yeah something like that and then what I will also do is leave just check that looks okay that looks fine we hit save and back so now we have a different style for our posts over here can you see here we’ve now got a slightly different they are still quite big in size and you might want to modify that in fact I think we should modify it let’s go over here to our call to action widget or whatever we’re using let’s edit it let’s go to our style and let’s adjust the height so let’s make it be about I think we should go with the 150 something like that that looks okay let’s hit save and back and I’m going to go over here and I’m now just going to pick up this header duplicate it add in a bit of spacing from the top there and we’ll go with something like about 40 like that so it’s just a little bit spaced out change the title to be other posts we’ll also click on the query or The Loop grid go to query and down here you want to click on the word exclude and then you want to say avoid duplicate so what you don’t want if you’re reading a post you want you don’t want this same post to appear here as well we then hit publish and in essence we’ve just created a sidebar let’s just double check how this looks on the mobile really important this all right always do this don’t just rush past it what you’re seeing is a very extended look of it all right but it’s gonna be sat below the post okay so there we have our wording the wording is fine you might want to make that a little bit bigger I mean I would say um you know about Sarah no 1.2 it’s okay actually it’s 1.2 the image there of a post you got your wording and we’ve got for ah now we’ve got the form which is down here do you remember why if you’re paying attention you’ll remember why if you’ve been watching these videos If you go to Advanced we had set an order on the contact form get rid of that and it will now sit in the right place with where it needs to be have a think about your layout you know does it need to be more spaced out anything like that I’m gonna go with the 10 there I do think for the purpose of the mobile I’m just going to go into this container zero everything out and then go with a 20 and a 20. it makes sense doesn’t it for the layout in terms of how it looks let’s now hit update here here’s now where we’re gonna add that to our single post page over here but what you don’t do is copy this over okay you close this page down and go over to templates and you will now see sidebar and you will now have a short code here copy that short code the reason why I’m doing it this way is though if you were to now copy that and paste it into your single post template we are going to go and grab a shortcode and into the field we are now going to add in that bit of uh the ID for it that we had before then we are going to hit update and this is what you get now on the right hand side we now have a sidebar with a subscribe option if you want to go out and check out this person by the way remember it opens it in a new browser window you can do so and one final thing we will add over here is the share icon because this will take you these social sharing icons that we have here they’re going to take you to the page Sarah’s page but I want someone to share this on their own social media profile so we’re going to go and grab the share icon and we’ll drop it in I think just over here is not a bad idea so it’s just you know you could go above the excerpt if you want or however you want to do it you have various options so you can go for Icon and text you can go just for Icon you can go for text as well whatever you want to go for I think icon text works quite well I’m not going to stylize these out mainly because you will get to pick and choose how you want it to look in terms of are you going to add in like pins by the way look if I click here you do have a range of options pin interest Reddit um WhatsApp email you even have a print option so if you want to allow people to print it let me just go and put it as four let me change it to be a flat image something like that as well so maybe you’re doing blog posts about recipes or menus and you won’t be able to print them you can do all of that just to complete things I’m going to drop in a text editor over here I’m going to change this to be share just going to add in some negative margin like that just so we have it sat above you could make it in line if you want depending on how many items you have and always check how do things look on the mobile you might need to adjust a bit of the margin I mean over here make sure you’ve gone and selected Auto for the columns so it aligns things a little bit better you can change the style of it how you want but I think left align just works pretty well go and view our website now if I was to now hit hiking Adventure this is the page we come to with our sidebar and our information if we were to go back and instead we went over to the blog page and we clicked on surreal surroundings the image the wording you got your sidebar it all looks really really good or at least better than what we had before we’ve improved the home page with the blog bit we’ve got a single post template to make things look much nicer we’ve got a sidebar that has a subscribe option as well and we’re doing all of this within the tools that we’re using now I accept that I have said you’ve got to get another premium plug-in if you want to have the filtering system with the blogs but if you’re not bothered about that you don’t have to do that okay but there are other options out there most of them do cost money there are some free ones but they don’t really work so well especially if you want on the page filtering I have got tutorials on how you can do things whereby when you click it it takes you to another page that’s another quick free way to do it but I think the grid Builder is really really good I hope you’re liking what we’re doing if you are please hit the smash button subscribe and let other people know about this tutorial we’re doing
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.
