Creating Full Screen Overlay Search Form
Download & Install Full-screen Overlay Content Module
In this tutorial I am using the premium plugin Full-Screen Overlay Content module. After purchase the module, you will download the product file from confirmation mail (check your inbox) or My Account page. Now install the plugin from WordPress Plugin screen.
Creating Search Form
Creating a search form layout with Beaver Builder “Templates” post type.
- Navigate to Builder -> Templates
- Click on Add New button
- Enter the title
- Select Full Screen Overlay Content template from Post Attributes meta box
- Hit on Publish button
- Click on Page Builder button and launch the builder
- Drag&Drop the HTML module at content area
- Enter following HTML code into text area
1234<form method="get" role="search" action="/" title="Type here to search" class="fs-search-form"><input type="search" class="fl-search-input form-control" name="s" placeholder="Type here to search" /><button type="submit" title="submit"><i class="fa fa-angle-right"></i></button></form> - Edit the Row Settings (click on wrench icon)
- Width: Full Width
- Content Width: Full Width
- Height: Full Height
- Content Alignment: Center
- Background Color: #ffffff
- Opacity: 95
- Click on Save button
- Click on Done -> Publish button
Adding the Search Button at Header
I am using the Beaver Themer add-on for header layout. Yet you have not Beaver themer add-on, still you can make the header with Beaver Builder plugin. Checkout this video which is made by our favourite community member David Waumsley.
Adding Custom CSS
Need some custom CSS for professional look. Open the style.css file of your child theme or you can add it other place.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/* Full Screen Overlay Search Form */ .fs-search-form { border-bottom: 1px solid #bbb; display: table; max-width: 750px; margin: 0 auto; width: 100%; } .fs-search-form input[type=search], .fs-search-form button { background: none; border: none; border-radius: 0; color: #333; display: inline-block; font-size: 45px; } .fs-search-form input[type=search] { float: left; padding: 40px 0; width: calc(100% - 45px); } .fs-search-form button { color: #f66; float: right; line-height: 70px; } .fs-search-form button:hover { color: #666; } @media only screen and (max-width: 992px) { .fs-search-form { max-width: 550px; } .fs-search-form input[type=search] { font-size: 35px; padding: 30px 0; } .fs-search-form button { line-height: 50px; } } @media only screen and (max-width: 767px) { .fs-search-form { max-width: 450px; } .fs-search-form input[type=search] { font-size: 25px; } .fs-search-form button { line-height: 45px; } } @media only screen and (max-width: 580px) { .fs-search-form { max-width: 300px; } .fs-search-form input[type=search] { font-size: 16px; } } .fs-search-form input[type=search]::-webkit-input-placeholder { color: #666!important; } .fs-search-form input[type=search]::-moz-placeholder { color: #666!important; } .fs-search-form input[type=search]::-ms-placeholder { color: #666!important; } .fs-search-form input[type=search]:focus::-webkit-input-placeholder { color: #999!important; } .fs-search-form input[type=search]:focus::-moz-placeholder { color: #999!important; } .fs-search-form input[type=search]:focus::-ms-placeholder { color: #999!important; } |
All are done. Now refresh the site, click on the search button and see the effect.