Search Banner Customization

Summary: The Docy WordPress theme includes a powerful and customizable search banner feature, allowing you to provide an intuitive and visually engaging search experience for your users.

How to Customize Your Search Banner

This guide explains how to customize the search Banner options from the theme settings.

Enable the Search Banner Option

Log in to your Dashboard and navigate to [direction] Theme Settings > Header > Search Banner [/direction]

• Toggle the switch to enable the search feature.
• Once enabled, all related customization options will appear for configuration.

1. Banner Title

• Toggle: Show/Hide the page title in the banner area.
  Title Color: Select a custom color for the page title using the color picker.

2. Banner Subtitle

• Toggle: Show/Hide the subtitle. When enabled, the subtitle will automatically fetch content from the page excerpt.
• Subtitle Color: Select a custom color for the subtitle.

3. Banner Search Form

• Toggle: Enable/Disable the search form that appears in the banner area.
• Placeholder Color: Choose the placeholder text color of the input field.
• Background Color: Set the background color for the search input field.

4. Search Banner Layout

• Dropdown Option: Choose between different layout styles. By default, the layout is set to “Default.”

5. Search Banner Design

Docy offers two pre-built banner designs. Simply click on your preferred design to apply it to the search section.

6. Padding Settings

• Input Format: Padding values are entered in a clockwise direction — Top → Right → Bottom → Left.
• Unit: Choose the unit of measurement (e.g., px, em).

7. Banner Background Style

Choose a background style for your banner from a selection of gradient and solid options. Simply click on one of the thumbnails to apply.

8. Background Settings

• Background Color: Select a custom background color.
• Image Upload: Upload a custom background image.
• Background Position / Repeat / Attachment / Size: Configure how the background image behaves.

9. Banner Overlay

• Toggle: Show/Hide the overlay on the banner. Useful for improving text contrast and visibility.

10. Search Placeholder

• Text Field: Set custom placeholder text for the search field.
  Default:  Search (“/” to focus)

11. Focus Search

• Toggle: When enabled, a transparent overlay will appear across the screen when the search field is focused, drawing attention to the input field.

12. Focus Search by /

• Toggle: Allow users to focus on the search field by pressing the / key on their keyboard.

Important Note:

By default, the Search Banner is displayed on all pages. You can hidethe  Search Banner from a specific page from Options: Page > Banner