Search¶

The Search module places a configurable WordPress search form anywhere in your Divi 5 layout.

Quick Reference

What it does: Embeds a WordPress search bar with optional button and content type exclusion filters. When to use it: Header search bars, blog archive search, knowledge base or documentation pages Key settings: Placeholder, Show Button, Exclude Posts, Exclude Pages, Exclude Categories, Field styling Block identifier: divi/search ET Docs: Official documentation

When to Use This Module

Adding a search bar to header templates for site-wide search access
Placing a filtered search above blog or documentation archives
Creating a prominent search-focused landing page or hero section

When NOT to Use This Module

For navigation menus → use Menu or Fullwidth Menu
For widget-based sidebar search → use Sidebar
For filtering WooCommerce products → use WooCommerce product filtering plugins

Overview¶

The Search module lets you embed a fully functional search bar into any section of your site, whether that is a header, footer, sidebar area, landing page, or within standard page content. It leverages the native WordPress search functionality, so results are generated by the same engine that powers the default WordPress search, but with the visual flexibility that Divi provides.

A key feature of this module is its content filtering capability. Through the Exceptions settings, you can exclude specific content types from search results, such as posts, pages, or posts from particular categories. This is especially useful on sites with mixed content types where you want search results to stay focused on the most relevant items for your visitors.

The module consists of two primary elements: the text input field and an optional search button. You can customize the placeholder text that appears inside the field, toggle the button on or off, and fully style both the field and button through the Design tab. Whether you need a compact inline search bar for a navigation area or a prominent search form on a dedicated search page, this module provides the flexibility to match your design requirements.

For additional reference, see the official Elegant Themes documentation.

View A Live Demo Of This Module

The Search module displaying a search field with an integrated search button.

Use Cases¶

Header Search Bar — Add a search module to your global header template so visitors can search your site from any page. Style it to be compact and visually consistent with your navigation elements.
Blog Archive Search — Place a search module above your blog feed to let readers quickly find articles by keyword. Use the Exceptions settings to limit results to posts only, excluding pages and other content types.
Knowledge Base or Documentation Search — On support or documentation sites, add a prominent search module at the top of the page to serve as the primary navigation method, with exceptions configured to exclude irrelevant content categories.

How to Add the Search Module¶

Insert the module — In the Visual Builder, click the gray plus icon within any row and search for "Search." Click the module to insert it into your layout.
Configure content and exceptions — In the Content tab, set the placeholder text for the input field. Under Exceptions, choose which content types to exclude from search results (posts, pages, or specific categories).
Style and publish — Use the Design tab to style the input field, button, and typography. Adjust sizing and spacing to fit the module into your layout, then save your changes.

Settings & Options¶

Content Tab¶

The Content tab controls the search field text, button visibility, and which content types appear in search results.

Setting	Type	Description
Text
Placeholder	Text	Set the placeholder text that appears inside the search input field before the user types anything.
Elements
Show Button	Toggle	Display or hide the search submit button. When hidden, users submit searches by pressing Enter.
Exceptions
Exclude Posts	Toggle	Remove posts from appearing in search results.
Exclude Pages	Toggle	Remove pages from appearing in search results.
Exclude Categories	Multi-select	Choose specific post categories whose content should be excluded from search results.
Background
Background Color	Color	Set a solid background color for the module container.
Background Gradient	Gradient	Apply a gradient background to the module.
Background Image	Upload	Use an image as the module background.
Background Video	URL	Set a video as the module background.
Background Pattern	Select	Apply a decorative pattern to the module background.
Background Mask	Select	Apply a mask effect to the module background.
Order
Order	Number	Control the display order of this module within a Flexbox or Grid parent layout.
Meta
Admin Label	Text	Assign a custom label visible in the Visual Builder layers panel for easier identification.
Disable	Toggle	Force the module to be hidden or visible within the Visual Builder editing interface.

Design Tab¶

The Design tab controls the visual appearance of the search field, button text, and the overall module styling.

Module-specific settings:

Setting	Type	Description
Field Background Color	Color	Set the background color of the search input field.
Field Text Color	Color	Set the color of text typed into the search field.
Field Focus Background Color	Color	Set the field background color when the input is focused.
Field Focus Text Color	Color	Set the text color when the input field is focused.
Field Border Width	Range	Set the width of the border around the input field.
Field Border Color	Color	Set the color of the input field border.
Field Border Radius	Range	Control the corner rounding of the search input field.
Button Text	typography group	Font family, weight, style, alignment, color, size, letter spacing, line height, and text shadow for the search button text.

Shared design options — see Options Groups for detailed documentation:

Options Group	Description
Text	Font, weight, alignment, color, line height, text shadow
Sizing	Width, max-width, min-height, height, alignment
Spacing	Margin and padding with responsive breakpoint controls
Border	Width, color, style, border radius
Box Shadow	Horizontal/vertical offset, blur, spread, color, position
Filters	Brightness, contrast, saturation, hue rotation, blur, invert, sepia, opacity, blend mode
Transform	Scale, translate, rotate, skew, transform origin
Animation	Entrance animation style, direction, duration, delay, intensity

Advanced Tab¶

