[Resolved] How to design a [3 by n] search results page of your posts / pages

[Jin]

I’d like to design a [3 by n] search results page to show my posts / pages. More specifically, I’d like it look something like this with only the title and the featured image.

I’ve looked at the docs and know that you can customize your search results page by going to “Appearance” > “Elements”. I’ve only been able to show one page / post per row.

I’ve tried to put this into a grid but for some reason I then only get one page / post when I search for something. When I don’t use a grid, I get multiple pages / posts.

Here’re some screenshots with comments to show what I’ve done:

– What I Currently Do
– Current Search Results Page

– What I Tried
– Result Of What I Tried
– Ideal Search Results Page That I’d Like To Have

[Jin]

Please note that when I say [3 by n], I mean:

– n refers to the number of rows
– 3 pages / posts / results per row

[David]

Hi there,

so a Block Element – Content Template will ONLY replace the post card design.

To create the columns:

1. Enable the Blog Module in Appearance > GeneratePress
2. In Customizer > Layout > Blog, enable Columns and set them to 3

https://docs.generatepress.com/article/blog-content-layout/

[Jin]

Thanks.

[David]

You’re welcome

[Jin]

Hi David

Could I ask. I’d now like to add a search bar to the search results page. I would do this in elements but because of the settings in customizer I don’t know how to implement that.

Example

Could you help me with this?

Thanks

[David]

You can use a Block Element – Page Hero:

https://docs.generatepress.com/article/block-element-page-hero/

In the element add a Container Block, which you can give some padding etc, and then in the Container Block add a Search Block.

You can then set the Elements > Display Rules > Location to: Search Results

[Jin]

Thank you David it worked perfectly.

Last question:

I’m trying to get the design for the Search Results Page to look like the Courses Page (links below).

I’m pretty close but need to do two things:

1) Make the images the same fixed width and height
2) Make the image rounded

I couldn’t make the image rounded. The dynamic image block doesn’t seem to have that option like a regular image block would.

How can I do these two things?

Thanks

[Jin]

Forgot to mention. This is my element’s settings.

[Fernando]

Hi Jin,

Can you try using a GenerateBlocks Image Block instead? Reference: https://docs.generateblocks.com/article/image-overview/

Through this, you can set the Height and width of the image, and set the Border radius as well.

[Jin]

Thanks Fernando works perfectly.

[Fernando]

You’re welcome Jin!

[Author]

Posts