How to Build Wordpress Posts, Blog Templates and Post Templates - Elementor Wordpress Tutorial 2023
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Join our 'How to Start a Web Design Business' Course - and use strategies to grow, get clients, and generate recurring income: websquadron.co.uk/how-to-star...
Book your 1-2-1 Consultation: websquadron.co.uk/socials
This is How to Build Wordpress Posts, Blog Templates and Post Templates - Elementor Wordpress Tutorial 2023
00:00 Add Posts
04:38 Post Archive Template with Loop Grid
16:55 Post Archive Display Conditions
18:26 Blog Page
19:24 Add Gridbuilder for Post Filtering
wpgridbuilder.com/
wpgridbuilder.com/add-ons/ele...
23:01 Add Posts to the Home Page
26:34 Single Post Template
31:20 Single Post Display Conditions
32:04 Side Bar Template
We love to create - share - respond - and deliver.
🧐 Learn with our Mastery Modules: websquadron.co.uk/web-design-...
🔗 All of our Important Links: websquadron.co.uk/socials/
😃 Join our Facebook Group: / 3309523509284305
😃 Get Code Snippets Pro: r.freemius.com/10565/3304295/
😃 Get Elementor Pro: be.elementor.com/visit/?bta=2...
😃 Boost your TH-cam Analysis: www.tubebuddy.com/websquadron
👕 Get our Merchandise: websquadron.co.uk/merchandise
🥹 Support us: paypal.me/Websquadron
Hire us to work on your Website!
💌 info@websquadron.co.uk
👩💻 Visit websquadron.co.uk - แนวปฏิบัติและการใช้ชีวิต
Thank you for your great teaching! Really appreciate it!
Thanks. Learned a lot
One of the best WordPress tutors on TH-cam, so I subscribed/Liked/Shared and Saved
Wow I'm so impressed! You have great talent and you can be a good teacher in a uni or a college with that sets of skills you have. Thank you Imran.❤
Super easy to understand, you remember the important bits always and you have a very intuitive easy to show and tell things easy for everyone to understand.... A true fan, non bullshit approach, you listen to people and keep up with what we all want... Thanks again. 😊😊👍👍👍👍
Thanks! Best tutorial about this topic on TH-cam!
Have been breaking my brain against multiple posts on how to do a nice blog with elementor, to no avail.
But THIS... is just absolutely AMAZING!
So detailed and clear!!!
Thanks a million! ❤🙏
What a great teacher! Thanks for an awesome tutorial.
I think that the outlay is brilliant! You ask people what do they think? I hope that folk respond. Your a genius!
This is probably one of the best tutorials on blog posts and categories I've ever seen. Working out how templates, pages, posts, categories, and loop grids etc. all fit together is no easy task. Each stand alone option is fairly easy to understand, but with 100s of options to choose from, precision integration gets difficult. I like how the video gives an overarching system, helping navigate through those 100's of options and how to fit them together. It feels like the solution to a giant jigsaw puzzle. You end up with a much deeper understanding of how post grid systems work in Elementor, and how to leverage them properly to full effect. Thank you Web Squadron, keep up the great work. There's no doubt this video deserves 5 stars.
Made my day :) Thanks.
This is the reason why I do it.
To be be MAD.
Make a Difference.
Totally agreed, this video really sets the bar as high as it gets in terms of value delivered!
Excellent and useful as always!
Excellent walkthrough. Thanks!
This is absolutely amazing!
Absolutely stellar!! Amazing info presented incredibly well. I appreciate you and your work, thank you!
This is the video I needed. Thanks so much for making this. Elementor really don't know how to make a tutorial!
I love you Man! You're the Best!
Thank you Imran! I learned so much from this video. I am very grateful. Mike
Glad to hear that!
Love this and how you explain in details. Thank you very much!
You are so welcome!
Great video. This is really informative.
Awesome tutorial, as always!! Thanks a lot!!
My pleasure!
Hmmm.. just what I needed. Cheers
you did an awesome job with this tutorial. Great Job 👏
Thank you so much!
Yes, your videos for Elementor's Flexbox functionality are probably the best of the top 3 (the other 2; livingwithpixels, ferdykoerpershoek) 👍
Cool, thanks
Just watched this video. WOW! Wish i could have given ten likes.😂 Subscribed immediately. I have been struggling with ugly blog content for two years. Excellent tutorial. Thank you for taking the time to create this. I look forward to viewing your other videos.
Some people can teach and others have no chance this guy can teach he does not bore you at the start with nonsense and you lose focus
Just a amazing
good job
Would love to see some videos with ideas on different layouts for doing the post article itself using the wordpress blocks. I love this idea of this method for the blog part of my website, but drawing blanks on different layouts for the article itself.
Will do.
Great tutorial. It’s the first time I found something that shows how to correctly enter/create new posts. Most of our blogs were created like we were building pages.
If you base a post on a template and then change the template, do existing posts also change?
With gridbuilder WP category filter, can you further narrow the filter to 2 or more specific categories? Do you have a tutorial on gridbuilder WP?
I am looking forward of going through your recent mega tutorial. Thanks again for all your tutorials.
Yes, once you change a template them all will change - but you can create alternate templates for posts, categories, etc.
You can narrow down GriidBuilder to specific categories.
26:36 really helped me... thanks
Awesome tutorial! Can you make queries or categories a pulldown menu?
Thanks, Imran! - Does the new taxonomy filter in Elementor replace the need for the premium plugin for on page filtering? Thanks again!
To a point yes for basic taxonomy filters
This is super helpful! Thank you! Can you do a tutorial on how to make a loop carousel for testimonials? Would I need to make a post for each testimonial and then refine the query to just pull just those posts?
Exactly that. Add them as posts. Give them a category like Testimonial and then pull them out using the query.
Hello,
thank you for your tutorial!
I've created a single post, and put the right conditions for it, but it doesn't appear afterwards, all my articles have the same content ...
Do you use the gutenberg editor to create post ?
Thanks
Yes, standard Wordpress for the posts.
Difficult to check without a 1-2-1
salam aalikom brodther imran please I want to keep the excerpt content inside the box is there any trick to adjust that thank you
Any suggestions for what to do with the sidebar on tablet? On mobile it takes up all the width below the post but on tablet it looks a bit weird to me but I'm not sure what I should do with it.
I would either make it thinner or just shove it below - or even hide it.
Cool tutorial as always. I'm working now on a single blog post template and I'm not sure what's the best approach. Either a simple template with post content widget and the writer can add the copy by using the typical WP editor or create a structure inside the template design and the writer needs to use Elementor. The structure created in Elementor allows me to create different layouts but I don't know if could become out of control over time.
Give them Custom Fields with ACF so you can control what goes where.
This is so funny, was just working on my layout design today for personal articles on website, brain block!
I swear I don't know how you seem to always post videos regarding topics I'm currently working on. This is a great video Imran, thank you so much for this, I am definitely implementing these methods tomorrow.
@@Melissa_Lawrence Rumour has it that he's got a hack on each of the listeners browsers and desktops, through a TH-cam algorithm hack. Then, with chat GPT, Midjourney and synthesis he autocreates artificial videos, and publishes thousands. Each one is hacked in a way that only is shown to those users that were searching for those terms. If you realize, sometimes his voice is slightly robotic; that's because the technology is not quite there yet. 😅
@@satanishangover 😂🤣😂
Great video! I am having problems editing the Single Post Template once the Sidebar is copied into it via shortcode. Once that is in there I get the Elementor White Screen of Death when I try to edit the Single Post Template. Wondering if anyone else is having that problem.
Depends on how you’ve created the side bar and if there’s anything in there causing a problem
Excellent video!
This is great! However when I click save and back, the button somehow doesnt reflect the styling I see when inside the Edit menu. ie the Button goes transparent with White text. Any suggestions?
Difficult to be sure as it may depend on the site, other settings. Have you regenerated the css, and purged the site/server?
Hi, I have a question. Can we add filter using tab widget and make them work properly with custom code instead of buying wp grid builder plugin?
Not sure about that yet, plus I hope that the future Post Filter helps.
Great tutorial again, thanks Imran. One question: How do I add blog "Archives" by month to the Side Bar Template?
Good question let me double check as my old method may be out of date now
I love the tutorial, but when i clicked and start watching this beautiful tutorial, I was trying to understand how to make a "other posts" sidebar that 'follows the scrolling'. Can we do this in elementor? If we can do can you please tell me how can I learn? i don't know which terms I should search for. Thank you very much
Great video, very useful! I´m looking for the video about the table of content. Do you have a link to it?
Many thanks and keep up this great work :)
Not got a video - but what you should do is make all of your Headers be H3 or H4, etc. And then add the Table of Contents Widget. Use the Setting to use H3, and then all H3 on your page will become part of the ToC.
Hi there, thanks so much for the video. I have used all your suggested widths, but for some reason my sidebar keeps getting pushed down to the bottom of the page as if the total width was too wide. I have tested it in laptop, desktop, widescreen, and mobile, and they same issue happens each time. Any idea what could be wrong? Also, could you link to the videos directly before this one? I can't find them and it seems like you established some of the site settings in earlier videos. Love your content!!!
See this - th-cam.com/video/GphUzVrjm3w/w-d-xo.htmlfeature=shared
Have you set a Boxed width and then added the Child Containers?
@@websquadron thanks for the quick response! I changed it to 70% instead and that seemed to work. Thanks for sending the link to the other video as well!
In pagination next button redirect to homepage please any solution
Great tutorial.
that said I still screwed up something. When copying the finished Grid Loop to the page I want it to be in and saving, the Grid doesn't show the images and the dynamic info resets to the current page that I pasted to (home page), essentially everything is blank.
Any ideas?
When you go to the Query Tab is it on Latest Posts or Current Query?
@@websquadron It was Current Query, changing it to Latest Posts fixed it, thanks.
Hello Imran thank you as usual you've enlightend me! I'm a bit confused about the display conditions. As i do have 2 blog pages on the same site. The first is a sound blog with the categorys of different genres, the second is a filosofical statement blog with posts divided in categorys. Both blog pages are styled differently followed by their categorys. Is it still "include all archives" for both (2 different archive pages) or is it "include category + the categorys" etc....? A hint? Thank you! 🌻
Go for categories as that will ensure the right one shows up.
@@websquadron Thank you!!! That's what i thought :) I found out that instead of the gird builder i can use the taxonomy filter which is free...
Amazing tutorial. I have an issue though, my titles will be longer as they are full blog post titles. If i change them to appear as button text they are centrally aligned, i want them to be left alligned but there seems to be no option for this. How can it be done?
.elementor-button-text {
text-align: left;
}
ahh lovely thanks for this mate. Also i noticed call to action widget doesn't support gradient fades overlay on the backgound image. Is there something i can use that supoorts that to make a featured post block above the posts grid?@@websquadron
hi, friend. I'm new to this, I have a blog with few entries yet. I use Astra Pro and Elementor Pro. I would like to be able to customize the entries in terms of widgets (price lists, benefits, comparisons, etc.) What is the best workflow? The Gutenberg editor is not very friendly to style the posts. Thanks
Best thing is to add the Free Advanced Custom Fields plugin - and then add the fields to Posts. When presenting on the Singe Post Page, you can style it to be however you want.
@@websquadron oh man you are the first to take the time to reply. I appreciate it. thank you
20:04 Now we have the Taxonomy Filter, which works like a charm
Did you make a video tutorial for the home page part?
That’s no longer available as it’s been replaced by an online course: learn.websquadron.co.uk
Where have you been all my life (well at least it feels like a lifetime I have been trying to figure out with little to not success what you have clearly showed in 40 minutes.) Just the fact to build your blog directly in WP and not Elementor OMG! Game changer. In the very beginning of the video you said, " We've already mentioned on the homepage that we are missing....." I am wondering if you are referring to another video that you did regarding setting up a home page. I looked thru your videos but didn't see one. Did I miss it? Thanks again. Fantastic tutorial.
You may want to see this version:
th-cam.com/video/GphUzVrjm3w/w-d-xo.htmlfeature=shared
@@websquadron thanks so much
Thanks Imran, this has been vevy helpful for me! However, did you really get the "Avoid duplicates"-setting to work like you said? It doesn't for me, I still get the current post displayed in my sidebar.
I have noticed it happening now so I think there's a flaw now.
Best thing to do is to add it as an exclude.
@@websquadron I didn't even now there was an option under Exclude... Now that I found it it's working perfectly, thank you!
is there any filtering options for the loop grid ?
You can use the new Taxonomy Filter inside EL or use the Gridbuilder plugin
Hey awesome video! Although, i tried to follow step by step I hit a block when at the time stamp 5:03 i could not see the ARCHIVE SELECTION from my end, have you any advice? I'm still new to all this and your channel is fruitful makes the journey fun. Also Would Page be another alternative to achieve the same results?
Are you using EL Pro?
@@websquadron no
Then that is why. @@XuanWu-jp1jy
Is there a video before this showing how to make the header and footer and stuff?
There was but now a more indepth tutorial is offered here: learn.websquadron.co.uk
Very good and informative video, easy to follow. I only have one issue that how can I show only primary category?
Where do you want to show it?
@@websquadron Trying to create archive page with only primary category showing instead of all the posts categories. I have Yoast installed but failed to get primary working by following all types of instructions on pages. Your instructions are super good and many times I follow your videos
Does anyone know why a small gap would still appear in my loop grid even though I set it to 0?
% or any margins?
Can I ask what is the video previous to this one? You refer to things you have already made, it feels like I've joined halfway through!
Thanks, love your content by the way
Hi
I’ve removed that video now and have replaced them with updated versions in our course. learn.websquadron.co.uk
Imran this video is very helpful but please can you point me in the right direction. When you copy the post template to insert in to the loop grid. Where did you get the style from the home page? I can’t get my button to sit in the bottom of the container and I see you copied it from a. Previous video. Can you tell me where that is?? Thank you
Add a child container for the button and then set the parent container to be space between
@@websquadron thank you i shall try this
Great tutorial, very clarifying. Only think I don’t like is the use of paid plugin for filtering…
Agreed. Hoping that EL bring out their loop filtering soon
Imran, TH-cam videos are great. I’ve learned a lot from you. This is the first time I’ve had problems following along.
I’ve followed all the steps and built the Blog Archive Template, the Blog page, the Single Post Template and the Sidebar Template - but for some reason when I click on any post, it disregards the Single Post Template and just shows the ugly raw post. What did I miss?
Was the display condition set to be post?
Yes. Set to all posts.
@@websquadron Ok, so it turns out that you can't create posts in the Elementor Canvas page layout. If you do, that page layout overrides the post's connection to the single page template.
Hi Imran when i put the current query the archive page shows the last article/post from another category. And the other category is assigned to another archive page where it shows the same issue. There must be an error somewhere...
I've forgot to mention that both archive pages have a different loop grid.
Difficult to be sure without seeing the set up/conditions.
Unfortunately i can't show it here ;) I've changed the conditions of the archive pages to only category - name of the main category but it's still the same issue. But at the end i filter it on the post page and it shows it correctly the assigned content, so that's ok.
Hello from Brazil. Very good explanation. Thank you for sharing. But... I have one doubt. Here we have two writers, can i build a single page template to each one? is it possible, and please if yes how to use it? THank you again, great videos.
Yes you can set the display condition based on author
Great solution. Thank you very much@@websquadron... Great contents!!!!
Hi I followed this tutorial and when I update new content in my latest post, the rest of my posts also show the same content. Seems like I am editing the template itself. How do I fix this? Please help
Posts should be done in WordPress Classic Posts. You should only change the template when you want to change it for all, or specific categories.
@@websquadron Oh, okay got it. Thank you so much!!!
Is this a one off video or is there a playlist of how to do the complete website?
The latest and updated version is now a pod course on learn.websquadron.co.uk
Thanks! Do you have anything on podcast in elementor?
You'd need to add a RSS Feed via HTML to a page.
@@websquadron Thank you. This I understand. It is about the styling and adding a player and the necassary elements. do you have any documentation on this? your walkthroughs are so clear
@@websquadron actually a more relevant question is: does one style the post as you have done here to be used for a podcast?
@@daratittjungatutubeYes you could but it depends if you want one style or many.
@@websquadron Thanks for all your help! It is much appreciated!
Great tutorial - Thanks But what is actually the disadvantage of building the posts in Elementor instead of WordPress ?
If you build the post in EL, and you have lots of posts, and then you change the style - you may have to redo all of your posts.
But with a single post template, you can just change a template and it will pass through for all posts where the display conditions are set to do so.
@@websquadron Makes sense - thanks again
I followed this to the letter and still can't get it to work properly for me. The fearured images dont show in elementor, and the posts dont go through to the single post page template. They just go through to a blank page. Does anyone have any suggestions?
We may need to do a 1-2-1 unless you're not set the Display Conditions for the Templates, or not set the Featured Images properly?
@websquadron I can't thank you enough for your help and advice on here. I seem to have fixed the issue. For some reason, my single post template was set to elementor canvas and not elementor full width. Im still not sure why my featured images are not showing in elementor, but it all works fine live. Keep up the great work, mate, and thanks again!!
Has anyone else out there had problems with setting a background image on a container in your loop grid and it not displaying properly? By that, I mean that it is set to "cover" but it doesn't cover and instead gets cropped.
Double check for any column or row gaps
Any Idea why I can't edit it my template? Everything worked well and now I tried to edit it and it doesn't work :(
Not sure unless there’s been an update? Try wpsweep to clean drafts and transients
Can you show something like this for Elementor Free Version?
You’ll need to use some Addons but I’ll have a think
I saw a video from another author and he suggested four different free plug ins to make a blog on Elementor, however I'm not sure people can post comments on those blog posts, and that can be an issue.
Please create elementor playlist from A to Z.
Have you seen this: th-cam.com/video/GphUzVrjm3w/w-d-xo.html
Imran could you please show how to display post views counter
Have you checked with ChatGPT?
@@websquadron no, but I tried to find such tutorial on youtube and saw about 15 videos and they are not useful, yours are always easy to implement
I may have misunderstood something - but Elementor Pro already includes a Loop Builder. Why would I want to spend another $49/year/site on a different plug-in that is *only* a loop builder if I already have Elementor Pro? What does this plug-in give me that Elementor Pro does not? 🤔
This video was recorded before EL's Taxonomy Filter came out.
PS - I am using EL's Loop Grid in the video, so I am sure your question relates to the Filter: Gridbuilder.
Have you seen my video on flaws with the EL Tax Filter?
It doesn't offer multi-filter changes like Gridbuilder.
@@websquadron Yes, I saw something in the video named GridBuilder and you showed that it cost $49 per year. I just started with Elementor a month ago - so I have no idea what previous versions did or didn’t have. But now that Elementor has its own loop grid, is it still worth paying $49/year for GrudBuilder or is the Elementor one pretty much the same?
@@Tenly2009 See this: th-cam.com/video/icIRJWZQ6hY/w-d-xo.htmlfeature=shared
Gridbuilder is still much better but if you only intend to use one set of categories or Taxonomies then the EL Tax Filter should be fine.
I think you need to be clear (sorry if you have been and i've missed it) that this is for elementor pro users.... it's not until you get in and realise half the options which are showing aren't available on someone who hasn't got elementor pro
I understand. Are you not using EL Pro; I strongly advise that you do, or get the Client to purchase it.
Very good video, however, I don't like getting 9 minutes in, feeling like I need to go watch a different video to keep up with this one...meaning a bunch of edits and splicing and using materials from a completely different video. So I guess I'll see you when I come back to this one.
Also...where did you get that cool 3 piece picture in space.
Atmoph LED Windows - google them :)
@@websquadron thanks. I gotta say though...It would have been nice to have a disclaimer that there's some plugins that are premium in nature before starting this workthrough. Appreciate the knowledge tho and I can tell you know your stuff so I will look forward to the next video.
@28:21 “We have container and header”
- No. You have “container and HEADING”. There’s a big difference between a header and a heading. Glad I was watching instead of just listening or I’d have ended up pretty confused.
Slip of the tongue and it happens when you do videos.
Where is the video that comes before this one?
It’s the blog archive one released a day earlier
Elementor?!
Sure, but I'm not going to pay $50 month!
Then why are you here?
You lost me when you copied and pasted a design from another post. I wish you could have just built out the post manually without the copy/paste. That way we would know how to build a template from scratch. I guess I don't know why you had to copy and paste an image back into the template. Why couldn't you just have done that from where you were?
Because it contained pre-requisites already defined
Just two clicks with Bricks, really!
Which bit you referring to?
@@websquadron the entire tutorial I bet. 🤣
Probably
very very confusing....
How so?
So after doing this I have another plugin that started detecting blocked pages. Each post creates some random page located at url - site/2023/11/06 I don't know where this comes from or how to stop it from being created, I can't see this particular post anywhere on the back end to delete it either. Any ideas? It is creating the regular post and displaying properly. I'm worried this could be harmful for seo reasons having duplicate type pages.
thanks for the video. BTW the starwars images in yout barckground are in movement right? how you do it is a camera FX?
Atmoph 2 Windows :) Google it :)
@@websquadron any link? i can not buy to japan lol
@@jeditech.academy atmoph.com/en
@@websquadron thank you againt but says "for sale in japan only. we do not shio world wide" lol you are more lucky than me. thanks anyway.