 I got some good news everyone, you don't have to keep making boring search result pages. In fact, with Elementor, we can get super creative and we can style up and make our own search results pages the way we like. We got the freedom to be creative, to put our own touch and flavor onto it. And I'm going to show you how to do that inside this video. Now I also got some not so good news and that is by default with WordPress. The search function is very basic. There are no options in it. But I do have a solution to that, so I'm going to show you that as well. I'm going to show you a couple things in this one. I'll show you how to use a search function and have only blogs come up. So if you do have a blogging website, only your blogs will show. Also, if you have a WooCommerce website, I'm going to show you how to make it so only the products come up inside your search. And we're not going to use any plugins to do this. Only Elementor and Elementor Pro because, well, if you guys see any of my videos, you know that I don't like using plugins, not unless I absolutely have to. And in this case, to make our search results show only blogs or only products, well, we don't need a plugin for it. It's super easy. Anyone followed one along could achieve this. Now there are timestamps inside the description, so you can bounce around and take what you need from this video because I am going to show a few things. What's up everyone? I'm Jeffrey at Lightbox and, well, you know all that good YouTube stuff. If you find this video helpful, then, you know, like, subscribe. If you have any questions, drop them in the comments. I'd be happy to get back to everyone. All right, let's go ahead and dive in. We're going to be using this website right here. It's just a staging website I quickly put together. If we go here to the blog, I put a bunch of filler blog content in here. This is all just for staging and for an example right here. But a lot of them have, like, Elementor tutorials in it. So if we go here to the search, and this is using Elementor's search widget right here. There's no third-party widgets involved or third-party plugins. Let me type up Elementor and let's take a look at our search results. So right here, there are two problems that I'm seeing. One, we're using Hello Theme and there's no styling to it. So we're getting just the basic right here and it looks pretty rubbish, you know. It doesn't look pretty at all. But the other big problem is, if we look right here at the top, we're going to see a page is showing. Like, this isn't even a blog post, it's just a page. And what ends up happening is, as your website builds up and you get a lot of images, a lot of pages, well, in the search results, it could show pages you don't want to show, especially if you got, like, an e-commerce website. You don't want, like, thank you pages and checkout pages showing. Also, you could get some pretty random stuff. Like, I've seen image files come up, URLs to images and things like that. So we're going to prevent all that. When it comes to the style and the layout of the search results page, this usually is carried over by default from the theme. Hello Theme is a barebones theme. If we were to go and say, I have another theme over here, let me switch just to show you an example and we'll activate Astra. And let me go here. You see it changed the styles. But if we go to our blog and go to the search results page, Elementor, and you see it looks different now, and that's because it's carrying over styles from the theme. And the problem with this is it leaves us limited and I don't like limitations at all. It's why I fell in love with Elementor when I first started using it. So let me go back and change our theme back to Hello. And we're going to use a Hello child theme. And from here, what we're going to start is going over to the theme builder. And from here, you're going to go to search results. It's very straightforward. So go ahead and select on this and let's call this a name of my searches. Let's create a template right over here. And I'm not going to use any of the pre-built. And from here now, we have a completely blank canvas where we could get creative. We could flex our own freedom and put our own styles on here. It doesn't have to be boring. We can make it clean, easy to read for the users and anytime doing a search results, I always suggest to be creative, make it look nice, but make it easy to read. You always want it easy for people to find whatever they're searching for. But you're not limited to whatever the theme is allowing you to do. So we could do something like add a banner up here. All right, this is just a quick banner, but you can make a super dope banner if you like to go ahead and put in some time, put in like a background on it. I would just keep it the height, not too high because you want to be able to allow the users to see the search results at the top of the fold. Now I'm going to make two columns here. And that's because for this, I like to keep a sign up newsletter of some sort of lead generation. And we could take the sign up lose letter right here and we could put it in there. In fact, let me do that real quick. I'm going to just copy and paste it from the blog archive and bring it over. Let me copy this and I'm going to paste that right in here. Now I would also need to change like this. I would probably change the form name, the search results form. That way you know who submitted it, where it came from. All right, now the one thing we do need to have inside our search results is this, the archive post. So let's drag that over. And this is the only thing we have to have. You could add in other things. You could put social media icons. You could even put in another search bar. In fact, let me do that right here. I'm going to copy this over. And I'm going to put in a search bar so people could continue searching. All right, this is something I have hidden here, but it's all good. So right off the bat, you're going to see something looks weird, right? You see, we got the refunds and return policy, my account checkout. And this is what I mean. These are things coming up in the search results we don't want to show. So we got to fix to this coming up towards the end. But right here, all we need to do for now, let's go ahead and style this up. I'll put this at two. And we can just leave this as it is. Let's go ahead and publish it. When we hit Add Condition, now don't put on all archives. Instead, click on this, go down to search results, and then Save and Close. And let's take a look at how it looks like in the front end. All right, I'm going to go to our blog right here. And I want to see how it looks like when I type in Elementor. Or this is basically just going to show me what it looks like when a search term comes up. And already it's starting to look better. Now, we can style this up as we like. One that I really like, let me click this right here. This is a site that I really like right here. They got a fantastic blog. And if you go to their blog post right here, let me put in Health because they got a lot of healthy stuff. And check out their results right here. See, the thing I like about this is it's easy to read and it's easy to find what we're looking for. And then you notice there's nothing random coming up, like checkout pages and pages you don't want to show. Now, when it comes to designing and building your own, what I suggest is to do a little bit of research, find some blogs that look really nice, and take a look at their search results. Find one you like, and then use that as your guide to replicate. But here's the thing, we could add whatever we want inside here. We'll say I want to add some social media icons up in here. Now, it's going to look terrible because I'm not styling it up, but just want to show that, look, we could do so much. No, let me do the share buttons. That's better because that would make more sense. Let's update that. All right, and then we can see our search results. Let me go back to our blog. Let me put an element or to get a real idea of using it and how we'll look, and there we go. See, we could put whatever we want. So have fun with this, style it up. Now, next part, let's get rid of this random stuff right here. Let's get rid of this, like this is a page right here. We click on it, it's a page. I made a dummy page just to show what will happen. And as you can see here, a lot could come up inside the search results we don't want to show. All right, for this, let me go back to our dashboard and now back over here, if you are using a child theme, you could use a child theme and you would go to the theme editor, click on I understand, make sure it is the child theme. So we got this code snippet right here. All we gotta do is copy and paste this. So copy this right here. If you are using the child theme, navigate, make sure it is on the child, navigate over here to themes function. And then inside here, underneath this, this is a code that came in with the child theme so we don't change that. All we do is copy and paste this here below it, select on update. And then if we were to go back, let's go back to our blog page, type in Elementor. And you will see now nothing else but blog posts will show up. That's it. That's all you need to do. You don't need a plugin. There's many plugins that could do this but one is not needed. And if you don't want to use a child theme, let me go ahead and delete this right here. Let me click on update. And if we refresh it, we'll see now the other stuff comes up in here. Now, if you don't want to use a child theme or put the code in there and want to use something like code snippets, this does work on the free version. Well, right here you go to functions PHP and you could add in a new one. I've already created one right here and that is this only show on post. So I created this only show on post on PHP and then I copy and paste the snippet right here, the same exact snippet. Let's go ahead and save. Now, if I go to all my snippets, this is what I like about code snippet pro as well I could turn it off and on. Right now it's off. So I'm going to turn it on. Now it's activated. I'll go back here and refresh it. And now there's nothing there. All right, cool. That is how easy it is to keep just a blog post showing. Now let's do the same thing, but for products. Now we're going to do the same thing for WooCommerce. I want to make it so only the products are showing inside the search results because on the WooCommerce website, it makes more sense to only show products because that's going to help to increase sales. So let me turn it on. Let me go back here. I got my WooCommerce now turned on. And I'm going to go to my shop page right here. Now on the shop page, I have the same exact Elementor widget, the same exact default one. In fact, if I go over here, you can see I copied and pasted it basically from the blog archive. Let me delete that so it's out the way. And if I click on here, you see I have the search form. Nothing is set up in here. There's nothing. It was set up the style. There's really not much to do in here. Now if I go here and I type in Elementor and you'll see I got some Elementor products here, but I have some other random products like this kitchen sink right here. Let me go ahead and select on search. And we see blog posts are still showing because well, let's go back to our code snippets. This is on. So I'm going to turn this off. And if you have it inside your child theme, they just got to remove it or comment it out. And then I got another code snippet right here. And this is a search for WooCommerce products only. So if we copy and paste this, put it inside your child theme functions PHP, just like we did with the last code snippet, or we could put it in our code snippets plugin right here. And if we go in and you can see all I did was copy and paste this in here. Let's go down here and turn it on. And let's refresh the page. And now we only got the products showing up. So that is it. Is that simple? You can style it up and get creative as you like, but also you can optimize it so only the posts or products are showing and the users are searching for whatever they're looking for. Depending on the type of website, they're finding the right information. Now, if you have any questions or anything, drop them inside the comments. I'd be glad to help out the code snippets. You can find those inside the description. I'm really thankful for you watching this. And I look forward to being back with more Elementor and web design related content. All right, thank you.