How to Create a Directory or Listing Style Homepage with Divi’s Search Module – Divi Nation Short

Posted on May 6, 2016 by in Community | 36 comments

How to Create a Directory or Listing Style Homepage with Divi’s Search Module – Divi Nation Short

Whether you want to create a directory or listing style homepage or you just want to put search front and center–Divi’s search module will get the job done.

In this Divi Nation Short, I explain how you can achieve the classic “big search box” look using a standard section and Divi’s new(ish) search module, which was added back in Divi 2.6.

How to Create a Directory or Listing Style Homepage with Divi’s Search Module

Due to frequent requests coming in via email and comments, I thought it high time we created a tutorial on how exactly Divi users can achieve a directory or listing style homepage where the focus is a large search box call to action. That’s exactly what you’ll get in the video above. Or, if you prefer text and screenshots, see the summary below.

Subscribe To Our Youtube Channel

All Subscription Options:

Summary: Creating a Directory or Listing Style Homepage with Divi’s Search Module

Divi-Search-Module-Final-Example

When creating directory or listing style websites, search is pretty important. That’s why it’s become something of a trend to put that search functionality front and center on your main landing page. Using Divi’s search module (and other builder elements) this is quick and easy to accomplish.

Above you can see the final result of my own effort. I created a home page for a fictitious design jobs website and created a homepage whose primary call to action is for visitors to search the job listings.

Divi-Search-Module-Builder

On the backend you can see that my standard section consists of four modules: an image module for my logo, a text module for my descriptive copy, a divider for some space at the bottom, and of course my search module–which I’ve highlighted above.

Divi-Search-Module-Settings

Within the settings for the search module you have the ability to each element that makes it up. In addition to adding some custom placeholder text, I chose to place make my search box big and blocky. This was done by adding some extra padding to expand the input field–as you can see above.

Wrapping Up

Well that’s all for this Divi Quick Tip. I hope you learned something new and valuable to stick in your toolbox. If you have any questions about what I went over above please feel free to drop them in the comments section below. You can also request new Divi Quick Tips for me to cover in the future.

Premade Layouts

Check Out These Related Posts

Divi Meetup Network Update: June 2019

Divi Meetup Network Update: June 2019

Posted on July 2, 2019 by in Community

Hey Divi Nation! It’s time for another update on our Divi Meetup Network–and boy do we have a lot to cover this month! We’ve seen a lot of growth lately and lots of new interest that we’re confident will continue to fuel growth for many months to come. And we couldn’t...

View Full Post