The Advanced tab provides control over HTML attributes, custom CSS, conditional display rules, scroll effects, and responsive visibility.

Shared advanced options — see Options Groups for detailed documentation:

Options Group	Description
Attributes	CSS ID, classes, custom HTML attributes
CSS	Custom CSS per element target (main element, input field, button, before, after)
HTML	Custom HTML attributes for module wrapper
Conditions	Display rules (user role, page type, date, logic)
Interactions	Hover, click, or scroll-triggered interactions
Visibility	Device visibility toggles
Transitions	Hover transition timing
Position	CSS position and offsets
Scroll Effects	Scroll-driven animation effects

Code Examples¶

Custom CSS¶

/* Style the search input field */
.et_pb_search .et_pb_s {
    background-color: #f5f5f5;
    border: 2px solid #ddd;
    border-radius: 25px;
    padding: 12px 20px;
    font-size: 16px;
    transition: border-color 0.3s ease;
}

/* Highlight the input field on focus */
.et_pb_search .et_pb_s:focus {
    border-color: #2ea3f2;
    outline: none;
    box-shadow: 0 0 0 3px rgba(46, 163, 242, 0.15);
}

/* Style the search button */
.et_pb_search .et_pb_searchsubmit {
    background-color: #2ea3f2;
    border-radius: 0 25px 25px 0;
    padding: 12px 24px;
    font-weight: 600;
}

/* Responsive: full-width search on mobile */
@media (max-width: 767px) {
    .et_pb_search {
        width: 100%;
    }
    .et_pb_search .et_pb_s {
        font-size: 14px;
    }
}

PHP Hooks¶

/* Filter the Search module output to add a custom wrapper */
add_filter('et_module_shortcode_output', function($output, $render_slug) {
    if ('et_pb_search' !== $render_slug) {
        return $output;
    }

    // Add an aria-label for accessibility
    $output = str_replace(
        '<form',
        '<form aria-label="Site Search"',
        $output
    );

    return $output;
}, 10, 2);

Common Patterns¶

Header Inline Search — Place the Search module in a header row alongside a menu and logo. Hide the search button and rely on Enter key submission for a minimal, clean look. Use the Field settings to match the input styling with your header background.
Filtered Blog Search — Add the Search module above a Blog module on an archive page. Under Exceptions, exclude pages and limit results to posts only. This keeps search results relevant when visitors are browsing your content library.
Full-Width Landing Page Search — Create a hero section with a large heading and a Search module centered beneath it. Set the module width to 60-70% with center alignment, increase the field padding, and apply a subtle box shadow to create a prominent search experience similar to a search engine homepage.

AI Interaction Notes¶

Create vs. Modify

Modifying existing module content via REST API (wp.apiFetch PATCH) updates title, body text, and settings attributes. Creating new modules via REST API produces content that renders on the front end but may not appear in the Visual Builder layer view. Use browser automation for reliable module creation. See REST API Content Playbook.

Block identifier: divi/search — Needs verification on current build

Operation	Method	Status	Notes
Read content	Parse `post_content` block JSON	Observed	Use brace-depth parser — see Content Encoding
Modify existing	`wp.apiFetch` PATCH on post endpoint	Observed	Update block attributes in `post_content`
Create new	Browser automation (Playwright)	Observed	REST creation may break VB visibility
Batch modify	Sequential REST requests	Needs Testing	See REST API Content Playbook

Key content attributes — JSON paths need verification:

Attribute	JSON Path	Notes
Placeholder	`attrs.placeholder`	Input field placeholder text
Show Button	`attrs.show_button`	Toggle search submit button visibility

Module Selection Guidance

For site search use Search module; for navigation use Menu; for widget-based search use Sidebar.

Saving Your Work¶

After configuring your search module, click the green Save button in the bottom toolbar of the Visual Builder. If the search module is part of a header or footer template, make sure to save the template itself so the search bar persists globally across your site.

Version Notes¶

Divi 5 Only

This page documents Divi 5 behavior exclusively. The Search module in Divi 5 uses the updated options framework with improved field styling controls and the new Exceptions system for filtering search results.

Troubleshooting¶

Search Returns No Results

If the search form works but returns no matching content:

Check the Exceptions settings to ensure you have not excluded the content types that should appear in results
Verify that the posts or pages you expect to find are published (not draft or private)
WordPress search only indexes post titles and content by default; consider a search plugin for taxonomy or custom field searching

Search Button Not Visible

If the search button is missing from the module:

Open the Content tab and verify that Show Button is set to display
Check the Design tab to ensure the button text color is not the same as the button background
Inspect the module with browser developer tools to see if the button is present but hidden by overflow or sizing rules

Search Field Styling Not Applying

If your field style changes are not taking effect:

Ensure you are editing the Field settings in the Design tab, not just the general Text settings
Clear your browser cache and any site caching plugins after saving changes
Check for conflicting custom CSS in the Advanced tab or your theme stylesheet that may have higher specificity

Sidebar — Display WordPress widgets including a search widget
Blog — Display search results or post collections with filtering and pagination
Menu — Often paired with search in header navigation layouts
Theme Builder — Add search to custom header or search results templates
Fields Options — Style the search input field appearance