{"id":1127,"date":"2026-09-08T13:13:45","date_gmt":"2026-09-08T11:13:45","guid":{"rendered":"https:\/\/mivo-booking.com\/?p=1127"},"modified":"2026-09-08T13:13:46","modified_gmt":"2026-09-08T11:13:46","slug":"elementor-buchungssystem","status":"publish","type":"post","link":"https:\/\/mivo-booking.com\/de\/elementor-buchungssystem\/","title":{"rendered":"Buchungssystem in Elementor einbinden: Schritt f\u00fcr Schritt"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Ein <strong>Elementor Buchungssystem<\/strong> richtest du in wenigen Schritten ein: Erstelle dein Angebot (zum Beispiel ein kostenloses 30-min\u00fctiges Erstgespr\u00e4ch), kopiere den Einbettungscode, f\u00fcge ihn in Elementor \u00fcber das HTML-Widget ein und pr\u00fcfe die Buchung auf der ver\u00f6ffentlichten 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.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>mivo booking<\/strong> ist ein externes Online-Buchungssystem. Es ist weder ein natives Elementor-Widget noch ein WordPress-Plugin. Die Buchungslogik l\u00e4uft extern; Elementor zeigt die Buchungsoberfl\u00e4che \u00fcber einen Embed-Code an.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"so-sieht-die-fertige-terminbuchung-in-elementor-aus\">So sieht die fertige Terminbuchung in Elementor aus<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Stell dir eine Service-Seite vor: kurze Beschreibung deines Angebots, darunter der eingebettete Buchungsbereich. So wirkt ein Elementor Buchungssystem f\u00fcr Besucher wie ein nat\u00fcrlicher Teil der Website. Sie w\u00e4hlen Datum und Uhrzeit, geben ihre Daten ein und erhalten eine Best\u00e4tigung, ohne dass du WordPress f\u00fcr jede Buchung anfassen musst.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Als durchg\u00e4ngiges Beispiel nutzen wir ein <strong>kostenloses 30-min\u00fctiges Erstgespr\u00e4ch<\/strong>. Genauso funktioniert der Ablauf f\u00fcr bezahlte Termine oder Kurse mit mehreren Pl\u00e4tzen. Auf deiner Elementor-Seite erscheint der Buchungsfluss deines Elementor Buchungssystems direkt im Embed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn du eher die allgemeine WordPress-Einbindung suchst (Gutenberg und andere Pagebuilder), lies erg\u00e4nzend: <a href=\"https:\/\/mivo-booking.com\/de\/buchungssystem-zu-wordpress-hinzufuegen\/\">Buchungssystem zu WordPress hinzuf\u00fcgen<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"was-du-fuer-die-einrichtung-brauchst\">Was du f\u00fcr die Einrichtung brauchst<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Einen Account bei <a href=\"https:\/\/mivo.so\/de\/signup\" target=\"_blank\" rel=\"noopener\">mivo booking<\/a><\/li>\n<li>Zugriff auf die WordPress-Website mit Elementor (das HTML-Widget geh\u00f6rt zur Elementor-Basis; Elementor Pro ist daf\u00fcr nicht n\u00f6tig)<\/li>\n<li>Eine Seite, die du mit Elementor bearbeiten und ver\u00f6ffentlichen darfst<\/li>\n<li>Optional: Google-Konto f\u00fcr die Kalenderanbindung<\/li>\n<li>Optional: Stripe-Account und den Pro-Plan, wenn bei der Buchung bezahlt werden soll<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr dieses Elementor Buchungssystem brauchst du kein zus\u00e4tzliches Buchungsplugin. Website-Einbettung und Google-Kalender-Synchronisation sind bereits im Free-Plan enthalten. Stripe-Zahlungen und das Entfernen des Brandings geh\u00f6ren zu Pro. Details stehen auf der <a href=\"https:\/\/mivo-booking.com\/de\/preise\/\">Preisseite<\/a>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Im Free- und Pro-Plan kannst du mit <strong>Unlimited Bookings<\/strong> und <strong>Unlimited Event Types<\/strong> arbeiten. Bitte beachte dabei die <a href=\"https:\/\/mivo-booking.com\/de\/fair-use-richtlinie\/\">Fair Use Richtlinie<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"elementor-buchungssystem-einbinden-die-anleitung\">Elementor Buchungssystem einbinden: die Anleitung<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-termin-oder-kurs-erstellen\">1. Termin oder Kurs erstellen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Melde dich an und erstelle ein neues Ereignis. Der Einstieg hei\u00dft <strong>Neues Ereignis<\/strong> bzw. Ereignis erstellen. Lege zum Beispiel an:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Name: \u201eKostenloses Erstgespr\u00e4ch\u201c<\/li>\n<li>Dauer: 30 Minuten<\/li>\n<li>Preis: 0 (oder sp\u00e4ter einen Preis, wenn du Zahlungen nutzt)<\/li>\n<li>Verf\u00fcgbare Termine oder Zeitslots<\/li>\n<li>Beschreibung und optional eigene Buchungsfragen<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Sobald das Ereignis gespeichert ist, ist es \u00fcber deine Buchungsseite buchbar. Als N\u00e4chstes bindest du dieses Angebot als Elementor Buchungssystem auf der Website ein.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-einbettungscode-kopieren\">2. Einbettungscode kopieren<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Den Embed erh\u00e4ltst du als <strong>iframe-Code<\/strong>. Du hast zwei sinnvolle Wege:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Einzelnes Angebot einbetten:<\/strong> \u00d6ffne das Ereignis und w\u00e4hle die Aktion <strong>Einbettung<\/strong> (Embed). Dort konfigurierst du Einbettungstyp (Standard oder Vollbild), H\u00f6he, dynamische H\u00f6he, Titel ausblenden, Ausrichtung und transparenten Hintergrund. Anschlie\u00dfend: <strong>Code erhalten<\/strong> und <strong>Code kopieren<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Gesamte Buchungsseite einbetten:<\/strong> Unter den Account-Einstellungen findest du den Bereich <strong>Website-Einbettung<\/strong>. Dort erzeugst du einen Embed f\u00fcr die komplette Buchungs\u00fcbersicht, inklusive Optionen wie Tag-Filter, Titel, Profilbild, Filteranzeige und transparentem Hintergrund.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr unser Erstgespr\u00e4ch-Beispiel eignet sich der Embed am einzelnen Ereignis am besten. So bleibt das Elementor Buchungssystem auf der Service-Seite klar auf dieses Angebot fokussiert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-elementor-seite-oeffnen-und-html-widget-einfuegen\">3. Elementor-Seite \u00f6ffnen und HTML-Widget einf\u00fcgen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00d6ffne in WordPress die gew\u00fcnschte Seite und starte den Elementor-Editor. Ziehe das Widget <strong>HTML<\/strong> an die Stelle, an der dein Elementor Buchungssystem erscheinen soll, zum Beispiel unter der Leistungsbeschreibung.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Laut der <a href=\"https:\/\/elementor.com\/help\/edit-html-elementor\/\" rel=\"noopener noreferrer\" target=\"_blank\">offiziellen Elementor-Dokumentation zum HTML-Widget<\/a> f\u00fcgst du HTML (und bei Bedarf CSS\/JS) genau dort ein. Ein separates Buchungsplugin brauchst du daf\u00fcr nicht.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-code-einfuegen-und-buchungsbereich-gestalten\">4. Code einf\u00fcgen und Buchungsbereich gestalten<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcge den kopierten iframe-Code in das HTML-Widget ein. In Elementor gestaltest du den umgebenden Bereich: Abst\u00e4nde, Spaltenbreite, \u00dcberschrift \u00fcber dem Embed, Hintergrund der Sektion. Die Buchungsoberfl\u00e4che selbst (Kalender, Formular, Preise) steuerst du im Buchungssystem, inklusive der Embed-Optionen wie H\u00f6he und transparenter Hintergrund.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tipp: Bei Standard-Einbettung oft die dynamische H\u00f6he aktivieren und die Start-H\u00f6he so w\u00e4hlen, dass der Buchungskalender Elementor sauber lesbar bleibt und nicht unn\u00f6tig gestaucht wirkt. Bei Vollbild-Einbettung bedenkt, dass der Embed auf Viewport-H\u00f6he ausgelegt ist. Das passt eher zu einer eigenen Buchungsseite als zu einem Abschnitt mitten auf einer Marketing-Seite.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-mobile-darstellung-pruefen\">5. Mobile Darstellung pr\u00fcfen<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Wechsle in Elementor in die responsive Vorschau (Tablet\/Smartphone) und pr\u00fcfe zus\u00e4tzlich die echte Vorschau der Seite. Achte darauf, dass der iframe die volle verf\u00fcgbare Breite nutzt (<code>width=\"100%\"<\/code> ist im Embed-Code vorgesehen) und dass darunter keine wichtigen Inhalte abgeschnitten werden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wenn auf dem Smartphone ein doppelter Scrollbalken entsteht, pr\u00fcfe zuerst die Embed-H\u00f6he und die H\u00f6he von Sektion oder Container in Elementor. Vermeide feste H\u00f6hen am umgebenden Container, die kleiner sind als der Buchungsinhalt.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-veroeffentlichen-und-eine-testbuchung-durchfuehren\">6. Ver\u00f6ffentlichen und eine Testbuchung durchf\u00fchren<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ver\u00f6ffentliche oder aktualisiere die Seite in Elementor. \u00d6ffne danach die live URL und f\u00fchre eine Testbuchung mit eigenen Testdaten durch. So pr\u00fcfst du, ob das Elementor Buchungssystem den kompletten Ablauf vom Formular bis zur Best\u00e4tigung im Dashboard korrekt abbildet.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Wie bei vielen Embeds und Widgets zeigt der Editor oft nur eine Vorschau. Den finalen Buchungsfluss siehst du am klarsten auf der ver\u00f6ffentlichten Seite.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"optional-zahlungen-und-kalender-verbinden\">Optional: Zahlungen und Kalender verbinden<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Google Kalender:<\/strong> Die Anbindung ist in Free und Pro verf\u00fcgbar. Verbunden wird sie in den Einstellungen zur Kalenderintegration. Neue Buchungen k\u00f6nnen dann in deinem Kalender landen und helfen, Konflikte zu vermeiden.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Stripe-Zahlungen:<\/strong> Wenn Kunden bei der Buchung bezahlen sollen, brauchst du Stripe und den Pro-Plan. F\u00fcr ein kostenloses Erstgespr\u00e4ch reicht Free. Sobald du bezahlte Sessions oder Kurse anbietest, aktivierst du Zahlungen und setzt den Preis am Ereignis.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Tarifdetails findest du auf der <a href=\"https:\/\/mivo-booking.com\/de\/preise\/\">Preisseite<\/a>. Wenn du noch vergleichst, welche Software zu Dienstleistern passt, hilft auch der \u00dcberblick: <a href=\"https:\/\/mivo-booking.com\/de\/beste-buchungssoftware-fuer-dienstleistungsunternehmen\/\">Beste Buchungssoftware f\u00fcr Dienstleistungsunternehmen<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"haeufige-probleme-und-ihre-loesungen\">H\u00e4ufige Probleme und ihre L\u00f6sungen<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Editor zeigt etwas anderes als die Live-Seite<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Pr\u00fcfe die ver\u00f6ffentlichte 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\u00fcr nicht pauschal abschalten.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Einbettung bleibt leer oder l\u00e4dt nicht<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Kontrolliere, ob der komplette iframe-Code im HTML-Widget steht und nicht durch einen anderen Code-Block zerschnitten wurde. \u00d6ffne die Embed-URL aus dem <code>src<\/code>-Attribut direkt im Browser. Funktioniert die URL dort, liegt es meist an Cache oder einem fehlerhaft eingef\u00fcgten Code auf der Seite.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Inhalt wirkt abgeschnitten oder doppelt scrollbar auf dem Smartphone<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Erh\u00f6he die H\u00f6he im Embed bzw. aktiviere die dynamische H\u00f6he, pr\u00fcfe Padding der Elementor-Sektion und vermeide verschachtelte Container mit fester Maximalh\u00f6he um den iframe.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00c4nderungen am Angebot erscheinen nicht<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u00c4nderungen an Terminen, Preisen oder Texten speicherst du im Buchungssystem. Der Embed l\u00e4dt die aktuelle Buchungsoberfl\u00e4che. Den iframe-Code musst du nicht bei jeder Text\u00e4nderung neu einf\u00fcgen. Neu kopieren musst du ihn vor allem dann, wenn sich Embed-Optionen oder die Ziel-URL \u00e4ndern.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fuer-webdesigner-buchungssystem-an-den-kunden-uebergeben\">F\u00fcr Webdesigner: Buchungssystem an den Kunden \u00fcbergeben<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">F\u00fcr Agenturprojekte gilt: Das Konto sollte dem Kunden geh\u00f6ren. So kannst du das Elementor Buchungssystem einmal einrichten und Buchungen, Kundendaten, Kalender sowie sp\u00e4ter Zahlungen bleiben in seiner Verantwortung, unabh\u00e4ngig von deinem Agenturzugang.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Kunde legt den Account an (oder du richtest ihn mit seiner E-Mail ein und \u00fcbergibst den Zugang)<\/li>\n<li>Du erstellst Ereignisse, Embed und Elementor-Einbindung<\/li>\n<li>Kalender und optional Stripe verbindet der Kunde mit seinen eigenen Konten<\/li>\n<li>Du zeigst kurz, wo Buchungen im Dashboard liegen und wie er Angebote anpasst<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Eine zentrale Mandantenverwaltung (\u201eAgentur steuert alle Kunden in einem Konto\u201c) ist f\u00fcr diesen Ablauf nicht Voraussetzung. Jede Website bekommt ihr eigenes Konto und den passenden Embed.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"haeufige-fragen-zur-elementor-terminbuchung\">H\u00e4ufige Fragen zur Elementor Terminbuchung<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Brauche ich Elementor Pro?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nein. F\u00fcr ein Elementor Buchungssystem reicht das HTML-Widget der Elementor-Basisversion.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Brauche ich ein zus\u00e4tzliches Buchungsplugin?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Nein. Du bindest das Buchungssystem in Elementor ein, ohne ein zus\u00e4tzliches Plugin. mivo booking l\u00e4uft extern; WordPress und Elementor zeigen nur den Embed an.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">K\u00f6nnen Kunden bei der Buchung bezahlen?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ja. Bei einem Elementor Buchungssystem mit Stripe im Pro-Plan k\u00f6nnen Kunden direkt bei der Buchung bezahlen. F\u00fcr kostenlose Termine ist das nicht n\u00f6tig.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Kann ich Kurse mit mehreren Teilnehmern anbieten?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Ja. Du kannst buchbare Ereignisse mit Kapazit\u00e4t anlegen, also auch Gruppenformate, nicht nur 1:1-Termine.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Welche Gestaltung erfolgt in Elementor und welche im Buchungssystem?<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In Elementor gestaltest du Layout, Abst\u00e4nde, Typografie um den Embed und CTA-Texte. Im Buchungssystem steuerst du Angebote, Verf\u00fcgbarkeit, Preise, Buchungsfragen, Best\u00e4tigungen, Kalender, Zahlungen und Embed-Optionen. So teilt sich die Arbeit beim Elementor Buchungssystem klar auf.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>N\u00e4chster Schritt:<\/strong> Erstelle dein Erstgespr\u00e4ch, kopiere den Embed-Code und setze dein Elementor Buchungssystem mit dem HTML-Widget auf deiner Seite. <a href=\"https:\/\/mivo.so\/de\/signup\" target=\"_blank\" rel=\"noopener\">Jetzt kostenlos mit mivo booking starten \u2192<\/a><\/p>\n\n","protected":false},"excerpt":{"rendered":"<p>Integriere eine Terminbuchung in deine Elementor-Website: Angebot erstellen, Embed-Code kopieren, HTML-Widget einf\u00fcgen und Testbuchung pr\u00fcfen.<\/p>\n","protected":false},"author":1,"featured_media":1146,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[30],"tags":[],"class_list":["post-1127","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-leitfaden"],"_links":{"self":[{"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/posts\/1127","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/comments?post=1127"}],"version-history":[{"count":10,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/posts\/1127\/revisions"}],"predecessor-version":[{"id":1153,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/posts\/1127\/revisions\/1153"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/media\/1146"}],"wp:attachment":[{"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/media?parent=1127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/categories?post=1127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mivo-booking.com\/de\/wp-json\/wp\/v2\/tags?post=1127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}