Das Theme Avada bietet eine hervorragende Funktion, die es ermöglicht, Pop-ups (auch Lightboxes genannt) ohne den Einsatz von zusätzlichen Plugins zu erstellen. Diese Funktion ist besonders hilfreich für Anwendungsfälle wie Newsletter-Anmeldungen, die durch einen Klick auf einen Button ausgelöst werden können. Im Folgenden bzw. im Video erkläre ich dir Schritt für Schritt, wie du ein solches Pop-up in Avada erstellst und einrichtest.
Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSchritt 1: Pop-up benennen und erstellen
Um zu starten, melde dich im Backend deiner WordPress-Website an und gehe zu den Avada-Einstellungen:
- Klicke auf Avada.
- Wähle den Punkt Off Canvas. (Hinweis: In der deutschen Übersetzung von Avada ist dieser Bereich als „Aus Leinwand“ bezeichnet.)
- Gib dem Pop-up z.B. den Namen Newsletter Anmeldung Button. Es ist sinnvoll, das Pop-up so zu benennen, dass du auch in der Zukunft noch weißt, wofür es gedacht ist.
- Klicke auf Create New Off Canvas, um das neue Pop-up zu erstellen.
Schritt 2: Das Pop-up im Live Builder bearbeiten
Du kannst das Pop-up entweder über die klassischen Avada-Elemente oder den Live Builder bearbeiten. Ich bevorzuge den Live Builder, da er eine intuitive und visuelle Bearbeitung ermöglicht:
Füge zunächst einen Container hinzu und gehe in diesem wie folgt vor:
- Erstelle ein Textelement innerhalb des Containers und schreibe einen Text wie „Melde dich an“ oder „Hier geht es zum Newsletter“.
- Füge ein Codeelement ein, kopiere den HTML Code aus deinem Newsletter Tool, füge ihn ein.
- Nun passe die Ansicht an - meine Tipps und Tricks dazu verrate ich dir im Video.
Schritt 3: Kümmere dich um die Einstellungen
- Unter Conditions einschalten (enable)
- Bei den Triggern „on click“ auswählen
- Vergib beim Element Selector einen Namen, beginnend mit einem „.“ und mit Kleinbuchstaben ohne Leerzeichen
- Unter Animation kannst du z.B. die Art des Erscheinens einstellen
- Speichern nicht vergessen!
Schritt 4: Hinterlege das Pop-up beim Button
- Wechsel zu der Seite, auf der der gewünschte Button ist und klicke beim Button auf bearbeiten.
- Im Karteireiter „General“ gibst du unter der „CSS Class“ die vorher gewählte Bezeichnung ohne den „.“ ein!
- Vergiss nicht, die Seite zu speichern.
Schritt 5: Testen
Nachdem du dein Pop-up erstellt hast, vergiss nicht den reibungslosen Ablauf selbst zu testen:
- Öffne deine Seite in einem Inkognito Fenster (bzw. anonymen Fenster).
- Klicke auf den Button, melde dich mit einer E-Mail-Adresse an, die noch nicht bei dir im Newsletter ist und prüfe ob der Prozess richtig abläuft.
- Schau dir die Darstellung deines Pop-ups auch am Mobiltelefon an, ob alles hübsch und richtig dargestellt wird.
Bonustipp
Wenn du, so wie ich oft testen musst, dann gehen dir schnell mal die unterschiedlichen Mailadressen aus. Wenn du eine Gmail Adresse hast, dann kannst du diese einfach mit einem Zusatz versehen (ohne extra etwas einrichten zu müssen!) und hast sofort eine neue Mailadresse. Alle an diese Mailadresse gesendeten Mails kommen in das Postfach deines Gmail Kontos.
Beispiel:
Deine E-Mailadresse lautet susi.muster@gmail.com, dann kannst du auch susi.muster+Pop-up@gmail.com nutzen. Nach dem Plus kannst du jeden beliebigen Text anhängen.
Achtung: Stolperfallen, die du vermeiden darfst
- Vergiss nicht das Pop-up in den Einstellungen unter Conditions zu aktivieren!
- Beim Einfügen des CSS Elementnamens beim Button bitte OHNE den Punkt!
Pop-ups nicht nur bei Buttons hinterlegen
Es gibt viele Möglichkeiten Pop-ups auf deiner Webseite zu nutzen. Auch wenn ich dir empfehle es nicht zu exzessiv zu betreiben. 😂
Hier eine kurze Erklärung der unterschiedlichen Einstellungsmöglichkeiten.
- On Page Load: Dies ist die Standardeinstellung – d.h. dein Pop-up wird angezeigt, sobald jemand eine Seite aufruft.
- Time On Page: Hier kannst du eine Zeitspanne festlegen, nach der dein Pop-up geöffnet wird (z.B. nach 10 Sekunden)
- On Scroll: Diese Einstellung ermöglicht es, dass sich dein Pop-up öffnet, wenn Besucher bist zu einem bestimmten Punkt auf der Seite gescrollt haben.
- On Click: Das Pop-up öffnet sich, wenn BesucherInnen auf ein bestimmtes Element klicken – wie bei uns jetzt z.B. auf den Button
- Exit Intent: Deine Website erkennt, wenn BesucherInnen vorhaben, deine Website zu verlassen. Genau in diesem Moment kannst du ein Pop-up öffnen lassen, um sich noch ein wenig auf der Seite zu behalten oder nicht ohne ein Geschenk zu gehen usw.
- After Inactivity: Wenn BesucherInnen eine bestimmte Zeit auf deiner Website inaktiv sind, kannst du ein Pop-up anzeigen lassen. Vielleicht nicht gerade mit dem Text „Bist du eingeschlafen“ 😂
Mit Pop-ups hast du eine schöne Möglichkeit das Nutzererlebnis deiner Webseite zu verbessern und gleichzeitig die Spameintragungen für deinen Newsletter zu minimieren. Ich wünsche dir viel Spaß beim Umsetzen!
Deine
