Wie fügen Sie ein Buchungs-Widget in Elementor ein?

Ziehen Sie ein Widget der Kategorie Kraft Booking auf die Seite, stellen Sie es im Reiter Inhalt ein und achten Sie auf das Layout: Musterseite, Responsive, Barrierefreiheit und häufige Fehler.

Um ein Buchungsformular in Elementor einzufügen, öffnen Sie die Seite im Editor, suchen im Widget-Panel die Kategorie Kraft Booking und ziehen das gewünschte Widget auf die Seite; anschließend stellen Sie seine Optionen im Reiter Inhalt ein. GDA Kraft Booking, das WordPress-Buchungs-Plugin von Global Digital Agency, liefert native Widgets, die mit Elementor kostenlos und Elementor Pro kompatibel sind. Diese Anleitung geht über das Einfügen hinaus: Layout einer Unterkunftsseite und einer Leistungsseite, Responsive-Einstellungen, Barrierefreiheit und Performance.

Welche Widgets sind verfügbar?

Widget	Wo es eingesetzt wird
Verfügbarkeitssuche	Startseite, Kopf der Seite „Unsere Unterkünfte“
Suchergebnisse	Ergebnisseite, auf die die Suche verweist
Verfügbarkeitskalender	Seite einer Unterkunft: Der Gast wählt dort seine Daten
Buchungsformular	Seite einer Unterkunft, unter dem Kalender
Kundenbereich	Eigene Seite, auf der der an Gäste gesendete Link landet
Termin buchen	Leistungsseite oder Seite „Termin buchen“

Es gibt kein Widget Kraft Console und kein Widget „Verfügbarkeit und Preis“: Kraft Console ist ein eigener Verwaltungsbereich (siehe Kraft Console).

Die allgemeine Vorstellung der Elemente und ihrer Entsprechungen in anderen Page-Buildern finden Sie in Kraft Booking mit Divi, Gutenberg, Elementor und Bricks verwenden.

Öffnen Sie die Seite mit Mit Elementor bearbeiten.
Tippen Sie im linken Panel „Kraft“ in die Widget-Suche oder öffnen Sie die Kategorie Kraft Booking.
Ziehen Sie das Widget in einen Container.
Reiter Inhalt: Stellen Sie die Optionen des Widgets ein, zum Beispiel „Einheit (ID, 0 = automatisch)“, „Anzahl der Monate“ und „Preise anzeigen“ für den Kalender; „Zahlung“, „Gäste anzeigen“, „Telefon anzeigen“ und „Zusammenfassung anzeigen“ für das Formular; „Leistung (ID, 0 = alle)“ und „Mitarbeiter (ID, 0 = nach Wahl)“ für die Termine. Es gibt keine Option für Anzahlung, Extras oder Sprache.
Die Widgets haben keinen eigenen Reiter Stil: Passen Sie Abstände, Hintergrund und Rahmen im Reiter Erweitert von Elementor an.
Veröffentlichen Sie und testen Sie die Seite in einem privaten Fenster.

Welches Layout für eine Unterkunftsseite?

Eine Unterkunftsseite sollte die Fragen des Gastes der Reihe nach beantworten: Wie sieht es aus, ist es frei, was kostet es, wie buche ich. Musterstruktur mit zwei Spalten auf dem Desktop:

Kopfbereich in voller Breite: Galerie oder Hauptfoto, Name, Kapazität („6 Personen, 3 Schlafzimmer“).
Hauptspalte (etwa zwei Drittel): Beschreibung, Ausstattung, Raumaufteilung, Hausordnung, Lage.
Seitenspalte (etwa ein Drittel): oben das Widget Verfügbarkeitskalender, darunter das Widget Buchungsformular, das die gewählten Daten bestätigt. In Elementor Pro hält der Sticky-Effekt der Spalte das Formular beim Scrollen sichtbar; deaktivieren Sie ihn auf dem Smartphone.
Seitenende: Stornobedingungen, häufige Fragen, Kontakt.

Auf dem Smartphone wird der Container einspaltig: Prüfen Sie, dass das Formular nach Galerie und Zusammenfassung erscheint, und fügen Sie oben auf der Seite eine Schaltfläche „Buchen“ ein, die auf den Anker des Formulars verweist.

Um die Seite anzureichern, siehe Galerien, Rundgang nach Räumen und Gästebuch.

Welches Layout für eine Leistungsseite?

Bei einem Termin zählt die Information ebenso viel wie das Formular:

ein klarer Titel mit Dauer und Preis („Gesichtsbehandlung, 60 Min., 70 €“);
der Ablauf in drei oder vier Schritten, für wen die Leistung gedacht ist, was mitzubringen ist;
das Widget Termin buchen mit ausgefüllter „Leistung (ID, 0 = alle)“, was dem Kunden einen Schritt erspart;
die Stornoregel in einem Satz, direkt unter dem Formular;
ein Link zu den anderen Leistungen.

