MotoPress Hotel Booking & Divi Theme Integration: Download Free Add-on
Table of Contents
If you belong to the ‘Divi Nation’ and plan to implement the booking hotel plugin WordPress system by MotoPress, we’ve got awesome news for you!
MotoPress devs found the way to simplify the Divi theme customization process with regard to content generated by the Hotel Booking plugin. All you need to do to make your Divi & MotoPress Hotel Booking plugin workflow more easy-going is to download this lightweight free add-on from the official WordPress repository:
Download For Free: Hotel Booking & Divi Theme Plugin Integration
Divi Theme & Hotel Booking System Integration: What’s In It?
It was designed specifically for clients who build Divi-powered hotel and rental property WordPress websites with the companion MotoPress WordPress Hotel Booking plugin for property management.
Divi gives you an awesome level of accessibility and a deeply flexible design toolkit, while the Hotel Booking plugin for WordPress arms you with the best-in-class property management system and the property reservation engine. The new add-on helps you take advantage of both!
Manually Curated Posts for You
Basically, this extension unlocks all standard Divi Builder styling options like color picking, fonts adjustment, spaces and borders customization and other tools in order to be applied to Hotel Booking widgets, just like you do with other Divi modules and sections.
If you already tried to tweak the layouts and styling manually via CSS, you should try this add-on as well. Because, well, it shouldn’t be that hard!
Here is a detailed Motopress Hotel Booking tutorial from our oficial YouTube channel:
To test the integration plugin in the wild, I’ll be using a base Divi theme. If you use any specific premium layout pack from the Divi Library (like Real estate, Bed and Breakfast or Travel blog), your experience might be a little bit different in terms of design. A Divi bed and breakfast layout is really cool.
This joint add-on will work for other pre-designed niche Divi packs since it works with the Divi Builder, but some default slight design adjustments (like spacing) were applied to the base Divi theme only.
FYI: If you don’t want to experience any design limitations, you may take a look at the Vacation Rental WordPress themes that come with the plugin bundled for free. They support popular page builders.
For example, Oceanica makes a perfect match with any type of WordPress hotel website. Or else, Albatross is a free Elementor hotel theme with a modern and fresh design.
Hotel Booking Shortcodes Transformed Into The Divi Builder Modules
Before you start, install and activate the Divi theme, MotoPress Hotel Booking plugin for WordPress and Hotel Booking & Divi Integration extension. Then add a page you are going to edit > Open Visual Divi Builder.
The integration starts with shortcodes. Or, to be more precise, with the Hotel Booking MotoPress shortcodes integrated into the Divi Builder modules.
Opening the Visual Divi builder, you are prompted with three starting point blocks that ask you how you’d like to start. I’m going to use a ‘build from scratch’ blank page. Also, make sure you’ve already added all custom content via the MotoPress Hotel Booking plugin (like images, amenities, descriptions, etc.).
No matter the layout you choose, when you are adding a new module, you’ll notice major Hotel Booking shortcodes-modules among standard Divi modules. The only UI downside for now, which is going to be addressed in the future updates, is that Hotel Booking modules are not separated. So you need to scroll through all modules to find the needed ones to add to the page.
Once the module is added, you’ll be able to generate the needed Hotel Booking plugin behavior by configuring the preferable settings and make module design tweaks via basic Divi Builder settings.
Major shortcodes
Let’s see how you can operate the modules.
- Accommodation List shortcode
By default, this shortcode will output all the added rentals in a list format. Working with the Settings panel, you’ll be able to set the preferable options like show / hide the image gallery, amenities, etc.
To customize a font size, colors, alignments, sizing, spaces and borders of the module, open the Design tab and tick all your boxes (in this particular example, I’ve enlarged the font size).
If you’d like to put all listings into columns, simply choose the needed layout for your section with a needed number of columns. You can also customize the position of the elements.
And then insert the accommodation types by ids into each column. Now I have all accommodations displayed in two columns instead of a list:
If you are big into adding some design twist like gradient backgrounds or animation effects, it’s all doable with Divi.
- Single Accommodation shortcode
This is a single property shortcode for showcasing details of a specific room. If are a single rental property owner, or you’d like to feature any individual accommodation on a specific page and enable guests to book this property directly, this shortcode will be the most suitable.
It works pretty similarly: you just need to add a property id and designate the content and design settings for it.
You can even apply cool animation effects!
- Search Availability Form shortcode
There is also a Divi module for the Hotel Booking real-time search availability form.
The good news is that you can customize its layouts via a custom ‘Style’ menu to lay it out either vertically or horizontally (with the ‘Search’ button from the left / center). Each field will be laid out in its proper place automatically, making it visually clean and organized.
Don’t forget that you can add unlimited custom fields to your form. Just put comma separated slugs of the values via the Attributes menu (make sure to add attributes beforehand).
To edit the appearance of the form, use ‘Design’ tab of the Divi Builder. You can change colors, sizes, background, format of the module and more.
If you want to edit text content of the Hotel Booking rental properties via Divi, go to Theme Options > Builder > Enable Accommodation types. This will enable inline editing for selected accommodations in the Divi Builder.
By the way, to make the calendar more suitable to your theme, the standard calendar color scheme can be edited via the Hotel Booking plugin: navigate to your WP dashboard > Accommodation > Settings > Display Options > Calendar theme and choose from multiple color schemes available.
For example, I’ll go with a dark blue one, which I think is the most suitable for the base Divi theme:
- Accommodation Rates shortcode
You can also display Accommodation rates by specific ids.
- Services shortcode
If you sell extras, you can add them via the Services menu and then display the list of services that guests can add to the reservation. You may display only specific services by ids or the entire list of extras.
- Booking form shortcode
Add a booking form for a specific accommodation. For example, if you create a fancy layout for the property presentation, you may tie a booking form to this specific accommodation (use the property id).
The system pages are generated automatically, so there are no Divi modules for them.
Change button style via Customizer
The button style is reliant on the Divi Customizer (WP dashboard > Divi > Theme Customizer).
To change the button style of the Hotel Booking modules, you’ll need to go to your WordPress dashboard > Theme Customizer > Buttons Style and Buttons hover style. From this panel, you can update the button text color and size, background and border width, border color and other major settings.
All the changes will be applied to the Divi theme buttons (apart from native Divi module buttons).
…and buttons generated via the Hotel Booking modules.
Read also: Hotel Booking and Elementor Integration add-on
Wrapping up on Hotel Booking & Divi Integration
Using Divi and MotoPress together is not that overwhelming experience anymore. You can now take full advantage of your Divi-powered website by customizing all Hotel Booking content visually, via such a user-friendly and familiar Divi interface. You can manage Divi reservations, build outstanding property layouts and run a comprehensive hotel site.
Hotel Booking & Divi Theme Integration
There are still areas where we can improve the extension – handling design issues better, deeper integration with other Divi content modules, etc. The add-on remains a work in progress, so if you have time to share your feedback, we’ll make sure to address the most common concerns in the future updates!
Make sure to check our vacation rental WordPress website optimization checklist!
How to integrate Hotel Booking with Divi?
Can I customize the property search form in Divi?
Can I use Divi with the free version of Hotel Booking?
Ciao, sto avendo dificoltà a a far funzionare il modulo HB SEARCH RESULT, Quando vado a indicare le date e il numero di adulti nel modulo di ricerca disponibilità non filtra gli alloggi disponibili come va installato il modulo HB SEARCH RESULT?
Hi Vittorio,
The search results page shows all available accommodation types for the searched dates. It does not filter them by number of adults or children. You can use Attributes to filter the search results.
Hi, but in the “booking form” as you say in the post:
Booking form shortcode
Add a booking form for a specific accommodation. For example, if you create a fancy layout for the property presentation, you may tie a booking form to this specific accommodation (use the property id).
Then in the video screenshot appears “children” and “adults” fields in the form but when i add HB booking form widget in my divi creation, these two fields don’t appear… why?
Thanks
Hi Sara, Most likely you have enabled the Skip Search Results option. This option hides the capacity parameters of the form. Though you may still enable Adults and Children fields in further option under the Skip Search Results at Accommodation > Settings.
Hi.
I am using Divi builder and the free version of Motopress, just to get used to it before buying it.
I can add gallery BUT I can’t add featured image for my accomodation type.
Did someone else had this problem before and how did you fixed it?
Thank you.
Hi Ciprian, The issue with the featured image occurred after the latest update release. We’ll do our best to fix it as soon as it is possible and notify you when it is ready. We are sorry for the temporary inconvenience.
Hi,
Great plugin but in the accommodation Type when I add an accommodation and build it with divi, I can’t seem to figure out how to make it fullwith. And just to clarify I’m not talking about the sidebar.
Hi Cedric,
Thanks for your question. The layout of the accommodation type is inherited from the single.php file of your theme. You may duplicate it and re-name in single-mphb_room_type.php and modify it structure or copy it from another template file of your theme.
Hi,
I noticed that the “search availability” divi module does not display which dates are available when you pop open the calendar from the user side (for instance with a stroke through the date ) . It only tells you whether a unit is available after you’ve clicked search. This makes it very difficult for the user to see at a glance which dates the unit is available. Will there be a possible update to this?
Hi Chris,
The global search form is used to check the availability of all accommodation types added on the website. It can not display available/unavailable dates for each property. Though there is a Booking Form module or shortcode
[mphb_availability id="777"]which allows to check availability of certain accommodation type. IF you enable Skip Search Results option at settings of the Hotel Booking plugin this form will display the available and not available dates.