When adding a search form to your website you may want to change its styling to match your theme. Finally, you are able to do that easily using our great Hotel Booking Styles and Hotel Booking & Elementor Integration add-ons.
First of all, you should install and activate the Hotel Booking Styles plugin.
Navigate to Accommodation ->Settings and scroll down to Display Options section - click "Install & Activate" button next to More Styles option:*
Wait some seconds until the plugin is installed and activated. Once it is, you will be redirected to newly created Styles tab with all the available classes to use in the widget or shortcode:
You will be able to get back to this screen any time by navigating to Accommodation ->Settings ->Extensions ->Styles tab.
Now navigate to Plugins ->Add New - type the "hotel booking & elementor integration" in the search field at the upper right of the screen and install the plugin from the appeared plugins list.
Great news for Elementor users is that you will not need to use CSS classes, as you will get horizontal form options right in your Search Availability Form widget in Elementor.**
Now that both add-ons are installed and activated, let's try applying desired styles to your search form.
Navigate to the page with the search form and open it with Elementor page builder. Highlight the Search Availability Form widget to edit it - you may see available styling options at the left hand side.
Switch Styles option to "Horizontal Form" in order to make the search form horizontal, changes will be seen right away in the preview:
You may also navigate to Customization tab and set up additional options for the search form:
That's it! You have now learnt how to make the search form horizontal in Elementor page builder.
* Automatic add-on installation is available in Hotel Booking plugin starting from version 3.8.1. If using previous versions, feel free to install the plugin in your Dashboard under Plugins ->Add New
**Horizontal form options are available in the Search Availability Form widget starting from Hotel Booking Styles v. 1.0.1 and Hotel Booking & Elementor Integration v. 1.1.2
Comments
0 comments
Please sign in to leave a comment.