Divi Product Highlight: Divi Search Helper

Posted on September 2, 2024 by Leave a Comment

Divi Product Highlight: Divi Search Helper
Blog / Divi Resources / Divi Product Highlight: Divi Search Helper

Are you looking for a better way for users to search your Divi website for content? Then, you should try out Divi Search Helper. This amazing plugin supercharges the standard Divi Search Module by adding powerful features to the existing Search Module. In this post, weโ€™ll walk you through the pluginโ€™s features and show you how to use it!

Letโ€™s dive in!

What Is Divi Search Helper?

Divi Search Helper

The Divi Search Helper plugin adds many additional features to the WordPress search bar. Created by the developers at PeeAye Creative, Divi Search Helper cranks up the power of your Divi search, making it super easy for visitors to find what they need without digging for it.

The best thing about Divi Search Helper is that you donโ€™t need coding experience to customize it. Youโ€™ll have 65 new settings and features directly integrated within the Divi Builder. You can define which post types should be included in the search, how search results are displayed, and more.

Get Divi Search Helper

What Are The Features of Divi Search Helper?

As mentioned previously, Divi Search Helper adds 65 new settings and features to the existing Search Module included with Divi. Letโ€™s dive into these features so youโ€™ll have a better idea of what you can do with it.

Note: Currently, Divi Search Helper doesnโ€™t allow previewing some of these features and settings within the Visual Builder. However, PeeAye Creative promises these updates in future releases.

Enhanced Search Field Design

search field settings

Div Search Helper provides plenty of options to make the search field pop. You can add cool icons to make the search field stand out, or you can add an icon to clear the search field, making it more intuitive for all users. Divi Search Helper also provides a wealth of customization options, including the placeholder, field, and field focus, the font, and various settings for text alignment, size, and line height.

Search Button Tweaks

customize search button

Divi Search Helper allows you to customize the Search Moduleโ€™s button with various settings. You can choose the button type to show an icon, text, or both. You can also update the text on the button to display something other than search. The plugin also allows you to display the button on the left or right and customize the look using Diviโ€™s design tab.

Select Custom Post Types To Display

custom search criteria

One of the biggest advantages of Divi Search Helper is its ability to display different post types, like posts, pages, projects, products, or events. Unlike the standard WordPress search, which shows results from posts, pages, and excerpts, Divi Search Helper lets you choose exactly what you want to include. With this plugin, you can create custom search bars for specific areas of your site, like your blog, a portfolio page, or custom search results pages. You can drill search results further by specifying specific post or project tags or categories, custom meta, or specific keyword criteria.

Custom Search Results Settings

Ajax search results

Divi Search Helper provides search results in one of two ways: a search results page or an Ajax dropdown menu. There are also various ways to customize how search results are displayed. Options include search results order (publish date, alphabetically, relevance, or random), how many results to show, and pagination link text. As an added bonus, you can customize the search results heading text, choose whether to display results in a new tab and determine whether to include images. These features improve the standard WordPress search options dramatically.

There are plenty of design settings, too, including customizing the background, nav links, padding, scrollbar settings, and border.

How To Use Divi Search Helper

With a solid understanding of how Divi Search Helper works, letโ€™s dive into the fun part. Weโ€™ll walk you through installing and customizing the plugin to meet your needs.

Install Divi Search Helper

The first step is to install the plugin. Start by navigating to Plugins > Add New Plugin. Click the upload plugin button.

add Divi Search Helper

Next, click Choose File and upload the pluginโ€™s zipped folder into WordPress. Click the Install Now button to continue.

install Divi Search Helper

Finally, click Activate Plugin to install Divi Search Helper.

activate plugin

Add The Divi Search Module To A Page

With the plugin installed, letโ€™s look at what you can do with Divi Search Helper. For this example, letโ€™s assume you want to create a search for a custom post type called coffee. Weโ€™ll use the Divi Assistant plugin (read more about that here) to rename the projects post type to coffees. Once your new post type is created, you can make a custom search for it!

Weโ€™ll add a search to our home page for people to search for coffee. Enable the Visual Builder and create a new section. Next, select the Search Module.