Lassen sich die Widgets in Templates und Pop-ups verwenden?

Diese Verwendungen sind nicht dokumentiert: Wenn Sie ein Widget in ein Loop-Template oder ein Pop-up von Elementor Pro setzen, testen Sie es sorgfältig. Zwei Vorsichtsmaßnahmen:

Pop-up: Verwenden Sie es nur für das Widget Verfügbarkeitssuche. Ein vollständiges Formular in einem Pop-up-Fenster ist auf dem Smartphone mühsam;
eine einzige Vorlage für alle Seiten (Theme Builder): Lassen Sie „Einheit (ID, 0 = automatisch)“ auf 0, damit der Kalender die Wohneinheit der Seite anzeigt, und prüfen Sie an zwei Seiten, dass jede ihren eigenen Kalender anzeigt; andernfalls behalten Sie eine Seite pro Unterkunft.

Wie achten Sie auf Responsive und Barrierefreiheit?

Schriftgröße: mindestens 16 px in den Feldern auf dem Smartphone, sonst zoomen manche Browser bei der Eingabe.
Touch-Flächen: Schaltflächen und Kalendertage groß genug für einen Finger; verringern Sie die Innenabstände des Widgets im Mobilmodus nicht.
Kontrast: Streben Sie mindestens die Stufe AA der WCAG an, also ein Verhältnis von 4,5:1 für Fließtext, auch für nicht verfügbare Daten, die sich nicht allein durch Farbe unterscheiden dürfen.
Beschriftungen: Ersetzen Sie die Feldbeschriftungen nicht durch bloße Beispieltexte; diese verschwinden bei der Eingabe.
Sichtbarer Fokus: Entfernen Sie in Ihren eigenen Stilen nicht den Fokusrahmen von Feldern und Schaltflächen.
Testen Sie mit der Tastatur: Die Tab-Taste muss das Formular in logischer Reihenfolge durchlaufen.

Wie erhalten Sie die Performance?

Platzieren Sie die Widgets nur auf den Seiten, die sie brauchen, nicht in einem globalen Header.
Komprimieren Sie die Fotos der Galerie (WebP-Format, passende Abmessungen): Sie belasten eine Seite stärker als das Formular.
Nutzen Sie ein Cache-Plugin, testen Sie das Formular nach einer Buchung in einem privaten Fenster; wirken die Verfügbarkeiten eingefroren, schließen Sie die Buchungsseiten vom Cache aus. Speichern Sie die Seite des Gästeportals, die personenbezogene Daten anzeigt, niemals im Cache.

Welche Fehler treten häufig auf?

Symptom	Wahrscheinliche Ursache	Lösung
Das Formular zeigt keinen Aufenthalt	Kein Datum vorher gewählt	Platzieren Sie das Kalender-Widget auf derselben Seite oder gehen Sie über die Suche
Keine Zahlungsschaltfläche	Zahlungen nicht aktiviert oder Option „Zahlung“ auf „Ohne Online-Zahlung (direkte Bestätigung)“	Wählen Sie „Online-Zahlung (Stripe / Kraft Pay)“; siehe Stripe-Zahlungen aktivieren
Keine Zeitfenster	Arbeitszeiten, Abwesenheiten oder Mindestvorlauf	Kein Termin-Zeitfenster verfügbar
Theme-Stile überschrieben	Globale Stileinstellungen von Elementor	Passen Sie Ihr globales Kit und den Reiter Erweitert des Widgets an
Falsche Sprache	Seite ohne Sprachpräfix (/en/, /it/…) geöffnet oder Text noch nicht übersetzt	Das Widget hat keine Sprachoption: siehe Mehrsprachige Websites

Häufige Fragen

Funktionieren die Widgets mit Elementor kostenlos?

Ja. Die Widgets funktionieren mit Elementor kostenlos und Elementor Pro; nur die Pro-eigenen Funktionen wie Pop-ups oder Loop-Templates erfordern Elementor Pro.

Brauche ich ein Konto, um die Widgets zu nutzen?

Das Plugin wird aus Ihrem Kraft-GDA-Kundenbereich heruntergeladen (kostenloses Konto, ohne Kreditkarte, Registrierung unter /de/inscription). Diese Edition enthält alles, Online-Zahlung, Termine, Kraft Console, Design-Module, Kraft Fields und Mehrsprachigkeit: Es ist kein Add-on zu installieren.

Kann ich mehrere Formulare auf derselben Seite platzieren?

Das ist möglich, aber nicht empfehlenswert: Ein einziges Formular pro Seite vermeidet Verwechslungen und Eingabefehler. Für mehrere Unterkünfte verwenden Sie die Widgets Verfügbarkeitssuche und Suchergebnisse.

Übernehmen die Widgets meine globalen Farben?

Die Widgets haben keinen eigenen Reiter Stil: Ihre Darstellung hängt von den Stilen des Plugins und Ihres Themes ab. Prüfen Sie die Darstellung nach jeder Änderung des globalen Kits.