Ihre eigene Website erstellen von A-Z

Suche

Beiträge Elementor Einführung

  1. Elementor
  2. Elementor1
  3. Theme Builder 2
  4. Theme Builder 3
  5. Theme-Builder - Popup Kontakt / Seitl. Logo

Beitragsseiten

Seite 1 von 2

Erstellung eines Pop-ups mit Kontaktformular,
das auf einen Button verlinkt ist

Mit Elementor Pro können Sie ein Popup erstellen, das ein Kontaktformular enthält und durch das Klicken auf einen Button ausgelöst wird. Hier erkläre ich Ihnen Schritt für Schritt, wie Sie dies umsetzen können, und gebe Ihnen drei konkrete Beispiele mit einer grafischen Darstellung.

1. Schritt: Kontaktformular erstellen

  1. Kontaktformular-Widget hinzufügen:
    • Öffnen Sie den Elementor-Editor für eine beliebige Seite.
    • Ziehen Sie das Formular-Widget in den Arbeitsbereich.
    • Gestalten Sie das Formular mit den gewünschten Feldern (z. B. Name, E-Mail, Nachricht).
  2. Formular-Einstellungen anpassen:
    • Gehen Sie zu den Inhaltseinstellungen des Formulars.
    • Legen Sie fest, wohin die Formulardaten gesendet werden sollen (z. B. E-Mail-Adresse).
    • Optional: Fügen Sie eine Erfolgsmeldung hinzu, die nach dem Absenden angezeigt wird.
  3. Speichern:
    • Speichern Sie das Formular als Vorlage, damit Sie es später im Popup verwenden können.

2. Schritt: Popup erstellen

  1. Neues Popup erstellen:
    • Gehen Sie im WordPress-Dashboard zu Templates > Popups.
    • Klicken Sie auf Neu hinzufügen, geben Sie dem Popup einen Namen (z. B. „Kontaktformular-Popup“) und starten Sie den Elementor-Editor.
  2. Popup-Design gestalten:
    • Wählen Sie ein leeres Popup oder eine Vorlage aus.
    • Ziehen Sie das Formular-Widget in das Popup und wählen Sie das zuvor erstellte Kontaktformular aus.
    • Passen Sie das Design des Popups an (z. B. Hintergrundfarbe, Rahmen, Abstände).
  3. Schließen-Button hinzufügen:
    • Elementor fügt standardmäßig einen Schließen-Button hinzu. Sie können diesen anpassen oder verschieben (z. B. in die obere rechte Ecke).
  4. Popup-Einstellungen konfigurieren:
    • Klicken Sie unten links auf das Zahnradsymbol (Popup-Einstellungen).
    • Legen Sie die Breite, Höhe und Animation des Popups fest.
    • Aktivieren Sie die Option „Klick außerhalb des Popups schließt es“, falls gewünscht.

3. Schritt: Trigger und Bedingungen festlegen

  1. Trigger deaktivieren:
    • Da das Popup nur durch einen Button ausgelöst werden soll, deaktivieren Sie alle Trigger (z. B. „Beim Laden der Seite“ oder „Beim Scrollen“).
  2. Bedingungen festlegen:
    • Wählen Sie aus, auf welchen Seiten das Popup verfügbar sein soll (z. B. auf der gesamten Website oder nur auf bestimmten Seiten).
  3. Speichern und veröffentlichen:
    • Speichern Sie das Popup und veröffentlichen Sie es.

4. Schritt: Button mit Popup verlinken

  1. Button hinzufügen:
    • Gehen Sie zu der Seite, auf der der Button erscheinen soll.
    • Ziehen Sie das Button-Widget in den Arbeitsbereich.
  2. Popup mit Button verknüpfen:
    • Wählen Sie den Button aus und gehen Sie zu den Link-Einstellungen.
    • Geben Sie im Feld „Link“ den Befehl popup ein und wählen Sie das zuvor erstellte Popup aus der Liste aus.
  3. Button-Design anpassen:
    • Gestalten Sie den Button (z. B. Farbe, Größe, Text) passend zum Design Ihrer Website.
  4. Speichern und testen:
    • Speichern Sie die Seite und testen Sie, ob das Popup korrekt angezeigt wird, wenn der Button geklickt wird.

Drei Beispiele für Pop-ups mit Kontaktformular

Beispiel 1: Allgemeines Kontaktformular

  • Ziel: Nutzer können schnell eine Nachricht senden.
  • Design: Minimalistisches Popup mit einem weißen Hintergrund und einem einfachen Formular.
  • Button-Text: „Kontaktieren Sie uns“.

Beispiel 2: Terminvereinbarung

  • Ziel: Nutzer können einen Termin anfragen.
  • Design: Popup mit einem Kalender-Widget und einem Formular.
  • Button-Text: „Termin vereinbaren“.

Beispiel 3: Feedback-Formular

  • Ziel: Nutzer können Feedback zur Website oder zum Service geben.
  • Design: Popup mit einem Bewertungsfeld (z. B. Sternebewertung) und einem Textfeld.
  • Button-Text: „Feedback geben“.

Zusammenfassung

Mit Elementor Pro können Sie Pop-ups mit Kontaktformularen erstellen, die durch Buttons ausgelöst werden. Diese Pop-ups sind ideal für Kontaktanfragen, Terminvereinbarungen oder Feedback. Durch die flexible Gestaltung und einfache Verknüpfung mit Buttons können Sie die Nutzererfahrung auf Ihrer Website erheblich verbessern.