{"id":6204,"date":"2022-10-12T15:49:44","date_gmt":"2022-10-12T12:49:44","guid":{"rendered":"https:\/\/creativethemes.com\/blocksy\/?post_type=documentation&#038;p=6204"},"modified":"2024-01-09T17:20:55","modified_gmt":"2024-01-09T15:20:55","slug":"search-box","status":"publish","type":"documentation","link":"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search-box\/","title":{"rendered":"Search Box"},"content":{"rendered":"\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;69e4bdfe4ce55&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"69e4bdfe4ce55\" class=\"wp-block-image size-full has-lightbox wp-lightbox-container\"><img decoding=\"async\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2023-05-15-at-15.17.14.png\" alt=\"\" class=\"wp-image-7122\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\taria-label=\"Enlarge\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.imageButtonRight\"\n\t\t\tdata-wp-style--top=\"state.imageButtonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><figcaption class=\"wp-element-caption\">The <strong>Search Box<\/strong> element in action.<\/figcaption><\/figure>\n\n\n\n<p>The Search Box element is very similar to our <a href=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search\/\" data-type=\"URL\" data-id=\"https:\/\/creativethemes.com\/blocksy\/docs\/header-elements\/search\/\">Search overlay element<\/a>. The main difference is that it compacts everything into a nice little search box that sits on one of your header rows. Let&#8217;s check out the options in detail!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Granular Controls<\/h2>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/creativethemes.com\/blocksy\/wp-content\/uploads\/2022\/10\/Screenshot-2023-05-15-at-15.18.27.png\" alt=\"\" class=\"wp-image-7124\" \/><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<h5 class=\"wp-block-heading\">Placeholder Text<\/h5>\n\n\n\n<p>The search form has some placeholder text, to signal users where they need to type in their query. You can modify that placeholder text right here.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Input Controls<\/h5>\n\n\n\n<p>The <strong>Input Maximum Width<\/strong> and <strong>Input Height<\/strong> settings will allow you to control the size of the search box. These are adjustable independently of the device, so the perfect layout is easy to be achieved.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Icon<\/h5>\n\n\n\n<p>Since the&nbsp;<strong>Search<\/strong> <strong>Box<\/strong>&nbsp;element has a little icon visual representation, these options will let you control how that icon looks like. There&#8217;s even an option that will let you upload your own custom SVG icon.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Live Results<\/h5>\n\n\n\n<p>If you turn this option on, a nice overlay appears showcasing the results as you type. This makes for your users making quick decisions on what to navigate to.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Live Results Images<\/h5>\n\n\n\n<p>This option should let you display little thumbnails in the live search results mini pop-up.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Live Results Product Price<\/h5>\n\n\n\n<p>Similarly, you can also display the product prices in the live search results mini pop-up.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Taxonomy Filter<\/h5>\n\n\n\n<p>This one is interesting, as it will let your users search just a specific category of posts or products.<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">Search Through Criteria<\/h5>\n\n\n\n<p>This is probably the most important option for the search element. It will let you decide what items will be searched when the user performs their query. As you populate your WordPress installation with plugins that might offer CPTs, they will also show up here.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>The Search Box element is very similar to our Search overlay element. The main difference is that it compacts everything into a nice little search box that sits on one of your header rows. Let&#8217;s check out the options in detail! Granular Controls Placeholder Text The search form has some placeholder text, to signal users [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6210,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"doc_categories":[124],"class_list":["post-6204","documentation","type-documentation","status-publish","has-post-thumbnail","hentry","doc_categories-header-elements"],"blocksy_meta":{"post_title_panel":"","has_hero_section":"default","838d9685195988528811d57442e641f8":"","hero_section":"type-1","hero_elements":[{"id":"custom_title","enabled":true,"heading_tag":"h1","title":"Home"},{"id":"custom_description","enabled":true,"description_visibility":{"desktop":true,"tablet":true,"mobile":false}},{"id":"custom_meta","enabled":true,"meta_elements":[{"id":"author","enabled":true,"label":"By","has_author_avatar":"yes","avatar_size":25},{"id":"post_date","enabled":true,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"updated_date","enabled":false,"label":"On","date_format_source":"default","date_format":"M j, Y"},{"id":"categories","enabled":true,"label":"In","style":"simple"},{"id":"comments","enabled":true}],"page_meta_elements":{"joined":true,"articles_count":true,"comments":true}},{"id":"breadcrumbs","enabled":false}],"ea88170beabde9cdcac1b13c13b2688e":"","hero_alignment1":"CT_CSS_SKIP_RULE","hero_margin":40,"hero_alignment2":"center","hero_vertical_alignment":"center","3f8220fffdce925cf7ca9c907cf7d2d7":"","hero_structure":"narrow","8734640393010216f1393564ff59a892":"","page_title_bg_type":"featured_image","custom_hero_background":{"attachment_id":null},"page_title_image_size":"full","parallax":{"desktop":false,"tablet":false,"mobile":false},"7e959999f5d6477cca64807eea2cde3b":"","hero_height":"250px","pageTitleFont":{"family":"Default","variation":"Default","size":"30px","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageTitleFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageMetaFont":{"family":"Default","variation":"n6","size":"12px","line-height":"1.3","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"uppercase","text-decoration":"CT_CSS_SKIP_RULE"},"pageMetaFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_font_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"page_meta_button_type_background_colors":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageExcerptFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"pageExcerptColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"breadcrumbsFont":{"family":"Default","variation":"Default","size":"CT_CSS_SKIP_RULE","line-height":"CT_CSS_SKIP_RULE","letter-spacing":"CT_CSS_SKIP_RULE","text-transform":"CT_CSS_SKIP_RULE","text-decoration":"CT_CSS_SKIP_RULE"},"breadcrumbsFontColor":{"default":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"initial":{"color":"CT_CSS_SKIP_RULEDEFAULT"},"hover":{"color":"CT_CSS_SKIP_RULEDEFAULT"}},"pageTitleOverlay":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"pageTitleBackground":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor6)"}}},"pageTitlePadding":{"top":"50px","bottom":"50px","left":"auto","right":"auto","linked":true},"a60b53820445eb9c5f9de56fd902cd4a":"","page_structure_type":"default","651532dda55e168542fc3a1238d62269":"","content_style_source":"inherit","content_style":"wide","vertical_spacing_source":"inherit","content_area_spacing":"both","background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"CT_CSS_SKIP_RULE"}}},"content_background":{"background_type":"color","background_pattern":"type-1","background_image":{"attachment_id":null,"x":0,"y":0},"gradient":"linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)","background_repeat":"repeat","background_size":"auto","background_attachment":"scroll","patternColor":{"default":{"color":"#e5e7ea"}},"overlayColor":{"default":{"color":"CT_CSS_SKIP_RULE"}},"backgroundColor":{"default":{"color":"var(--paletteColor8)"}}},"content_boxed_shadow":{"inherit":false,"blur":18,"spread":-6,"v_offset":12,"h_offset":0,"inset":false,"enable":true,"color":{"color":"rgba(34, 56, 101, 0.04)"}},"content_boxed_border":{"width":1,"style":"none","color":{"color":"rgba(44,62,80,0.2)"}},"content_boxed_radius":{"top":"3px","bottom":"3px","left":"3px","right":"3px","linked":true},"boxed_content_spacing":{"desktop":{"top":"40px","bottom":"40px","left":"40px","right":"40px","linked":true},"tablet":{"top":"35px","bottom":"35px","left":"35px","right":"35px","linked":true},"mobile":{"top":"20px","bottom":"20px","left":"20px","right":"20px","linked":true}},"7621b0ea7d770993532914db5b1dde94":"","disable_featured_image":"no","disable_share_box":"no","disable_author_box":"no","disable_posts_navigation":"no","a640b18b0499a81b5c0996582ca39e9f":"","disable_related_posts":"no","disable_header":"no","disable_footer":"no","1f40aafb474f9fbf6058a65f03281d99":"","header_footer_scripts_panel":"","header_scripts":"","7bc93bcf7a36c47996fceb616d4bcb08":"","header_after_body_scripts":"","5417e25db3062924b4f1ef1ade3b18fa":"","footer_scripts":"","docs_item_badge":"PRO","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6204","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation"}],"about":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/types\/documentation"}],"author":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/comments?post=6204"}],"version-history":[{"count":1,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6204\/revisions"}],"predecessor-version":[{"id":9149,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/documentation\/6204\/revisions\/9149"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media\/6210"}],"wp:attachment":[{"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/media?parent=6204"}],"wp:term":[{"taxonomy":"doc_categories","embeddable":true,"href":"https:\/\/creativethemes.com\/blocksy\/wp-json\/wp\/v2\/doc_categories?post=6204"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}