How do I insert the search bar into the home page?

edited August 2019 in Busiprof
Just as you have the area for customers, products and testimonials, I want you to have a large space for a search bar. How's that?

Comments


  • Thanks for contacting us!

    Please let us confirm do you want same as in the screenshot.

    Thanks
    Dev
  • Yes. But that the blue button written search goes to the right side of the bar.

    Thank you!
  • edited August 2019
    But please can you teach me how do I do that shows in the picture?
  • Hi,

    To add search bar into the home page, follow the instructions below:

    1) Create a child theme, Ignore if already existing.
    2) Create front-page.php file, open and paste this code: https://pastebin.com/raw/VkZUzFpy
    3) Create index-search.php file, open and paste this code: https://pastebin.com/raw/sBkm3tBG

    Go to Appearance >>  Customize  >> Additional CSS for right side and add the below custom CSS code:

    .spl_search_bar input[type="text"] {
       width:80%!important; }
    @media only screen and (max-width:767px) {
       .spl_search_bar input[type="text"] {
           width:70%!important; }}
    .spl_search_bar .submit_search {
       margin-bottom: 5px !important; }

    Let me know for any confusion!

    Thanks
    Dev
  • Hello, did without create the theme child and modified the  "front-page.PHP ", now the blog section does not come out anymore! How to solve?
  • Hi

    Can you please let us know, you are telling about which blog section.

    Thanks
    Dev
  • I decided, restoring my site with a backup done the day before.

    Thanks You. 

    Now, I'm going to do it with the kid theme to see.
  • Now, how do I change the text  "Search " inside the white box? For example, I want to write another text.
  • devdev
    edited August 2019
    Hi

    To change the text  "Search " inside the white box, replace the code of index-search.php file by this code: https://pastebin.com/raw/ruUrZJzy

    And after this replace a little bit of text in the file, refer to this screenshot.

    Thanks
    Dev
  • Now, is there a way to reduce the space above the search bar? Attach an image showing the space. I want to reduce to practically zero. ???
    search.PNG
    86K
  • Hi

    To reduce space above the search bar, replace the code of index-search.php file by this code: https://pastebin.com/raw/5cDNBDnA

    and add the below CSS code in Custom CSS.

    .search_bar{
        padding:0px!important;
    }

    Let me know for any confusion!

    Thanks
    Dev
  • Hi,

    Is your problem resolved?
    If yes, please allow us to close this discussion.

    Thanks
    Dev
Sign In or Register to comment.