If you belong to the ‘Divi Nation’ and plan to implement the WordPress hotel booking 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 workflow more easy-going is to download this lightweight free add-on from the official WordPress repository:
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!
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 give a try to this add-on as well. Because, well, it shouldn’t be that hard!
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.
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.
Hotel Booking shortcodes are transformed into the Divi Builder modules
Before you start, install and activate the Divi theme, MotoPress Hotel Booking plugin 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 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 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.
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.
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!