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 add-on.
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 now by navigating to Accommodation ->Settings ->Extensions ->Styles tab.
Now that the Styles add-on is installed and activated, let's try applying desired styles to your search form.
Search Availability widget**
Navigate to the page with the search form and open it with Elementor page builder. Highlight the Search Form widget to edit it - you may see new styling options appeared now:
Mark desired options to make the form looking per your needs, changes can be seen right away in the preview:
You may also use Search Availability Form widget and applied desired changes by inserting classes separated by the space:
Availability Search shortcode
Navigate to the page with the search form shortcode and open it for editing. Add class="is-style-horizontal-form" to the shortcode, so it looks as follows:
[mphb_availability_search class="is-style-horizontal-form"]
You can see the form is transformed to horizontal style now:
Feel free to add more classes to the shortcode if needed:
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
** In order to be able to use Hotel Booking widgets in Elementor you must have Hotel Booking & Elementor Integration plugin installed and activated
Comments
0 comments
Please sign in to leave a comment.