How to Create a Search Results Page Template in Divi

well hey Debbie nation and welcome to a brand-new divi use case livestream where each week we show you how to add new design and functionality to your Divi websites today we are going to be showing you how to build a search results page template using Dibby and the new Divi theme builder don't forget to check the video description for more on this use case livestream including a link to the blog post that goes along with it alright so let's go ahead and jump in and get started welcome everyone and I just want to make sure that you can hear me loud and clear give me a thumbs up in the comments in the chat excuse me making sure you can hear me okay hello let us know where you're from I am from the Houston area Houston Texas as for I'm live streaming streaming from today and looks like we are good and up and running all right hello Bertrand from France and looks like our audio is messed up possibly let me check that out okay so looks like we hear all about life says you can hear me loud and clear I think we're good then so maybe some of you are experiencing issues alright alright welcome alright so I'm gonna go ahead and jump in and get started I don't think there are any issues I just want to make sure double check all right looking good okay so here's a little just a preview of where we're going today here's a search results page template and this is basically the body area of the template this doesn't include the you know global header or global footer if you're familiar with the theme builder this is basically the body area and which makes up the search page or the search results page you can see up here is just a title this is a static title this is a search bar which you can use to further you know search the site for additional queries and things like that this is actually the dynamic content title of the page which will you know show up based on whatever you put in the search box or search form and this is the actual content and this is being pulled dynamically from your the blog posts that or pages that correlate to the search that you perform and and that's basically it's all of the main ingredients of a search results page template and let's see if I can search for another term you can see a nice little drop down of that title there which is a cool effect and so that's where we're going let's go ahead and jump in and get started all right looks like Facebook is having a hard time hearing me so I'm just gonna take one brief look at the reasoning behind that maybe I can see not sure what the case might be all right okay sorry it's just one person I think we're good all right sorry about that guys yeah make sure you all turn your your audio up on your end as well that will help out but thanks for the clarification Bertrand all right let's continue on and let's get started we're gonna go to the back end here or actually yeah our WordPress dashboard here and let's go to Divi so I'm gonna go over here to Divi and then go to theme builder and as you can see I've already have my search results template in place ready to go and live on my site and if I go in and edit it using the template layout editor you can see that this resembles the preview that I just showed you before so this is what we're gonna build but for now I'm going to disable this one and I'm just going to do that I'm just going to unclick the right here where I assigned it on the search results page I'm going to unclick that and save it alright and then I'm going to create a new one so this is I could of course delete it and start from scratch you just want to keep it there for reference but to create a new one starting from scratch let's just go ahead and click add new template and since this will be a search results page template I need to go and assign it to my search results page right there and click create template simple enough alright so there it is right there my template it's kind of a blank slate but it has my assignment there search results and I don't have any global headers or footers on this website here so basically because I'm just concentrating on the body area of this template I can of course go in and create my global header and footer or even a custom header or footer for my search results template if I wanted to and let's go ahead and create a new custom body so I'm gonna click add custom body here and then I'm gonna click build custom body because I want to build it from scratch and this will give me the option to again build from scratch or choose premade layout I'm gonna click build from scratch and then to get things started you going to create a one column row and I just want to take my notes here for a moment don't want to skip any steps alright very good so I'm going to create a one column row and this will kick start actually just for the first thing I'm gonna add is a divider module which is purely going to be a design element so just added the Vidor module here and let's open up the design divider settings and I'm gonna add a line color so I want to keep my divider showing and then go to my line color here and let me go ahead and blow it up for you so you can see my line color just gonna paste it in and this is just this is all gonna be in the blog post that goes along with this they came out this morning if you want these codes and things like that and let's go ahead and make my line position bottom there and let's do divider wait where did it go yes okay sizing let's go divider weight would be five pixels and then the z-index we want to adjust as well so let's go ahead and take it off of this magnification there you can see my divider line there and let's go to the advanced and go to visibility and then this is where I'm going to update my Z index and I'm gonna make it negative one because I want it to hide behind a module that I'm going to add right after this which is a text module so I'm just gonna set that and next I'm going to add a text module so I can go ahead and add my new module here and as you can see I resize it so it's kind of difficult to hover over so let me go ahead and deploy my wire whew mode which I can do by going to my settings menu here and I'm just gonna click add new module right underneath my divider module and add a text module there you go now I'm gonna go back to my desktop View mode and for my body I'm just gonna add an h1 heading here called search results and this is going to be a static element in other words this isn't going to be dynamic for this example you could pull in the regular default title and I'll show you what that is in a moment it's actually called post archive title for the page and in this page template the search results page template that would show basically the text results for and then the whatever search term you used but I'm going to hold off on that and just give it a static title here all right and let's go ahead and add some styling I do want to add a white background because I want to hide that divider line behind it whenever we pull it down with some negative margin so there's my background and let's go ahead and do design tab let's go to my text alignment which needs to be centered there you go and let's update the header font I'm gonna let's just update the font to Muhly and make it font weight heavy hope I didn't select it there you go nice and bold let's go ahead and use that same color we use for the divider line should be in my recent colors there and let's go ahead and change our heading text size we're gonna use 70 pixels for my desktop and let's go ahead and open those other views the tablet let's go ahead and make it 40 and for a phone let's do 22 alright very good so my heading line height let's go ahead and bring it up some actually to make sure this is centered I'm just gonna give it the same actually one that's 80 pixels and the reason why I'm doing that is because I want to know exactly how high the height of this text module and it's also going to Center that text in the middle there of course this wouldn't work if you're gonna use a title with you know that will eventually break into two lines but in this case it's just kind of a little hack to make sure it stays centered there and then I'm just gonna use my max width let's go to my sizing here and I'm gonna set my max width to 60% and I actually need to make sure the module alignment Center go back to my desktop view all right and also let's do a min height of 80 pixels again this is to make sure it's that text stay centered and that I can predict the height of that text module better all right that does it for my text module last thing I want to do is give me our give it some spacing I'm gonna bring it up some using- top margin so I'm going to use those about negative 75 pixels kind of taking into account the size of the divider module that should Center my search results title kind of with this divider line so it has that nice design of the title with the lines on either side I'm going to save that out now we can add our search module so let's go ahead and click and add another search module here alright for my search module I can add some placeholder text here let's go ahead and use you know search our blog or something like that maybe with a few dots after it and then we're gonna do the there's actually some exceptions over here so if I blow it up and scroll down so you can see there are some exceptions like to exclude pages or include excuse excuse me or exclude posts and this is further your search results and this would you know give you a little bit more control over what you want to see on this search form or in the page whenever you enter a query in the search form for example if you were using this to build a for specifically for your blog page you might want to exclude the pages and only have the post show in the search results so that's a common usage for that you can also just exclude categories like if you were building a search page search results page template for a specific category or something like that and you want to customize it that way so you have some exceptions we're actually just going to leave it as is not going to mess with it too much here just want to make you aware of that for the search form but I do want to add some design elements let's do let's go to my design tab and let's do the placeholder field here options the placeholder color let's go ahead and give it that same blue and let's do the field background color is white let's choose a field font of montserrat field text size let's do 20 there we go the button and border colors let's do the that same blue so let me go back there's my oh there it is button in border color and let's make sure that button text color is white and let's increase the size a bit to 18 pixels and then for my sizing I want to make sure it is has a width of a hundred percent but I want to give it a max width of 300 because I don't want it to be too large and then I want to make sure and Center that alignment there we go and let's give it a rounded corner here of let's do 8 pixels all the way around and that pretty much takes care of the design of our search results form or module and this row that all of these elements are sitting in I do want to update the padding on that one to get rid of the bottom padding so just set that the zero pixels all right so now we're ready for the body section of our template and I'm just gonna quickly pause make sure we don't have any questions coming in the chat here it's been a while since that look so let's see so we got a question from neo excuse me this search page is an endpoint page for the home page alright so this search page will basically replace like in a let's say you have Divi installed fresh on your website like the default settings and everything and I go to my my page let's just go to the home page so by default it will kind of look like this right your blog your most recent blog posts will show on the home page and I can use the this the default WordPress search widget here that's up here this one if I were to search business on this one it will show our search results page template that we just built if I used Debbie's default heading up here the search heading you can see that it's using the same you know functionality there it would pull the same results so basically you're using the search forms throughout your site and it will always come to this designated search results page template hope that clears it up okay so Joey asked asks can products be shown with this I actually knew this question was probably going to come up the answer is no there is no capability of the default search results form in WordPress and in Divi to pull in products by default you will need to use a plug-in for that at the moment so sorry about that but I think there's I want to say there's a woo woo Advanced Search plugin I think is what it's called that would probably do that for you but I think it's just basically gonna be replacing your search module but that's a good question yes uncle search uncle social yes you can make a search results page but not a WooCommerce product category page I think I understand your question did you mean to say product search results page or product category page or either actually so there may be a limitation there if and I'm sorry for that frustration but yes there's sorry about that but this is going to pull in your page and post results as well or for WordPress gotcha so yet the product category page there are limitations for that as well when WooCommerce for category pages might have something to do with the shop module not being able to pull in the products accordingly I don't know I have to check on that I need to look further into that but if that is a limitation I'm sure we will get that resolved in the future thanks for bringing it up good questions all right let's go back to our go ahead and jump over to Facebook okay we're good all right I'm gonna continue on let's see I think I want to go to my next section of the page and we're pretty much almost done this really doesn't take long to do guys there we're gonna create a new section here and make it a regular section and another one column row and then we're going to basically add a blog module I'm sorry not a blog module not not yet I do want to add that little nifty title section so to do that I'm gonna use a text module so I'm a text module here and this is where I want to pull it in that dynamic content that post archive title so I'm gonna erase that and click on my make sure you can see this zoom in here and if I hover over the my body content area here for my text module my dynamic content icon pops up I'm gonna click on that and then I want to select post archive title all right so now that element is in place and it'll show right there now I can just style that element using the built-in settings here and I'll do that quickly let's go ahead do the text font update that make sure it's a heavy font and let's do the color we want to make it a nice pink color here make sure it's nice and bold so people can see the results or the query they searched for now let's do the text color let's just make sure it is excuse me the text size make sure it is 20 pixels let's change the alignment to center and I think that's about it I do want to add a quick animation slide animation so that it kind of drops down from the clouds if you notice on the final result if i refresh the page kind of drops down from the clouds there it's just something fun maybe you want to add I'm gonna add it here just make sure and select the animation direction as down and if you want to increase the animation intensity remember that you can actually go past 100 percent and I'm actually going to use 250 percent that makes it come from a greater distance basically it increases the intensity of the animation so it it basically comes from farther away alright let's go ahead and save our settings and here's our last row we're gonna add and let's go ahead and give it a 1 column row and this is where we're at our blog module alright I've been going a really long time I just want to make sure if you are just joining it as just joining us that where I want you to welcome let's start over I want to welcome you to this week Divi use-case livestream and today I'm showing you how you can create a search results page with Divi using the new Divi theme builder and we are right now at the stage where we're pulling in the dynamic content for those search results where it's gonna actually show the posts that related to the search and to do that we're using the blog module so I've added a new blog module and here is the key to this functionality and this is going to be the same for your what's it called like category pages and things like that oops you no need to get out of here there sorry about that so I'm on a section now let's go back to my blurb here so my blurb settings there's a item called posts for current page and I need to make sure and select that as yes the posts for current page basically tells the template that you're gonna be pulling in the content that is related to this actual page template in this case it's going to be search results so it's basically saying we want to pull in the blog post that gets the blog posts that are searched for not just a static blog posts or dynamic blog posts from the blog so make sure that's selected and make sure and update any of these other you know post count things like that as well let's just go ahead and I like to do nine for post count just because I'm gonna put it on a grid format and it's three it's a three column row so kind of keeps things even so it's 3 3 and 3 and then the excerpt lengths I'm gonna shorten that I like to do about 120 you can actually update the elements just like you would any other blog posts for example if you don't want to show the author in the meta data you don't have to let's jump over your design and the layout I want to change from full width to grid and it's going to make sure and update our title font to match our our template design let's make it altra bold and let's go ahead and update the color here looking good I want to increase the size of my tech title text it's about 24 also want to make sure and update the line height it's a little close together there you go alright and we got a lot of options here so I think what I want to do is let's update the border and here I have the grid layout rounded corners and the grid layout border styles so I want to just change the grid layout rounded corners here I'm just gonna increase it get a nice rounded corner on each one of those cards and lastly let's go ahead and take out the border width because I don't want a border at all around those but I do want a box shadow so I just had one of those box shadows and that's pretty much it let's go ahead and last thing don't forget about your pagination it's going to make that text color nice and pink let's make sure we can see it there it is down there and increase it to about 20 all right so that basically does now all my functionality is in place I have my my blog module pulling in the search results and I have my backup little search form that I continue searching with if I want to and my dynamic title here which is going to drop down the only thing left to do is a few little you know design items that are of course optional for example I'm going to add a divider to this section here let's go ahead and do that jump and give it a top divider and I'm gonna make it the clouds here never really use the clouds very much let's use that one let's go ahead and flip it and let's go ahead and give it a white color can't really see it but we'll change the color of our section so you can the divider let's see that looks good right now it's on underneath section content I want it on top see how it's hiding my my title my dynamic post archive title there and I think that's it let's go ahead and give our section a background color of just a very light gray there you go now you can see the clouds and let's go ahead and add some padding at the top let's increase it to about 100 pixels that brings down our title a bit let's go ahead and save those settings and let's check out our final result right now it's pulling in our old template so let's go back to the theme builder go to my dashboard go to Divi theme builder and oh sorry I didn't save my changes this is very important step guys you have to save your changes so save your changes just like you would in a normal Divi builder in a page using this menu here or just clicking command S or ctrl s and you also want to make sure and do that before you click the X at the top right to close it out now you see I have two here oh it is this is the new one that's being pulled in I just got to make sure and save my changes and we're good to go let's go ahead and check the visit the site and there's my default home page let's go ahead and enter a search query of business there you go and it's not pulling in anything that's not good alright let me make sure I've updated it and hold on alright let's go back and it looks like I saved a version of it that did not update so that's my fault let's go back and get that version all right so here here's the right version let's just go ahead and make sure that gets assigned so we can see the results correctly all right I just I exited out of it without saving guys that's my fault all right make sure that gets all right save it and I love making mistakes live it's the best all right now let's try that again all right there you go go ahead and refresh that again you can see that little title drops down and also it's pulling in a page as this is a page and these are posts and so the functionality is there the search form can be used here on the page as well search for coaching and there's are posts on coaching things like that and then our dynamic title is updated as well so there's our functionality let's go ahead and check out what it looks like on mobile I'm just gonna cheat here and inspect it on these devices here's my phone display and let's go ahead and do a tablet maybe not that one it's probably too big there you go so it goes to two columns on tablet and that about does it let's go ahead and check in on some questions maybe before we end today all right so let's see one more question I think from Uncle social how come the page title is search results for but the that dynamic content title is just results for I'm sorry I don't quite understand what you mean by that the the current page title is search results and this is the one with the h1 tag and this is the dynamic it's the post title excuse me post archive title dynamic element but this is I didn't give this one the h1 tag because I just wanted to use it as a secondary content element on the page but if I wanted to I could give this one the h1 element and make it the actual main title of the page it's just up to you the page title oh sorry page title in the browser oh oh I didn't you know what I mean even those notice that the the page title is showing as search results for coaching and this dynamic element is only results for coaching that is a great question and something I'll have to look into and I get back to you on that but but that's a good that's a good catch uncle social I like to look into that all right see if I have any more questions this tutorial Steven this tutorial will be made public on our YouTube channel and made available on the blog post later on so check back you can always view it and subscribe to our YouTube channel so you don't miss out on any future tutorials as well but yes they will be available all right looks like that about does it all right that's all I got for you this week guys thanks for tuning in please be sure to subscribe to our blog newsletter our YouTube channel and like us on Facebook that way you don't miss out on any future freebies we'll be throwing your way and also any future live streams our next live stream will be this Friday at 3 p.m. Eastern Time the WP roundup with BJ and also we'll be back here next Tuesday with another use-case live stream so you'll want to make sure and check that out as well you can also well I'm gonna leave it at that and thanks again for watching y'all have a great day see you again next time you

Channel: Elegant Themes

Views: 12,502

Keywords:

Id: S6s3hK79o7A

Length: 41min 43sec (2503 seconds)

Published: Tue Nov 12 2019