Home page search

Real estate websites often have an easy to use, simplified search on their Home page. Often on top of a slideshow or beautiful background image.

For example:

http://demo.roveridx.com/region-ccml/home-page-search/

Here is how to get put these components together:

Add your container:

<div class="home-page-container"></div>

Add the search panel:

<div class="home-page-container">[rover_idx_search_panel search_panel_layout="typeahead_single"]</div>

Add the styling:

.home-page-container {
background-image: url(http://demo.roveridx.com/wp-content/uploads/2019/03/cape_cod_background.jpg);
background-size: cover;
position: relative;
min-height: 600px;
width: 100%;}

 

.home-page-container .rover-search-framework {
position: absolute;
top: 30%;
max-width: 60%;
margin: 0 20%;
}

And you are done!