{"id":593,"date":"2019-11-13T12:34:26","date_gmt":"2019-11-13T06:34:26","guid":{"rendered":"http:\/\/betterdocs.co\/?post_type=docs&#038;p=593"},"modified":"2023-11-05T16:24:26","modified_gmt":"2023-11-05T10:24:26","password":"","slug":"documentation-live-search","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/ru\/docs\/documentation-live-search\/","title":{"rendered":"How To Customize The Documentation Live Search?"},"content":{"rendered":"<p class=\"wp-block-paragraph\"><a href=\"https:\/\/betterdocs.co\/ru\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>BetterDocs<\/strong><\/a> gives you the freedom to customize the Live Search bar and change its appearance any way you want. Now, let\u2019s follow the below guideline to <strong>\u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0430\u043d\u0435\u043b\u044c \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 Live<\/strong> \u0432 BetterDocs:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 1: Configure BetterDocs Settings<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">First of all, go to the BetterDocs Settings by navigating to <strong>wp-admin\u2192 BetterDocs \u2192 Settings<\/strong>, \u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u043e\u0442\u043a\u0440\u043e\u0439\u0442\u0435 <strong>&#039;\u0414\u0438\u0437\u0430\u0439\u043d&#039;<\/strong> \u0412\u043a\u043b\u0430\u0434\u043a\u0430. \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0436\u043c\u0438\u0442\u0435 <strong>\u00ab\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 BetterDocs\u00bb<\/strong> \u043a\u043d\u043e\u043f\u043a\u0443, \u0438 \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u044b \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"2862\" height=\"1480\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/11\/BetterDocs-Latest-UI-1-1.gif\" alt=\"Documentation Live Search\" class=\"wp-image-10079\" title=\"\" loading=\"eager\"><figcaption><\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Step 2: Modify The Live Search Option<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">From \u2018Customize BetterDocs\u2019, you can pick the <strong>\u2018Live Search\u2019<\/strong> option. You will then find all the styling options to modify the appearance of the Live Search option.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"835\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19.png\" alt=\"Documentation Live Search\" class=\"wp-image-9987\" title=\"\" srcset=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19.png 1600w, https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19-300x157.png 300w, https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19-1024x534.png 1024w, https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19-768x401.png 768w, https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19-1536x802.png 1536w, https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19-18x9.png 18w, https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-19-360x188.png 360w\" sizes=\"(max-width: 1600px) 100vw, 1600px\"  loading=\"eager\" fetchpriority=\"high\"\/><figcaption><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e, <strong>\u00ab\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 BetterDocs\u00bb<\/strong> redirects you to the doc landing page as a preview. So, you can check out the changes you make in real time.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img decoding=\"async\" width=\"1600\" height=\"867\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-29.gif\" alt=\"Documentation Live Search\" class=\"wp-image-9989\" title=\"\" loading=\"lazy\"><figcaption><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Afterward, you can go ahead &amp; change the colors for Live Search Background, Search Filed, Search Icon, and many others. If you want, you can even add a <strong>\u2018Background Image\u2019<\/strong> and change its properties as well.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Besides, you have complete control over how you want the <strong>\u2018Search Result Settings\u2019<\/strong> to appear and customize its content size and colors. You can change the box width of the Search Result.&nbsp; Make sure to hit on the<strong> &#039;\u041f\u0443\u0431\u043b\u0438\u043a\u043e\u0432\u0430\u0442\u044c&#039;<\/strong> \u043a\u043d\u043e\u043f\u043a\u0430, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0445\u0440\u0430\u043d\u0438\u0442\u044c \u0432\u0430\u0448\u0438 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1346\" height=\"651\" src=\"https:\/\/betterdocs.co\/wp-content\/uploads\/2023\/10\/image-28.gif\" alt=\"Documentation Live Search\" class=\"wp-image-9988\" title=\"How To Customize the Documentation Live Search? 3\" \/><figcaption><\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This is how easily you can customize the knowledge base documentation Live Search with <a href=\"https:\/\/wpdeveloper.net\/plugins\/betterdocs\/\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>BetterDocs<\/strong><\/a> and make it more interactive for users.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">If you face any difficulties, feel free to<a href=\"https:\/\/wpdeveloper.net\/support\" target=\"_blank\" rel=\"noreferrer noopener\"> <strong>contact our support team<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>BetterDocs allows you to design interactive documentation live search with some simple steps and improve your user experience with BetterDocs knowledgebase. <\/p>","protected":false},"author":5,"featured_media":3567,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_xspeed_no_cache":false,"_xspeed_expiry_hours":0,"footnotes":""},"doc_category":[309],"doc_tag":[10,14,17,13,24,16],"knowledge_base":[282],"class_list":["post-593","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-betterdocs","doc_tag-configuration","doc_tag-knowledge-base","doc_tag-learning","doc_tag-live-search","doc_tag-wordpress","knowledge_base-wordpress"],"year_month":"2026-09","word_count":248,"total_views":"15628","reactions":{"happy":"27","normal":"10","sad":"13"},"author_info":{"name":"rafin","author_nicename":"rafin","author_url":"https:\/\/betterdocs.co\/ru\/author\/rafin\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/betterdocs.co\/ru\/docs\/shopify\/configurations\/"}],"doc_tag_info":[{"term_name":"betterdocs","term_url":"https:\/\/betterdocs.co\/ru\/docs-tag\/betterdocs\/"},{"term_name":"configuration","term_url":"https:\/\/betterdocs.co\/ru\/docs-tag\/configuration\/"},{"term_name":"knowledge base","term_url":"https:\/\/betterdocs.co\/ru\/docs-tag\/knowledge-base\/"},{"term_name":"learning","term_url":"https:\/\/betterdocs.co\/ru\/docs-tag\/learning\/"},{"term_name":"Live Search","term_url":"https:\/\/betterdocs.co\/ru\/docs-tag\/live-search\/"},{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/ru\/docs-tag\/wordpress\/"}],"knowledge_base_info":[{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/ru\/docs\/wordpress\/","term_slug":"wordpress"}],"knowledge_base_slug":["wordpress"],"_links":{"self":[{"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/docs\/593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":7,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/docs\/593\/revisions"}],"predecessor-version":[{"id":13131,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/docs\/593\/revisions\/13131"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/media\/3567"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/media?parent=593"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/doc_category?post=593"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/doc_tag?post=593"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/ru\/wp-json\/wp\/v2\/knowledge_base?post=593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}