{"id":4581,"date":"2021-12-14T17:12:03","date_gmt":"2021-12-14T11:12:03","guid":{"rendered":"https:\/\/betterdocs.co\/?post_type=docs&p=4581"},"modified":"2022-02-17T19:19:11","modified_gmt":"2022-02-17T13:19:11","password":"","slug":"betterdocs-search-box-gutenberg","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/it\/docs\/betterdocs-search-box-gutenberg\/","title":{"rendered":"How To Configure BetterDocs Search Box In Gutenberg?"},"content":{"rendered":"

BetterDocs Search Box<\/b><\/a> lets you easily design your knowledge base search panel on WordPress Gutenberg Editor. Follow this step by step guideline below to <\/span>configure BetterDocs Search Box<\/b> in WordPress Gutenberg Editor:<\/span><\/p>\n

Step 1: Open Up WordPress Gutenberg Posts or Pages<\/b><\/h2>\n

If you have already installed and created a knowledgebase site with <\/span>BetterDocs<\/b>, you can directly navigate to your desired Gutenberg site posts or pages.\u00a0<\/span><\/p>\n

Nota: <\/i><\/b>Make sure you have <\/span><\/i>installed & activated BetterDocs<\/i><\/b><\/a> on your WordPress site and create online documentation for your knowledgebase if you haven\u2019t.\u00a0<\/span><\/i><\/p>\n

\"BetterDocs<\/a><\/p>\n

Click on the <\/span>\u2018+\u2019 sign<\/b> from your Gutenberg Editor and search for \u2018<\/span>BetterDocs\u2019<\/b>. It will show up in three available Gutenberg blocks <\/span>\u2018BetterDocs Search Form\u2019, \u2018BetterDocs Category Box\u2019 <\/b>& <\/span>\u2018BetterDocs Category Grid\u2019.\u00a0<\/b><\/p>\n

From there choose <\/span>\u2018BetterDocs Search Box\u2019<\/b> block and it will then be available on your preferred Gutenberg Editor section.\u00a0\u00a0<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

Step 2: Configure BetterDocs Search Box Design\u00a0<\/b><\/h2>\n

BetterDocs Search Form<\/b> comes with <\/span>Search Box, Search Filed, Search Result Box, Search Result List, <\/b>e<\/span> Advanced<\/b> options. Let\u2019s check how you can configure each feature and make the changes on your BetterDocs knowledgebase search box in Gutenberg Editor.\u00a0<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

Search Box<\/b><\/h3>\n

If you want, you can configure your BetterDocs Search Box<\/strong> background into <\/span>\u2018Normal\u2019<\/b> o <\/span>\u2018Hover\u2019.<\/b> Whatever design type you may choose, you will get related separate customization features.\u00a0<\/span><\/p>\n

From there, you can choose <\/span>\u2018Background Type\u2019<\/b> into<\/span> \u2018Classic\u2019<\/b> & <\/span>\u2018Gradient’ <\/b>and accordingly make the changes with background color, fonts, add a background image, and others.\u00a0<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

Search Filed<\/b><\/h3>\n

A partire dal <\/span>Search Field<\/b>, you can change the placeholder, field background, or text color, typography, and field padding.\u00a0<\/span><\/p>\n

Besides, you can design Search Field <\/span>\u2018Border\u2019<\/b> in Normal or Hover. You can even change the search icon and close the color.\u00a0<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

Others<\/b>\u00a0<\/span><\/h3>\n

A partire dal <\/span>Search Result Box, <\/b>you can change search results box width, background color, add a background image, border types, and more in advance.\u00a0<\/span><\/p>\n

A partire dal <\/span>Search Result List, <\/b>you can configure the typography, item color, item hover color, padding, and border as per your preference.\u00a0<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

Besides, there you can get a separate <\/span>\u2018Advanced\u2019<\/b> tab option to margin and add an additional CSS class to make the changes.\u00a0<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

Esito finale<\/b><\/h2>\n

By following the basic steps and a bit more modifying, you can style your <\/span>BetterDocs Search Box<\/b> as per your preference in Gutenberg Editor.<\/span><\/p>\n

\"BetterDocs<\/a><\/p>\n

By using <\/span>BetterDocs Search Box<\/b><\/a>, this is how you can design an amazing knowledge base on your website and reduce the pressure on your support channel. <\/span><\/p>\n

Getting stuck? Feel free to contact our amazing <\/span>Team di supporto<\/b><\/a> for any assistance.<\/span><\/p>","protected":false},"excerpt":{"rendered":"

BetterDocs Search Box block can help you design an interactive, advanced knowledgebase search panel to help customers get the right documentation support right away.<\/p>","protected":false},"author":8,"featured_media":4589,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[10,225,226],"knowledge_base":[282],"class_list":["post-4581","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-betterdocs","doc_tag-betterdocs-search-box","doc_tag-betterdocs-search-box-gutenberg","knowledge_base-wordpress"],"year_month":"2026-04","word_count":413,"total_views":"7775","reactions":{"happy":"2","normal":"0","sad":"0"},"author_info":{"name":"Afrin","author_nicename":"afrin","author_url":"https:\/\/betterdocs.co\/it\/author\/syeda-sanjida-afrin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/betterdocs.co\/it\/docs\/shopify\/configurations\/"}],"doc_tag_info":[{"term_name":"betterdocs","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs\/"},{"term_name":"BetterDocs Search Box","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-search-box\/"},{"term_name":"BetterDocs Search Box Gutenberg","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-search-box-gutenberg\/"}],"knowledge_base_info":[{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/it\/docs\/wordpress\/","term_slug":"wordpress"}],"knowledge_base_slug":["wordpress"],"_links":{"self":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/4581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/users\/8"}],"version-history":[{"count":3,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/4581\/revisions"}],"predecessor-version":[{"id":4703,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/4581\/revisions\/4703"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media\/4589"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media?parent=4581"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_category?post=4581"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_tag?post=4581"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/knowledge_base?post=4581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}