[et_pb_section fb_built=”1″ _builder_version=”3.22.3″ custom_margin=”-5px|||||” custom_padding=”3px||4px|||”][et_pb_row _builder_version=”3.29.3″][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”4.4.3″ custom_margin=”||-1px|||” custom_padding=”||0px|||”]
Introduction
Do you feel that search results page looks different than your theme?
On this tutorial you are going to learn how to enhance Search Results page and match your website's look by using Divi template.
When is this method useful?
1 – This method is useful if the Search results page design is not consistent with the other pages on your website.
2 – You want to add more content in the Search page but you can't do that unless you hard-code the search.php file.
3 – No need to have programming experience.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.29.3″][et_pb_column type=”4_4″ _builder_version=”3.29.3″][et_pb_text _builder_version=”4.4.2″ custom_margin=”||-1px|||” custom_padding=”||0px|||”]Requirements
1 – Divi theme or Divi Builder
Setting up the Search Results Page Template in Divi
1 – Go to WordPress Dashboard navigate to Divi > Theme Builder.
2 – Click the “Add New Template” area.
3 – On the Template Settings > select the Search Results checkbox option. Then click Create Template
4 – The Search Results template will be created. You can decide if you want to edit the Header, Body and Footer. For our example we will edit Body only by clicking on Add Custom Body.
Edit the template as you need.
On the example below we have added a separator, a page title, a dynamic keyword that shows what has been used to search and finally a blog element that shows posts for current page.
Steps to recreate the Search results page example.
1 – Add a new Row
2 – Insert a Divider module inside the new row.
3 – Add a Text module below the divider and a title “Search Results”
4 – Add another Text module and click the Dynamic Content icon on the right:
5 – Select Post/Archive Title from the options.
The 5th step will automatically show which keyword has been used to search. For example if I used keyword “web” to search this is how it will look like:
6 – Finally, the most important part, add a Blog module
7 – Enable Posts for Current page option.
As mentioned previously you can customize the Search results page as you need, the steps above are just an example.
[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row _builder_version=”3.25″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” custom_margin=”-6px|auto||auto||” custom_padding=”1px||11px|||”][et_pb_column type=”4_4″ _builder_version=”3.25″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.4.2″ custom_margin=”||-1px|||” custom_padding=”5px||0px||false|false” z_index_tablet=”500″ text_text_shadow_horizontal_length_tablet=”0px” text_text_shadow_vertical_length_tablet=”0px” text_text_shadow_blur_strength_tablet=”1px” link_text_shadow_horizontal_length_tablet=”0px” link_text_shadow_vertical_length_tablet=”0px” link_text_shadow_blur_strength_tablet=”1px” ul_text_shadow_horizontal_length_tablet=”0px” ul_text_shadow_vertical_length_tablet=”0px” ul_text_shadow_blur_strength_tablet=”1px” ol_text_shadow_horizontal_length_tablet=”0px” ol_text_shadow_vertical_length_tablet=”0px” ol_text_shadow_blur_strength_tablet=”1px” quote_text_shadow_horizontal_length_tablet=”0px” quote_text_shadow_vertical_length_tablet=”0px” quote_text_shadow_blur_strength_tablet=”1px” header_text_shadow_horizontal_length_tablet=”0px” header_text_shadow_vertical_length_tablet=”0px” header_text_shadow_blur_strength_tablet=”1px” header_2_text_shadow_horizontal_length_tablet=”0px” header_2_text_shadow_vertical_length_tablet=”0px” header_2_text_shadow_blur_strength_tablet=”1px” header_3_text_shadow_horizontal_length_tablet=”0px” header_3_text_shadow_vertical_length_tablet=”0px” header_3_text_shadow_blur_strength_tablet=”1px” header_4_text_shadow_horizontal_length_tablet=”0px” header_4_text_shadow_vertical_length_tablet=”0px” header_4_text_shadow_blur_strength_tablet=”1px” header_5_text_shadow_horizontal_length_tablet=”0px” header_5_text_shadow_vertical_length_tablet=”0px” header_5_text_shadow_blur_strength_tablet=”1px” header_6_text_shadow_horizontal_length_tablet=”0px” header_6_text_shadow_vertical_length_tablet=”0px” header_6_text_shadow_blur_strength_tablet=”1px” box_shadow_horizontal_tablet=”0px” box_shadow_vertical_tablet=”0px” box_shadow_blur_tablet=”40px” box_shadow_spread_tablet=”0px”]Results
Voila! Your search results page has been enhanced and looks similar to your website's design! You can always edit this template by adding or removing content as needed. Furthermore, there is no need to have programming experience to do this!
What do you think of this tutorial?
Article Title: How to use Divi for Search results page
Short Description: On this tutorial you are going to learn how to enhance Search Results page and match your website’s look by using Divi template.
Author: Ardian Lumi
Publisher - Orgnization: MemberFix
Publisher Logo: 
User Review
( votes)[/et_pb_text][/et_pb_column][/et_pb_row][et_pb_row column_structure=”1_4,3_4″ make_equal=”on” _builder_version=”3.25″ custom_margin=”||30px|” custom_margin_tablet=”” custom_margin_phone=”” custom_margin_last_edited=”on|phone” custom_padding=”0px|0px|0px|0px” border_width_all=”1px” border_color_all=”#2ecc71″][et_pb_column type=”1_4″ _builder_version=”3.25″ background_color=”#2ecc71″ custom_padding=”|||” custom_padding__hover=”|||”][et_pb_blurb use_icon=”on” font_icon=”%%49%%” icon_color=”#ffffff” _builder_version=”3.0.91″ custom_margin=”30px||5px|” custom_padding=”|||” custom_css_blurb_image=”margin:0;”][/et_pb_blurb][/et_pb_column][et_pb_column type=”3_4″ _builder_version=”3.25″ custom_padding=”30px|20px|20px|0px” custom_padding_tablet=”” custom_padding_phone=”0px||30px|20px” custom_padding_last_edited=”on|phone” custom_padding__hover=”|||”][et_pb_text _builder_version=”4.0.9″ text_font=”||||||||” text_line_height=”1.6em”]
Now let's hear from you!
Are you using Divi for your Search page results?
Is this article helpful for you?
Tell us in the comments section below.
[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]
7 Responses
Good work. How can we hide meta in results without resorting to hiding divs with css?
…and include a”Read More” at the end of excerpts in the results.
Thank you.
Do you know how can I display the results within the page where my search bar is located?
Hello Anthony,
You need to use Divi Ajax Search add-on for it: https://www.elegantthemes.com/marketplace/divi-ajax-search/
Thanks for this very handy tutorial !
Is there a way for the search function to only give results for the page it’s on?
I’ve followed these instructions – nice and simple, thank you.
But I am not getting anything on the results page other than the global header and footer. There are no results showing, not even the results heading.
Any suggestions on how to fix this please?