How do you add a booking module in Divi 5?

To add a booking form in Divi 5, open the page in the Visual Builder, add a module, type “DiviKraft” in the search box and choose the module you want (for example “DiviKraft · Réservation”, the booking form), then set it up on the Content tab. GDA Kraft Booking, the WordPress plugin from Global Digital Agency, provides native Divi 5 modules that work with presets and responsive mode. This guide explains how to build an effective accommodation page and service page, and how to avoid the usual mistakes.

Which modules are available?

Searching for “DiviKraft”, you will find: “DiviKraft · Recherche” (search), “· Résultats” (results), “· Calendrier” (calendar), “· Réservation” (booking), “· Prix” (price), “· Détail prix” (price breakdown), “· Extras”, “· Code promotionnel” (promo code), “· En-tête hébergement” (accommodation header), “· Avis voyageurs” (guest reviews), “· Finalisation” (checkout), “· Paiement” (payment), “· Confirmation”, “· Espace voyageur” (guest area) and “· Prendre rendez-vous” (book an appointment). Other modules come with the Kraft suite: “Kraft Console — Tableau de bord” (dashboard), “Kraft Lang — Sélecteur de langue” (language switcher) and the “Kraft Designer — …” modules (galleries, tour, guest book, reviews). Their roles are summarised in Using Kraft Booking with Divi, Gutenberg, Elementor and Bricks. They are all included in the edition downloaded from your Kraft GDA customer area (free account, no bank card required): no add-on to install.

The native modules are announced for Divi 5. If your site still runs an earlier version of Divi, each element's shortcode ([divikraft_booking_search], [divikraft_booking_calendar], [divikraft_booking_form], [divikraft_booking_results], [divikraft_booking_portal], [divikraft_booking_appointments]) can still be used in a text or code module.

How do you insert a module, step by step?

1. Open the page with the Visual Builder.
2. Add a section and a row, then click the add-module button.
3. Type “DiviKraft” and choose the module.
4. Content tab: the module's options, for example “Payment mode”, “Show guest selector”, “Show phone field”, “Sticky booking bar on mobile” for “DiviKraft · Réservation”, or “Service (ID)” and “Staff member (ID)” for “DiviKraft · Prendre rendez-vous”. There is no language option and no deposit option: the deposit is set in the rate plan.
5. Design tab: colours, typography, spacing. By default, the fields inherit your theme's settings.
6. Save the style as a preset if you are going to reuse the module on several pages.
7. Save, then test the page in a private browsing window, on desktop and on mobile.

Why use presets?

A preset is a saved, reusable set of style settings. With several properties or services, it saves you from styling every form by hand and guarantees the same look everywhere.

Recommended approach:

• create a “Booking, sidebar” preset for the form on accommodation pages;
• create an “Appointments, full width” preset for service pages;
• edit the preset, never each module on its own: the change then applies to every page.

What layout works for an accommodation page in Divi 5?

Typical structure:

1. Header section: main photo or gallery, property name, capacity and general location.
2. Two-column section (roughly 2/3 and 1/3): the main column holds the description, amenities, sleeping arrangements and house rules; the sidebar holds the “DiviKraft · Calendrier” module, the “DiviKraft · Prix” module, then the “DiviKraft · Réservation” module: the price is calculated as soon as the guest picks their dates.
3. Extras section (optional): the “DiviKraft · Extras” module for optional services.
4. Trust section: cancellation terms, the “DiviKraft · Avis voyageurs” module, guest book, contact.

If your page relies on a Theme Builder template, test on two properties that each one shows its own calendar and its own price. On an accommodation page, the calendar automatically shows that page's property; for a shared template, the advanced options “Dynamic unit (advanced)” and “Dynamic accommodation (advanced)” let you read the ID from dynamic content.

On mobile, columns stack: the sidebar moves below the description. Add a “See availability” button at the top of the page that points to the CSS ID of the form row, so guests do not have to scroll through the whole description.

What layout works for a service page?

1. A title with duration and price.
2. A short introduction, how the session runs, practical information.
3. The “DiviKraft · Prendre rendez-vous” module, with “Service (ID)” filled in.
4. A reminder of the cancellation rule below the module.

For a team, add one page per staff member with the module set to that person (“Staff member (ID)”): see How do you manage the schedule of a team with several staff members?.

How do you handle responsive settings?

Divi 5 lets you set each option per breakpoint (desktop, tablet, mobile). For a booking form:

• width: on mobile, let the module fill the full width of the column, with a side margin of about 16 px;
• field font size: at least 16 px on mobile to avoid automatic zoom while typing;
• spacing: reduce section margins on mobile rather than the form's inner padding;
• order: check that the form does not appear before the gallery and description.

Which accessibility rules should you follow?

• Keep visible labels above the fields.
• Aim for a contrast of at least 4.5:1 (WCAG level AA) between text and background, including on buttons.
• Do not show an unavailable date by colour alone.
• Keep the focus outline visible for keyboard navigation.
• Write explicit button labels (“Book these dates” rather than “OK”).

How do you keep the page fast?

• Only insert booking modules on the pages that need them.
• Optimise gallery images: WebP format, dimensions close to the actual display size.
• If a caching plugin is active, check after a test booking that availability updates; if it does not, exclude booking pages from the cache. Never cache the guest portal page.

Which mistakes come up most often?

Frequently asked questions

Do the modules work with Divi 4?

The native modules are announced for Divi 5. On an earlier version, use the element's shortcode, for example [divikraft_booking_form] or [divikraft_booking_calendar].

Do I need to write CSS to style the form?

No. The module's Design tab covers colours, typography and spacing, and presets let you reuse those settings.

Can I use the modules in the Theme Builder?

Yes, like any Divi module. Test on several pages that each one shows the expected accommodation.

How much does it cost to use the modules?

Nothing: GDA Kraft Booking is free. Only online payments carry a service fee of 0.9%, reduced to 0.45% until 30 June 2027, plus Stripe's fees; see Pricing.