How can I create a landing page like that on your demo site?
The demo site uses the StoreFront theme and the landing page of the site is a WordPress page using the Homepage page template included with the theme.
The hero section of the landing page is where the content of the page is displayed by the Homepage template. We simply inserted the [drts-directory-search] shortcode as the page content to display a search form with some custom CSS rules for the transparent border around the form. Here is the exact shortcode syntax used:
[drts-directory-search directory="directory" size="lg" cache="1" style="padding:8px; background-color:rgba(0,0,0,0.15); border-radius:4px;"]
For more detail on the search form shortcode, please see Adding Search – Search form shortcode
Other sections of the landing page (photo slider, “Browse by Category”, “Popular Locations”, “Recent Listings”, “Recent Reviews” sections) are displayed using the Homepage Control plugin which is a free plugin that allows you to manage homepage components of Directories Pro. Your theme must be compatible with the Homepage Control plugin and unfortunately not many themes are compatible. For more details on Homepage Conrol and homepage components of Directories Pro, see Homepage Control.
If your theme is not compatible with Homepage Control, don’t worry. The homepage components of Directories Pro in Homepage Control are basically a wrapper to the [drts-directory-view] shortcode of Directories Pro. The [drts-directory-view] shortcode renders a view. A view is simply a set of criteria and configurations to query, sort, and display content items in various ways. You can create views and use the shortcode generated for each view to display the same content as homepage components of Homepage Control.