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

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

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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #2337855

    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


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

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

    Customer Support

    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




    Customer Support

    You’re welcome


    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.


    Could you help me with this?


    Customer Support

    You can use a 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


    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?



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

    Customer Support

    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.


    Thanks Fernando works perfectly.

    Customer Support

    You’re welcome Jin!

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.