Ein Elementor Buchungssystem richtest du in wenigen Schritten ein: Erstelle dein Angebot (zum Beispiel ein kostenloses 30-minütiges Erstgespräch), kopiere den Einbettungscode, füge ihn in Elementor über das HTML-Widget ein und prüfe die Buchung auf der veröffentlichten Seite. Diese Anleitung richtet sich an Webdesigner, Freelancer und kleine Agenturen, die Termin- oder Kursbuchungen in Kundenwebsites mit Elementor integrieren, und an Dienstleister, die ihre eigene Elementor-Website selbst bearbeiten.
mivo booking ist ein externes Online-Buchungssystem. Es ist weder ein natives Elementor-Widget noch ein WordPress-Plugin. Die Buchungslogik läuft extern; Elementor zeigt die Buchungsoberfläche über einen Embed-Code an.
So sieht die fertige Terminbuchung in Elementor aus
Stell dir eine Service-Seite vor: kurze Beschreibung deines Angebots, darunter der eingebettete Buchungsbereich. So wirkt ein Elementor Buchungssystem für Besucher wie ein natürlicher Teil der Website. Sie wählen Datum und Uhrzeit, geben ihre Daten ein und erhalten eine Bestätigung, ohne dass du WordPress für jede Buchung anfassen musst.
Als durchgängiges Beispiel nutzen wir ein kostenloses 30-minütiges Erstgespräch. Genauso funktioniert der Ablauf für bezahlte Termine oder Kurse mit mehreren Plätzen. Auf deiner Elementor-Seite erscheint der Buchungsfluss deines Elementor Buchungssystems direkt im Embed.
Wenn du eher die allgemeine WordPress-Einbindung suchst (Gutenberg und andere Pagebuilder), lies ergänzend: Buchungssystem zu WordPress hinzufügen.
Was du für die Einrichtung brauchst
- Einen Account bei mivo booking
- Zugriff auf die WordPress-Website mit Elementor (das HTML-Widget gehört zur Elementor-Basis; Elementor Pro ist dafür nicht nötig)
- Eine Seite, die du mit Elementor bearbeiten und veröffentlichen darfst
- Optional: Google-Konto für die Kalenderanbindung
- Optional: Stripe-Account und den Pro-Plan, wenn bei der Buchung bezahlt werden soll
Für dieses Elementor Buchungssystem brauchst du kein zusätzliches Buchungsplugin. Website-Einbettung und Google-Kalender-Synchronisation sind bereits im Free-Plan enthalten. Stripe-Zahlungen und das Entfernen des Brandings gehören zu Pro. Details stehen auf der Preisseite.
Im Free- und Pro-Plan kannst du mit Unlimited Bookings und Unlimited Event Types arbeiten. Bitte beachte dabei die Fair Use Richtlinie.
Elementor Buchungssystem einbinden: die Anleitung
1. Termin oder Kurs erstellen
Melde dich an und erstelle ein neues Ereignis. Der Einstieg heißt Neues Ereignis bzw. Ereignis erstellen. Lege zum Beispiel an:
- Name: „Kostenloses Erstgespräch“
- Dauer: 30 Minuten
- Preis: 0 (oder später einen Preis, wenn du Zahlungen nutzt)
- Verfügbare Termine oder Zeitslots
- Beschreibung und optional eigene Buchungsfragen
Sobald das Ereignis gespeichert ist, ist es über deine Buchungsseite buchbar. Als Nächstes bindest du dieses Angebot als Elementor Buchungssystem auf der Website ein.
2. Einbettungscode kopieren
Den Embed erhältst du als iframe-Code. Du hast zwei sinnvolle Wege:
Einzelnes Angebot einbetten: Öffne das Ereignis und wähle die Aktion Einbettung (Embed). Dort konfigurierst du Einbettungstyp (Standard oder Vollbild), Höhe, dynamische Höhe, Titel ausblenden, Ausrichtung und transparenten Hintergrund. Anschließend: Code erhalten und Code kopieren.
Gesamte Buchungsseite einbetten: Unter den Account-Einstellungen findest du den Bereich Website-Einbettung. Dort erzeugst du einen Embed für die komplette Buchungsübersicht, inklusive Optionen wie Tag-Filter, Titel, Profilbild, Filteranzeige und transparentem Hintergrund.
Für unser Erstgespräch-Beispiel eignet sich der Embed am einzelnen Ereignis am besten. So bleibt das Elementor Buchungssystem auf der Service-Seite klar auf dieses Angebot fokussiert.
3. Elementor-Seite öffnen und HTML-Widget einfügen
Öffne in WordPress die gewünschte Seite und starte den Elementor-Editor. Ziehe das Widget HTML an die Stelle, an der dein Elementor Buchungssystem erscheinen soll, zum Beispiel unter der Leistungsbeschreibung.
Laut der offiziellen Elementor-Dokumentation zum HTML-Widget fügst du HTML (und bei Bedarf CSS/JS) genau dort ein. Ein separates Buchungsplugin brauchst du dafür nicht.
4. Code einfügen und Buchungsbereich gestalten
Füge den kopierten iframe-Code in das HTML-Widget ein. In Elementor gestaltest du den umgebenden Bereich: Abstände, Spaltenbreite, Überschrift über dem Embed, Hintergrund der Sektion. Die Buchungsoberfläche selbst (Kalender, Formular, Preise) steuerst du im Buchungssystem, inklusive der Embed-Optionen wie Höhe und transparenter Hintergrund.
Tipp: Bei Standard-Einbettung oft die dynamische Höhe aktivieren und die Start-Höhe so wählen, dass der Buchungskalender Elementor sauber lesbar bleibt und nicht unnötig gestaucht wirkt. Bei Vollbild-Einbettung bedenkt, dass der Embed auf Viewport-Höhe ausgelegt ist. Das passt eher zu einer eigenen Buchungsseite als zu einem Abschnitt mitten auf einer Marketing-Seite.
5. Mobile Darstellung prüfen
Wechsle in Elementor in die responsive Vorschau (Tablet/Smartphone) und prüfe zusätzlich die echte Vorschau der Seite. Achte darauf, dass der iframe die volle verfügbare Breite nutzt (width="100%" ist im Embed-Code vorgesehen) und dass darunter keine wichtigen Inhalte abgeschnitten werden.
Wenn auf dem Smartphone ein doppelter Scrollbalken entsteht, prüfe zuerst die Embed-Höhe und die Höhe von Sektion oder Container in Elementor. Vermeide feste Höhen am umgebenden Container, die kleiner sind als der Buchungsinhalt.
6. Veröffentlichen und eine Testbuchung durchführen
Veröffentliche oder aktualisiere die Seite in Elementor. Öffne danach die live URL und führe eine Testbuchung mit eigenen Testdaten durch. So prüfst du, ob das Elementor Buchungssystem den kompletten Ablauf vom Formular bis zur Bestätigung im Dashboard korrekt abbildet.
Wie bei vielen Embeds und Widgets zeigt der Editor oft nur eine Vorschau. Den finalen Buchungsfluss siehst du am klarsten auf der veröffentlichten Seite.
Optional: Zahlungen und Kalender verbinden
Google Kalender: Die Anbindung ist in Free und Pro verfügbar. Verbunden wird sie in den Einstellungen zur Kalenderintegration. Neue Buchungen können dann in deinem Kalender landen und helfen, Konflikte zu vermeiden.
Stripe-Zahlungen: Wenn Kunden bei der Buchung bezahlen sollen, brauchst du Stripe und den Pro-Plan. Für ein kostenloses Erstgespräch reicht Free. Sobald du bezahlte Sessions oder Kurse anbietest, aktivierst du Zahlungen und setzt den Preis am Ereignis.
Tarifdetails findest du auf der Preisseite. Wenn du noch vergleichst, welche Software zu Dienstleistern passt, hilft auch der Überblick: Beste Buchungssoftware für Dienstleistungsunternehmen.
Häufige Probleme und ihre Lösungen
Editor zeigt etwas anderes als die Live-Seite
Prüfe die veröffentlichte Seite in einem Inkognito-Fenster. Speichere oder aktualisiere in Elementor erneut. Leere bei Bedarf den Cache von Caching-Plugins oder des Hosters. Sicherheitsfunktionen musst du dafür nicht pauschal abschalten.
Einbettung bleibt leer oder lädt nicht
Kontrolliere, ob der komplette iframe-Code im HTML-Widget steht und nicht durch einen anderen Code-Block zerschnitten wurde. Öffne die Embed-URL aus dem src-Attribut direkt im Browser. Funktioniert die URL dort, liegt es meist an Cache oder einem fehlerhaft eingefügten Code auf der Seite.
Inhalt wirkt abgeschnitten oder doppelt scrollbar auf dem Smartphone
Erhöhe die Höhe im Embed bzw. aktiviere die dynamische Höhe, prüfe Padding der Elementor-Sektion und vermeide verschachtelte Container mit fester Maximalhöhe um den iframe.
Änderungen am Angebot erscheinen nicht
Änderungen an Terminen, Preisen oder Texten speicherst du im Buchungssystem. Der Embed lädt die aktuelle Buchungsoberfläche. Den iframe-Code musst du nicht bei jeder Textänderung neu einfügen. Neu kopieren musst du ihn vor allem dann, wenn sich Embed-Optionen oder die Ziel-URL ändern.
Für Webdesigner: Buchungssystem an den Kunden übergeben
Für Agenturprojekte gilt: Das Konto sollte dem Kunden gehören. So kannst du das Elementor Buchungssystem einmal einrichten und Buchungen, Kundendaten, Kalender sowie später Zahlungen bleiben in seiner Verantwortung, unabhängig von deinem Agenturzugang.
- Kunde legt den Account an (oder du richtest ihn mit seiner E-Mail ein und übergibst den Zugang)
- Du erstellst Ereignisse, Embed und Elementor-Einbindung
- Kalender und optional Stripe verbindet der Kunde mit seinen eigenen Konten
- Du zeigst kurz, wo Buchungen im Dashboard liegen und wie er Angebote anpasst
Eine zentrale Mandantenverwaltung („Agentur steuert alle Kunden in einem Konto“) ist für diesen Ablauf nicht Voraussetzung. Jede Website bekommt ihr eigenes Konto und den passenden Embed.
Häufige Fragen zur Elementor Terminbuchung
Brauche ich Elementor Pro?
Nein. Für ein Elementor Buchungssystem reicht das HTML-Widget der Elementor-Basisversion.
Brauche ich ein zusätzliches Buchungsplugin?
Nein. Du bindest das Buchungssystem in Elementor ein, ohne ein zusätzliches Plugin. mivo booking läuft extern; WordPress und Elementor zeigen nur den Embed an.
Können Kunden bei der Buchung bezahlen?
Ja. Bei einem Elementor Buchungssystem mit Stripe im Pro-Plan können Kunden direkt bei der Buchung bezahlen. Für kostenlose Termine ist das nicht nötig.
Kann ich Kurse mit mehreren Teilnehmern anbieten?
Ja. Du kannst buchbare Ereignisse mit Kapazität anlegen, also auch Gruppenformate, nicht nur 1:1-Termine.
Welche Gestaltung erfolgt in Elementor und welche im Buchungssystem?
In Elementor gestaltest du Layout, Abstände, Typografie um den Embed und CTA-Texte. Im Buchungssystem steuerst du Angebote, Verfügbarkeit, Preise, Buchungsfragen, Bestätigungen, Kalender, Zahlungen und Embed-Optionen. So teilt sich die Arbeit beim Elementor Buchungssystem klar auf.
Nächster Schritt: Erstelle dein Erstgespräch, kopiere den Embed-Code und setze dein Elementor Buchungssystem mit dem HTML-Widget auf deiner Seite. Jetzt kostenlos mit mivo booking starten →