36 Comments

  1. You should have named this post ‘How to Create a Big and Blocky Search Box’.

    Your title lead me to think I was going to see how to output search results in a list or directory format.

    Now THAT would have been interesting!

      • +1

        • I equo that !!

    • Unless you are posting all of your listings as blog posts or pages, this requires custom functionality not native to WordPress or Divi. Typically, you will want to pair the type of directory/listing you want to create with a plugin made for that purpose.

      Here is an example of a real estate listing plugin: https://wordpress.org/plugins/easy-property-listings/

      • Hey Nathan, another great video for Divi and inspired me to finish one I was putting together from way back 😀

        I am utilising both Divi and WooCommerce to create the directory effect and even though it is still a work in progress, seems to do the job.

        Thanks for the kick along.

        • Hey Rob, it seems like very interesting what you’re doing with Divi and Woocommerce.

      • Do you know of any for recipes?

    • Misleading title!

  2. cool idea, but it would be nice if there was a demo to play around with

    • Thanks Pedro, if I create anything in-depth about directories/listings I’ll see if we can provide a live demo for people to play around with.

  3. Not enough imo… Needed to go further and showcase how to deal with serch results.

    • That might make a good follow up post. This particular post, as someone mentioned above, was more about how to get that “big search box” look–which is what people had been requesting via email and comments.

      The search results are a topic for a longer piece I think. There are many ways to approach them.

      You can go the route of adding a third-party plugin for whatever type of listing or directory you’d like to create. Most of them come with their own search functionality–such as filtering, etc.

      Or, you could create your own custom post type for your listing/directory and then add it to your child theme’s functions.php file using the code snippet below. Then it will appear in the search results using the current Divi search module (we’re working to adding CPT to this module in the future).

      Get snippet here: https://gist.github.com/lots0logs/d6e8ff16beec201eb3ec

      And finally, what is probably the most round-about way to manage your results, is to create a specific blog category for each type of listing. With Divi’s builder and library you could easily make a “template” for each listing type and then control which categories are shown right from the search module’s general settings panel.

      Hope this helps. If enough people request it I can create a regular blog post to follow this post up where all of this is spelled out a bit more explicitly.

      • Yes please I’d be interested in this.

  4. Great to see the Divi Search however does this use the default WordPress search engine?
    Never been a fan of this in the past hence however did see this on the Elegant Themes Blog late last year:
    http://www.elegantthemes.com/blog/resources/upgrade-your-site-with-the-best-search-plugins-for-wordpress

    Does the Divi Search Module work better than WordPress default or are other plugins the only option for improved search results…just out of interest 🙂

    Great Divi short by the way. Pete 🙂

    • Divi uses the default WordPress search. However, you can install one of the plugins in that post if you’d like to improve it.

      • Hi Nathan,
        I was looking into those other plugins however I like the look and styling of the Divi Search Module. Trying to get one of those others to look as good while improving search is my concern 🙂

        • Hey Pete, if you install a plugin like Relevansi it simply works in the background improving Divi’s search via the Divi widgets and Divi search module. So you get the best of both worlds!

          • Hey Nathan.
            Many thanks, you’re a star 🙂

            Found a comment somewhere saying the same thing and thought it was worth giving it a go.

            This on my list to sort later. Have a great Sunday 🙂 P

  5. Terrific! That was so clearly explained. Thank you. I have a request: Just before watching this I was frustrated working on trying to make equal height columns. I’d had this problem before and went back to my old support ticket. The answer was:
    EQUALIZE COLUMN HEIGHTS option makes columns the same size. It doesn’t affect the modules inside those columns. So you should use the custom code for adjusting the module size.

    BUT it didn’t help me in the long run to be just given the code to put in one of the modules.
    So, Nathan, Can you give instructions – how do I know WHICH of the 2 columns I should target — and how to get & know which height to apply to WHICH module? Let me know if you need a better explanation from me.
    Again, thanks so much!

    • Thanks Karen, I’d be happy to help. I’m familiar with your problem but it might be easier for me to help with if you send me a link to your specific example. You can email me at podcast at elegantthemes.com.

  6. Thanks for the video!

    This module has an option to in/exclude pages, posts and post categories. How come projects are – once again – ignored? Sometimes it gets a bit frustrating that some great modules are only designed for posts (post title, post slider) and can’t be used for projects. Especially since projects also are native to Divi. They are just another post type with categories and they don’t have much other project specific bells and whistles.

    In one of the other comments you replied that this search module uses the WP native search function, but that isn’t entirely correct. The Divi native search box also searches through projects while the Divi search box doesn’t.

    I would love to see that all Divi modules that have settings for posts can also be used for projects.

    • Hi John-Pierra,

      Custom Post Types, including our own Projects post type, will be included in the search module in a future release. That’s definitely something we want to address.

      Best,

      Nathan

  7. We need more of these!

  8. Looks like Divi just added another style to its portfolio, thanks Nathan. Can you add demo link for this style in this post, as it can be helpful for the customers looking for this style ?

  9. Not related to the search box. How do you create the intro animation or preloaded preceding your talk? Can this be created in css? I’d really appreciate your advice on this one.

    Asher

    • The motion graphics in the video are created using Adobe After Effects. We actually bought some motion graphic packs from Envato and modified them for the show.

  10. Cool thing to do! Nice tutorial. I’m using Divi theme and I’m still on the process of studying the layouts particularly in creating a post ang pages.

  11. Thanks for updating us about this feature.. Divi is just getting more better

  12. I never knew that there was a Search Module added ! 😀 Thanks for the information and the cool top Nathan. Can a short-code be used to get the Serach box anywhere ?

    I wanted to use this within the Full Width Header

  13. Cool thing to do! Nice tutorial. want to thanks for such a nice feature

  14. Thanks Nathan, as always your tips are useful. Last week I tried to create a listing site with divi and search box, I did it by try and fail but this podcast help me.

  15. hello
    how to change button “Search” for another text?

Join To Download Today

Pin It on Pinterest