Basics of customizing search page results

Hi there,

lets tackle #1
You can use a Header Element to create that effect:

https://docs.generatepress.com/article/header-element-overview/

However Search Results are a special kind of page so to display the Title in the header element you will need to follow this topic:

https://generatepress.com/forums/topic/page-header-on-search-page/#post-1056795

Once thats done we can look at #2

Hi David,

Thanks for the quick response.
I created a header element called "Header_Search" but it does not show when I click on the search results. I don't know how to make the elements be linked with any actual pages.

I used the "Display Rules" settings and set the header to be changed for the "Search" Page I created, but it does not work.

I don't know how to make the "Search" page be the default search results page.

I did the first step of your notes, but I don't know how to proceed next.

OK so you need to add this PHP Snippet to your site:

function db_display_search_query() {
    ob_start();
    printf( __( 'Search Results for: %s', 'generatepress' ), get_search_query() );
    return ob_get_clean();
}
add_shortcode( 'search-title', 'db_display_search_query' );

This explains how to add your the code:
https://docs.generatepress.com/article/adding-php/

Then you can edit your Header Element and add this Shortcode to display the Search results title:

<h1>[search-title]</h1>

Then on Display Rules select Search Results

Hi David,

I follow the instructions but I still get the same results as before. Please see the screenshot below.
https://prnt.sc/tw5r97

I added the code snippets here:
https://prnt.sc/tw5rr9

They are activated:
https://prnt.sc/tw5rw1

I created a page called "Search Results."
I also created a Header element called Search Results.

I added the shortcode to the header element but I am not sure I placed in the right place.
https://prnt.sc/tw5shf

I am not sure if I've done everything the way instructed or there is something else that I need to do.

Can you share a screenshot of your Display Rules ?

Yes, please find attached: https://prnt.sc/twz1km

The Location is wrong. Do not Select: Page. There is a specific entry called search results

Thanks David, I fixed that.

I think that we can look at #2 now, and later come back to fix the padding.

Try this CSS to remove the content title:

.search-results .page-header {
    display: none;
}

And if you want to change the padding just for the search results then add this:

.search-results .inside-article {
    padding: 40px;
}

Works like a charm. Very good! Thank you!

Glad to be of help.