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 module 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.
HB Search Availability module**
Navigate to the page with the search form and open it with Divi page builder. Highlight the Search Availability module and click the "gear" icon to edit it. You may change the form to either horizontal center or horizontal left under Style option select - the form style is changed right away in the preview:
Feel free to add more styles to the form by adding any class from the Style tab of accommodation settings to the Class option field:
Add as many classes as you need 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 Divi 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 modules in Divi you must have Hotel Booking & Divi Integration plugin installed and activated
Comments
0 comments
Please sign in to leave a comment.