{"id":15720,"date":"2025-05-23T12:38:50","date_gmt":"2025-05-23T06:38:50","guid":{"rendered":"https:\/\/helpdesk.spider-themes.net\/docs\/docy-wordpress-theme\/tips\/search-banner-customization\/"},"modified":"2025-05-23T12:38:50","modified_gmt":"2025-05-23T06:38:50","slug":"search-banner-customization","status":"publish","type":"docs","link":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/docs\/docy-wordpress-theme\/tips\/search-banner-customization\/","title":{"rendered":"Search Banner Customization"},"content":{"rendered":"\n

How to Customize Your Search Banner<\/strong><\/h2>\n\n\n\n

This guide explains how to customize the search Banner options from the theme settings.<\/p>\n\n\n\n

Enable the Search Banner Option<\/strong><\/h4>\n\n\n\n

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

    \n
  • Toggle the switch to enable the search feature.<\/li>\n\n\n\n
  • Once enabled, all related customization options will appear for configuration.<\/li>\n<\/ul>\n\n\n\n

    1. Banner Title<\/strong><\/h3>\n\n\n\n
      \n
    • Toggle:<\/strong> Show\/Hide the page title in the banner area.
      Title Color:<\/strong> Select a custom color for the page title using the color picker.<\/li>\n<\/ul>\n\n\n\n

      2. Banner Subtitle<\/strong><\/h3>\n\n\n\n
        \n
      • Toggle:<\/strong> Show\/Hide the subtitle. When enabled, the subtitle will automatically fetch content from the page excerpt.<\/li>\n\n\n\n
      • Subtitle Color:<\/strong> Select a custom color for the subtitle.<\/li>\n<\/ul>\n\n\n\n

        3. Banner Search Form<\/strong><\/h3>\n\n\n\n
          \n
        • Toggle:<\/strong> Enable\/Disable the search form that appears in the banner area.<\/li>\n\n\n\n
        • Placeholder Color:<\/strong> Choose the placeholder text color of the input field.<\/li>\n\n\n\n
        • Background Color:<\/strong> Set the background color for the search input field.<\/li>\n<\/ul>\n\n\n\n

          4. Search Banner Layout<\/strong><\/h3>\n\n\n\n
            \n
          • Dropdown Option:<\/strong> Choose between different layout styles. By default, the layout is set to \u201cDefault.\u201d<\/li>\n<\/ul>\n\n\n\n

            5. Search Banner Design<\/strong><\/h3>\n\n\n\n

            Docy offers two pre-built banner designs. Simply click on your preferred design to apply it to the search section.<\/p>\n\n\n\n

            6. Padding Settings<\/strong><\/h3>\n\n\n\n
              \n
            • Input Format:<\/strong> Padding values are entered in a clockwise direction \u2014 Top \u2192 Right \u2192 Bottom \u2192 Left<\/strong>.<\/li>\n\n\n\n
            • Unit:<\/strong> Choose the unit of measurement (e.g., px, em).<\/li>\n<\/ul>\n\n\n\n

              7. Banner Background Style<\/strong><\/h3>\n\n\n\n

              Choose a background style for your banner from a selection of gradient and solid options. Simply click on one of the thumbnails to apply.<\/p>\n\n\n\n

              8. Background Settings<\/strong><\/h3>\n\n\n\n
                \n
              • Background Color:<\/strong> Select a custom background color.<\/li>\n\n\n\n
              • Image Upload:<\/strong> Upload a custom background image.<\/li>\n\n\n\n
              • Background Position \/ Repeat \/ Attachment \/ Size:<\/strong> Configure how the background image behaves.<\/li>\n<\/ul>\n\n\n\n

                9. Banner Overlay<\/strong><\/h3>\n\n\n\n
                  \n
                • Toggle:<\/strong> Show\/Hide the overlay on the banner. Useful for improving text contrast and visibility.<\/li>\n<\/ul>\n\n\n\n

                  10. Search Placeholder<\/strong><\/h3>\n\n\n\n
                    \n
                  • Text Field:<\/strong> Set custom placeholder text for the search field.
                    Default:  <\/em>Search (“\/” to focus)<\/em><\/li>\n<\/ul>\n\n\n\n

                    11. Focus Search<\/strong><\/h3>\n\n\n\n
                      \n
                    • Toggle:<\/strong> When enabled, a transparent overlay will appear across the screen when the search field is focused, drawing attention to the input field.<\/li>\n<\/ul>\n\n\n\n

                      12. Focus Search by <\/strong>\/<\/strong><\/h3>\n\n\n\n
                        \n
                      • Toggle:<\/strong> Allow users to focus on the search field by pressing the \/ key on their keyboard.<\/li>\n<\/ul>\n\n\n\n
                        \n

                        Important Note:<\/strong><\/h4>\n\n\n\n

                        By default, the Search Banner is displayed on all pages. You can hidethe  Search Banner from a specific page from Options: Page > Banner<\/p>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"

                        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.<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":54,"menu_order":13,"comment_status":"open","ping_status":"closed","template":"","doc_tag":[],"class_list":["post-15720","docs","type-docs","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/15720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/comments?post=15720"}],"version-history":[{"count":0,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/15720\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/docs\/54"}],"wp:attachment":[{"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/media?parent=15720"}],"wp:term":[{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/arolax.crowdytheme-demo.com\/documentation\/wp-json\/wp\/v2\/doc_tag?post=15720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}