Comment ajouter un module de réservation dans Divi 5 ?

Pour ajouter un formulaire de réservation dans Divi 5, ouvrez la page dans le Visual Builder, ajoutez un module, tapez « DiviKraft » dans la recherche et choisissez le module voulu (par exemple « DiviKraft · Réservation »), puis réglez-le dans l'onglet Contenu. GDA Kraft Booking, l'extension WordPress de Global Digital Agency, fournit des modules natifs pour Divi 5, compatibles avec les presets et le mode responsive. Ce guide explique comment construire une fiche hébergement et une page de prestation réussies, et comment éviter les erreurs courantes.

Quels modules sont disponibles ?

En cherchant « DiviKraft », vous trouvez : « DiviKraft · Recherche », « · Résultats », « · Calendrier », « · Réservation », « · Prix », « · Détail prix », « · Extras », « · Code promotionnel », « · En-tête hébergement », « · Avis voyageurs », « · Finalisation », « · Paiement », « · Confirmation », « · Espace voyageur » et « · Prendre rendez-vous ». D'autres modules s'ajoutent avec la suite Kraft : « Kraft Console — Tableau de bord », « Kraft Lang — Sélecteur de langue » et les modules « Kraft Designer — … » (galeries, visite, livre d'or, avis). Leur rôle est résumé dans Utiliser Kraft Booking avec Divi, Gutenberg, Elementor et Bricks. Tous sont inclus dans l'édition téléchargée depuis votre espace client Kraft GDA (compte gratuit, aucune carte bancaire demandée) : aucun add-on à installer.

Les modules natifs sont annoncés pour Divi 5. Si votre site est encore sous une version antérieure de Divi, le shortcode de chaque élément ([divikraft_booking_search], [divikraft_booking_calendar], [divikraft_booking_form], [divikraft_booking_results], [divikraft_booking_portal], [divikraft_booking_appointments]) reste utilisable dans un module de texte ou de code.

Comment insérer un module pas à pas ?

1. Ouvrez la page avec le Visual Builder.
2. Ajoutez une section, une ligne, puis cliquez sur l'ajout de module.
3. Tapez « DiviKraft » et choisissez le module.
4. Onglet Contenu : les options du module, par exemple « Mode de paiement », « Afficher le choix des voyageurs », « Afficher le champ téléphone », « Barre de réservation fixe sur téléphone » pour « DiviKraft · Réservation », ou « Prestation (ID) » et « Intervenant (ID) » pour « DiviKraft · Prendre rendez-vous ». Il n'y a ni option de langue ni option d'acompte : l'acompte se règle dans le plan tarifaire.
5. Onglet Style : couleurs, typographies, espacements. Par défaut, les champs reprennent les réglages de votre thème.
6. Enregistrez le style en preset si vous allez réutiliser le module sur plusieurs pages.
7. Enregistrez, puis testez la page en navigation privée, en bureau et sur mobile.

Pourquoi utiliser les presets ?

Un preset est un ensemble de réglages de style enregistré et réutilisable. Avec plusieurs hébergements ou prestations, il évite de régler à la main chaque formulaire et garantit une apparence identique partout.

Méthode conseillée :

• créez un preset « Réservation, colonne latérale » pour le formulaire des fiches hébergement ;
• créez un preset « Rendez-vous, pleine largeur » pour les pages de prestation ;
• modifiez le preset, jamais chaque module isolément : la correction s'applique à toutes les pages.

Quelle mise en page pour une fiche hébergement dans Divi 5 ?

Structure type :

1. Section d'en-tête : photo principale ou galerie, nom de l'hébergement, capacité et localisation générale.
2. Section en deux colonnes (environ 2/3 et 1/3) : la colonne principale contient la description, les équipements, la répartition des couchages et le règlement intérieur ; la colonne latérale contient le module « DiviKraft · Calendrier », le module « DiviKraft · Prix », puis le module « DiviKraft · Réservation » : le prix se calcule dès que le voyageur choisit ses dates.
3. Section Extras (facultative) : le module « DiviKraft · Extras » pour les services optionnels.
4. Section Confiance : conditions d'annulation, module « DiviKraft · Avis voyageurs », livre d'or, contact.

Si votre fiche s'appuie sur un modèle du Theme Builder, testez sur deux hébergements que chacun affiche bien son propre calendrier et son propre prix. Sur une fiche, le calendrier affiche automatiquement le logement de la fiche ; pour un modèle partagé, les options avancées « Unité dynamique (avancé) » et « Hébergement dynamique (avancé) » permettent de lire l'identifiant depuis un contenu dynamique.

Sur mobile, les colonnes s'empilent : la colonne latérale passe sous la description. Ajoutez en haut de page un bouton « Voir les disponibilités » qui pointe vers l'identifiant CSS de la ligne du formulaire, pour que le voyageur n'ait pas à faire défiler toute la description.

Quelle mise en page pour une page de prestation ?

1. Titre avec durée et prix.
2. Texte de présentation court, déroulé de la séance, informations pratiques.
3. Module « DiviKraft · Prendre rendez-vous », avec « Prestation (ID) » renseigné.
4. Rappel de la règle d'annulation sous le module.

Pour une équipe, ajoutez une page par intervenant avec le module réglé sur lui (« Intervenant (ID) ») : voir Comment gérer le planning d'une équipe de plusieurs intervenants ?.

Comment régler le responsive ?

Divi 5 permet de régler chaque option par point de rupture (bureau, tablette, mobile). Pour un formulaire de réservation :

• largeur : en mobile, laissez le module occuper toute la largeur de la colonne, avec une marge latérale d'environ 16 px ;
• taille de police des champs : au moins 16 px sur mobile pour éviter le zoom automatique à la saisie ;
• espacements : réduisez les marges de section en mobile plutôt que les marges internes du formulaire ;
• ordre : vérifiez que le formulaire n'arrive pas avant la galerie et la description.

Quelles règles d'accessibilité respecter ?

• Gardez des libellés visibles au-dessus des champs.
• Visez un contraste d'au moins 4,5:1 (niveau AA des WCAG) entre le texte et le fond, y compris pour les boutons.
• Ne signalez pas une date indisponible par la seule couleur.
• Laissez le contour de focus visible pour la navigation au clavier.
• Rédigez des textes de bouton explicites (« Réserver ces dates » plutôt que « OK »).

Comment garder une page rapide ?

• N'insérez les modules de réservation que sur les pages utiles.
• Optimisez les images de la galerie : format WebP, dimensions proches de l'affichage réel.
• Si une extension de cache est active, vérifiez après une réservation test que les disponibilités se mettent à jour ; à défaut, excluez les pages de réservation du cache. Ne mettez jamais en cache la page du portail voyageur.

Quelles erreurs rencontre-t-on souvent ?

Questions fréquentes

Les modules fonctionnent-ils avec Divi 4 ?

Les modules natifs sont annoncés pour Divi 5. Sous une version antérieure, utilisez le shortcode de l'élément, par exemple [divikraft_booking_form] ou [divikraft_booking_calendar].

Dois-je écrire du CSS pour styler le formulaire ?

Non. L'onglet Style du module couvre couleurs, typographies et espacements, et les presets permettent de réutiliser ces réglages.

Puis-je utiliser les modules dans le Theme Builder ?

Oui, comme tout module Divi. Testez sur plusieurs fiches que chaque page affiche bien l'hébergement attendu.

Que coûte l'utilisation des modules ?

Rien : GDA Kraft Booking est gratuit. Seuls les paiements en ligne supportent des frais de service de 0,9 %, ramenés à 0,45 % jusqu'au 30 juin 2027, plus les frais Stripe ; voir Tarifs.