Pop-ups in Avada erstellen

Darauf haben wohl viele Avada-Spezialisten gewartet: endlich können Popups und Sliding Bars direkt in Avada mit dem Avada Builder erstellt werden. Und das ist nicht alles: Die verschiedenen Einsatzmöglichkeiten und Triggers sind einfach unglaublich. Das Modul dazu in Avada heisst «Off Canvas» und wurde mit der Version 7.6 veröffentlicht.

So erstellst du ein Popup mit dem Avada Builder

Aktualisiere zuerst dein Avada Theme und Avada Builder sowie Core auf die neuste Version (7.6.). Dann findest du neu im Avada-Menü die Rubrik «Off Canvas». Dort kannst du einen Titel für dein Popup eingeben und ein Off Canvas erstellen.

Danach öffnet sich der Avada Builder, auf den ich hier nicht weiter eingehen muss. Baue hier dein Popup so, wie du es möchtest.

Popup Einstellungen – Allgemein und Design

Wenn du nach unten scrollst, findest du nun die vielfältigen Einstellungen für Popups in Avada. In den Tabs «General (Allgemein)» und «Design (Gestaltung)» kannst du mal grundsätzlich definieren, wie dein Popup aussehen soll.

1. Wähle den Off Canvas Typ. Ein Popup poppt auf, eine Sliding Bar «slidet» auf der Seite deiner Website rein.
2. Background Color: Wähle die Hintergrundfarbe von deinem Off Canvas
3. Padding: Gib ein Padding ein, damit der Inhalt nicht am Rand klebt

Popup Einstellungen – Overlay und Close-Buttons

1. Stelle das Overlay ein. Standardmässig ist bereits ein transparent-schwarzes Overlay drin. Ein Overlay ist eine Farbe, welche im Hintergrund des Popups über deine Website gelegt wird. So kommt das Popup mehr zur Geltung.
2. Close-Button: Definiere deinen Schliessen-Button. Standardmässig ist es ein Kreuz in der oberen rechten Ecke. Ich empfehle, dieses unbedingt drin zu lassen, damit Besucher das Popup leichter ausblenden können. Grösse, Farbe und Icon kannst du aber selber wählen.

Popup Einstellungen – Conditions

In den Conditions kannst du Bedingungen festlegen, wo dein Popup oder deine Sliding Bar angezeigt werden soll. Standardmässig wird das Off Canvas auf deiner gesamten Website angezeigt. Du kannst es aber hier auf einzelne Seiten oder Beiträge reduzieren.

Popup Einstellungen – Triggers

Und nun kommen wir zum spannenden Teil: Die Triggers. Die Triggers bestimmen nicht wo, sondern wann dein Popup angezeigt wird.

1. On Page Load: Die Standardeinstellung. Dein Popup wird angezeigt, sobald die in den Bedingungen definierte Seite aufgerufen wird.
2. Time On Page: Lege eine bestimmte Zeit fest, nach der dein Popup geöffnet wird (z.B. nach 5 Sekunden)
3. On Scroll: Lege einen bestimmten Scroll-Punkt deiner Seite fest, wo das Popup geöffnet werden soll. Du kannst eine Pixelanzahl eingeben, oder aber auf ein bestimmtes Element via CSS ID verweisen.
4. On Click: Das Popup öffnet sich, wenn der Nutzer auf ein bestimmtes Element klickt (z.B. ein Bild oder Button)
5. Exit Intent: Deine Website kann erkennen, wenn ein Nutzer vor hat, deine Website zu verlassen. Genau dann kannst du ihm ein Popup unterjubeln, damit er/sie deine Website eben doch nicht verlässt.
6. After Inactivity: War ein Nutzer eine bestimmte Zeit nicht auf deiner Website aktiv, kannst du das Popup anzeigen lassen.

Popup Einstellungen – Rules

In den Rules können weitere Einstellungen gemacht werden, wann und wie oft das Popup angezeigt wird oder wer das Popup sehen kann.

1. Frequency: Definiert, wie oft das Popup angezeigt werden soll. Immer oder nur einmal, eine bestimmte Häufigkeit, einmal pro Tag, etc.
2. Show when arriving from: Meiner Ansicht nach eine sehr spannende Regel. Hier kannst du bestimmen, dass dein Popup beispielsweise nur kommt, wenn ein Nutzer via Google oder einem anderen externen Link wie Instagram oder Facebook zu dir gekommen ist.
3. User Role: Zeige dein Popup nur eingeloggten Benutzern. Dies kann interessant sein bei Online-Shops mit WooCommerce.
4. Device: Zeige dein Popup nur auf bestimmten Devices. Zum Beispiel nur auf Desktop, oder nur auf mobile.