Create a Masonry Search Result Page

by | Tips & Tricks

The default search results page is bland, to say the least. The tutorial below will show you how to create  a three grid masonry page with a search results title at the top which shows the search term entered, shadow on the normal state and *an inset shadow on hover. The page will look like this:

Create a Masonry Search Result Page

Of course the first thing is to create a ‘search module’ on your blog page via the Divi builder and adjust the settings according to your needs, particularly paying attention to the width on Desktop, Tablet and Mobile.

Create a Masonry Search Result Page

The module allows most settings to be amended to your needs and you can also alter the background colour of the input area by placing the below code in your child style.css:

/* Blog Search Module – Input background colour */
.et_pb_search_0 input.et_pb_s {
background: rgba(0, 255, 8, 0.1);}/* ammend rgba to your own needs */

Create a Masonry Search Result Page

Masonry layout

To create a three column masonry search page is simply a matter of applying some CSS which was originally provided by Elegant Themes in their Divi 100, day 78 blog. However, this has been tweaked to:

  • Provide a box shadow in the normal state
  • Provide an inset shadow on hover *
  • Fix the height of each ‘Title’ so the content lines up across the page on desktop
  • Fix the height of each grid so they line up across the page on desktop 
  • Change the title colour, font size & weight, line height and top margin of the title text
  • Hide the footer on mobile and tablet

You can use the original CSS provided by ET from the link above or use the amended CSS below:

* Update: The inset shadow on hover has been commented out of the above CSS as it was causing a flicker.

Note that the above code removes the sidebar. If you want to retain the sidebar, simply delete or comment out the CSS under the /* Remove sidebar on all search results & archive pages */ comment (lines 3 to 26). If you do remove the sidebar, the content of the individual blog seems to fill the space as if the sidebar still exists, even though it doesn’t display. To get the blog content to fill the full width, copy the below CSS to you child style.css. 

The CSS below also includes placing a background colour and a border around you post, removing the sidebar and vertical divider line and removing the meta-data completely. It also changes margins on the post so that on mobile it fills the majority of the screeen width. If any of these are not required, either don’t copy the code or delete from you child style.css if you have copied it all.

You can also add the following Javascript to Divi | Integration | Body to  make sure the pagination links are located in the right place.

Personally, I dont think pagination is necessary on the search result page and you can get around this by changing the number of results shown on the search page to a large number, e.g. 100, in Divi | Theme Options | General.

Create a Masonry Search Result Page

Congratulations, your search page now is a three column masonry layout. Play around with the CSS to meet your own needs, especially colours and height. Note: the height applies to desktop only because grid layout is stacked on mobile and so it is is unnecessary to equalize height.

Title and Search Term

The code for this was provided by Geno Queroz in his blog ‘Add a Title and Search Term to your Divi Search Results Page‘. You can copy the code and follow the method from his site or use a slightly tweaked version of his code below. However, please note his instructions are not for a 3 column masonry layout and will therefore push down the first column but leave the remaing two in their existing positions, so a tweak to change this bevaviour is required.

The first thing  to do is create a search.php template and add it to your child theme. You will need FTP access to your site to do this. In the main Divi theme (not your child theme) find the index.php file and copy it to your pc (drag it to desktop or wherever you wish). 

Create a Masonry Search Result Page

Then rename it ‘search.php’ and copy it back to the same folder of your child theme

Create a Masonry Search Result Page

Now go to your wp-admin | Appearance | Editor and you will see the search.php on the right hand column in your child theme. Open the file. Now this is where it varies from Geno’s instructions. At the end of line 5 (<div id=”content-area” class=”clearfix”>), hit return three times to insert three rows. In Row 6, type <div>. In Row 8 type </div>. It should now look like this:

Create a Masonry Search Result Page

Copy the code below and paste it into Row 7 between the opening & closing div’s

It should now look like this:

Create a Masonry Search Result Page

Apart from spanning the width of the page by placing the code in its own Div and above <div id=”left-area”>, the code also adds a colon after ‘Search Results for’ and changes the colour of the search term used to blue. You can change the text content and colour of the search term in line 10 if you wish . The colour of the other text, text weight and position (left, center, right) will be handled in the CSS below (which can be changed to your own needs) so in it’s existing form it will look like this:

Create a Masonry Search Result Page

Copy the CSS below to your child theme style.css:

Voila. You now have a 3 column masonry search page with shadow on the grids in their normal state, inset shadow on hover, of a fixed size so they line up neatly and with text and a search term at the top.

Create a Masonry Search Result Page

Signup for the iConnik quarterly newsletter

Thanks. You have successfully signed up

Share This