divi theme

MotoPress Hotel Booking & Divi Theme Integration: Download Free Add-on

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:

Hotel Booking & Divi Theme Integration Download

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.

divi theme library

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.

all wordpress hotel booking shortcodes

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.

accommodation list shortcodes

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).

divi hotel booking wordpress

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.

choose columns layoutAnd then insert the accommodation types by ids into each column. Now I have all accommodations displayed in two columns instead of a list:

rooms by ids

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.

single accommodation image gallery

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.

divi search form styles

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).

divi bed and breakfast

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.

divi for hotels

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.

calendar color scheme

For example, I’ll go with a dark blue one, which I think is the most suitable for the base Divi theme:

calendar color divi hotel booking

  • 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.

services divi hotel booking

  • 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).

booking form

The system pages are generated automatically, so there are no Divi modules for them.

reservation page

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.

button style in csutomizer

All the changes will be applied to the Divi theme buttons (apart from native Divi module buttons).

divi buttons customizer

…and buttons generated via the Hotel Booking modules.

button 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.

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!

Leave a Reply

Your email address will not be published. Required fields are marked *