Hallo zusammen und herzlich willkommen zu diesem Blog-Beitrag! Heute möchte ich euch zeigen, wie ihr mit Elementor Pro ein Popup erstellen könnt, das durch Klicken auf einen Button angezeigt wird. Viele von euch haben mich gefragt, ob es möglich ist, eine solche Funktion zu integrieren und dabei HTML-Code für die Terminbuchung, wie beispielsweise Calendly, einzufügen. In diesem Blog-Beitrag gebe ich euch eine Schritt-für-Schritt-Anleitung, wie ihr das mit dem Off-Canvas-Widget machen könnt.

Schritt 1: Element hinzufügen

Zuallererst benötigen wir ein anklickbares Element auf der Webseite. In diesem Beispiel verwenden wir den Button „Termin buchen“. Wenn ihr auf diesen Button klickt, passiert zunächst nichts. Um das zu ändern, nutzen wir das Off-Canvas-Widget.

Klickt auf „Element hinzufügen“.
Sucht das Off-Canvas-Widget und fügt es hinzu.
Platziert das Widget an einer beliebigen Stelle auf der Seite.

Schritt 2: Bearbeitungsmodus und HTML-Code einfügen

Im nächsten Schritt schließen wir den Bearbeitungsmodus und wechseln zur Vorschau. Ihr werdet bemerken, dass das Widget unsichtbar ist. Das ist genau richtig, denn es soll erst sichtbar werden, wenn der Button geklickt wird.

Öffnet den Bearbeitungsmodus erneut.
Fügt den HTML-Code für die Terminbuchung ein.
- Geht auf eure Calendly-Seite.
- Wählt „Share“ und dann „Inline-Einbettung dann “Der Website hinzufügen“.
- Kopiert den generierten HTML-Code und fügt ihn in das Widget ein.

Schritt 3: Widget-Styling

Nun könnt ihr das Widget nach euren Wünschen gestalten.

Stellt die Position und Breite des HTML-Codes ein.
Wählt „Fit to Content“ für die Höhe, sodass sich das Widget automatisch der Höhe des Inhalts anpasst.
Unter Einstellungen könnt ihr Animationen wie „Fade In“ und „Fade Out“ auswählen, um das Popup ansprechend erscheinen und verschwinden zu lassen.
Stellt die Animationsdauer auf eine Sekunde ein.

Schritt 4: Interaktionen und Close-Button hinzufügen

Es ist wichtig, dass die Seite während der Popup-Anzeige nicht scrollbar ist.

Geht zu den Interaktionen und wählt „Disable Page Scrolling“.
Hinzu kommt ein Close-Button:
- Fügt ein Icon hinzu, das als Schließ-Button dient.
- Platziert und gestaltet das Icon nach Belieben.

Schritt 5: Off-Canvas-Popup mit Button verknüpfen

Jetzt verknüpfen wir den „Termin buchen“ Button mit dem Off-Canvas-Widget:

Wählt den Button und geht zu „Link“.
Fügt dynamische Attribute hinzu und verknüpft sie mit dem Off-Canvas-Widget.
Wählt die Aktion „Open Canvas“.

Zum Schließen des Popups verlinkt ihr das Close-Icon ebenfalls mit den dynamischen Attributen und der Aktion „Close on Canvas“.

Testen und Veröffentlichen

Testet das Popup in der Vorschau.
Stellt sicher, dass alles wie gewünscht funktioniert.
Veröffentlicht die Änderungen.

Fazit

Ich hoffe, ihr fandet diese Anleitung hilfreich! Mit dem Off-Canvas-Widget habt ihr eine einfache und effektive Möglichkeit, Popups in eure Webseite zu integrieren und zu gestalten, ohne dass komplizierte Einstellungen notwendig sind. Falls ihr weitere Videos oder Blog-Beiträge zu Elementor und Webdesign wünscht, hinterlasst mir gerne einen Kommentar, liked den Beitrag und abonniert meinen Kanal.

Bis zum nächsten Mal!

Euer Thomas