Mit Divi 5 sind viele Veränderungen gekommen, manche die mir nicht gefallen und manche die ich total cool finde. So kann man mit Divi 5 jetzt auch, ohne dass man ein zusätzliches Plugin installieren muss, ein Popup einrichten. Und genau das zeige ich euch heute.

Video

Canvas

Als erstes macht ihr die Seite fertig, wo ihr das Popup gerne haben möchtet, und danach erstellt ihr ein neues Canvas.

Ich schlage vor, ihr gebt ihm einen einfachen Namen und einen hohen Z-Index. Wenn ihr das Popup auch bei anderen Seiten anzeigen wollt, dann klickt auf Make Global, sonst lasst ihr diesen Punkt so, wie er war.

Interaction zum schliessen

Nun könnt ihr im Canvas das Popup designen. Design und Position einstellen usw.

Wenn alles gemacht ist, habt ihr entweder ein X-Icon als Schliessbutton definiert oder ihr definiert das ganze Popup als anklickbar / schliessbar.

Danach geht ihr bei Interaction rein und wählt den Trigger Event aus mit Clicks, Effect Hide Element und Target Modul das eigentliche Popup.

Danach könnt ihr noch das ganze Popupdesign bei Visibility auf deaktiviert umstellen.

Somit wären wir hier fertig.

Interaction zum öffnen

Jetzt geht ihr wieder zur normalen Seitenansicht / Canvas wechseln und ihr klickt oben auf das Zahnrad-Icon der Sektion und hier könnt ihr wieder eine Interaction einbauen.

Nehmt Load als Trigger Event, wenn ihr das Popup automatisch einblenden wollt, oder Click, wenn ihr das Popup durch einen Klick aktivieren wollt. Danach Effect natürlich Show Element und bei Target müsst ihr die Sektion auswählen vom anderen Canvas (darum ist die Bezeichnung der einzelnen Elemente sehr wichtig).

Wenn ihr wollt, könnt ihr jetzt noch eine Verzögerung einbauen.

Popup testen

Damit ist das Popup fertig eingerichtet, ihr könnt den Divi Builder deaktivieren und testen, ob euer Popup funktioniert 🙂

Viel Spass mit eurem neuen Popup.