add Divi Search Module

Configure The Divi Search Module Content Settings

The Search Module has plenty of settings to configure, so weโ€™ll walk you through each step. Start with the Search Field settings group. Here, you can configure the input placeholder from the default search term. You can also choose an icon and its location.

search field options

The Search Button settings group includes options for showing or hiding the button, adding custom text, and controlling the buttonโ€™s positioning.

search button settings

The next settings group, Search Criteria, allows you to choose the content you want to display. In this case, weโ€™ll select coffees. You can also specify the search keyword criteria, such as title, excerpt, and content. Thereโ€™s also a section for custom meta, which allows you to add custom meta keys separated by commas.

search criteria settings

Finally, the Search Results setting group controls the search results method from two options โ€“ Theme Builder search results page or Ajax search results dropdown. Other parameters include search results ordering, the number of results per page to display, and pagination link text. You can also set a custom heading for your search bar and select whether you want the search results to appear in the same or a new tab. One cool thing you can do to make your search more dynamic is to show images and titles in the results. Thatโ€™s a great way to showcase visual content on your site and capture attention.

search results settings

Configure The Divi Search Module Design Settings

The Divi Search Module also has the familiar design options available in the Divi Builder. You can assign colors to fonts and icons on the search field and button with them. You can also control the design settings for search results. Letโ€™s take a look at each tab individually.

The Search Field option controls the colors and fonts for the text and border of the search field. The design options are nearly unlimited, whether itโ€™s the placeholder, field text color, or font.

search field design settings

Similarly, the Search Button is completely customizable. With options for choosing the font, including text size, letter spacing, and more, you can create styles for the search button that truly stand out.

search button design settings

Live Ajax Search Results Dropdown Settings

The Ajax search results dropdown has three tab options: the dropdown container, results text, and pagination. For the dropdown container, you have options for background color, padding, container shadow, the border, and the scrollbar.

Ajax container design settings

The results text tab controls the font, color, and various attributes.

results text tab

Similarly, the pagination tab allows you to customize the text and active text, including choosing fonts and colors.

pagination design settings

Live Ajax Search Individual Results Design Settings

Divi Search Helper users can also stylize the individual results in the Ajax dropdown. With options for the overall results, title, excerpt, and price, you can truly make your content unique. As with the other options, all settings are customizable, including fonts, colors, and more. There are five tabs with options, allowing you to match your branding easily. However, youโ€™ll have to preview the changes once you set them, as most of them are unavailable in the Visual Builder.

live Ajax individual results design options

Once all your design settings are in place, save the page and view your new search bar!

Divi Search Helper styles

How Does The Divi Search Helper Cost?

Divi Search Helper

Divi Search Helper is available in the Divi Marketplace for the low price of $29. This includes one year of support and updates and a 30-day money-back guarantee. You can also use Divi Search Helper on unlimited websites, ensuring you can give every Divi website you own a more powerful search option.

Get Divi Search Helper

Divi Search Helper Provides A Better Way To Search

Divi Search Helper is a game-changer for Divi website owners looking to enhance their search capabilities. By adding a wealth of features to the standard Divi Search Module, this plugin makes it easier than ever for your siteโ€™s visitors to find what they are looking for. From customizable design elements to advanced search criteria, Divi Search Helper offers an incredible solution for improving user experience and search results.

Those tired of the limitations of the default WordPress search should consider Divi Search Helper. Its intuitive interface and affordable price make it a valuable tool for any Divi user. Try it out!

Divi Marketplace

Are You A Divi User? Find Out How To Get More From Divi! ๐Ÿ‘‡

Browse hundreds of modules and thousands of layouts.

Visit Marketplace
Divi Marketplace
Divi Cloud

Find Out How To Improve Your Divi Workflow ๐Ÿ‘‡

Learn about the new way to manage your Divi assets.

Get Divi Cloud
Divi Cloud
Divi Hosting

Want To Speed Up Your Divi Website? Find Out How ๐Ÿ‘‡

Get fast WordPress hosting optimized for Divi.

Speed Up Divi
Divi Hosting
Premade Layouts

Check Out These Related Posts

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today