Hat man eine wichtige Information auf die man die Webseitenbesucher unbedingt aufmerksam machen möchte, dann sind Popups ein gern gesehenes Instrument. man kann damit Newsletter Abonnenten sammeln, Werbung für ein Event machen oder einfach die Leute einfach über etwas informieren.
Wenn man so etwas in Divi einsetzen möchte, dann gibt es viele Plugins mit dem man Popups erstellen kann – das ist etwas das kennen wir alle. Aber wusstet ihr das man eigentlich gar kein Plugin braucht? Mit nur wenig Zeichen Code kann man sein Divi so erweitern, so dass man Popups schnell selbst einsetzen kann.
In diesem Beitrag zeige ich dir, wie du so ein Popup in dein Divi WordPress einbauen kannst.
Video
Sektion erstellen
Wie ich schon sagte müsst ihr zuerst eine Sektion vorbereiten, die euer Popup sein soll. Hier könnt ihr euch austoben so wie ihr wollt. Danach müsst ihr dieser Sektion eine eigene CSS Klasse geben – nämlich ≪et-lb-content-1≫.
Wenn ihr es jetzt abspeichert, dann wird das Popup im oberen Teil der Webseite sein. Wenn ihr aber das Popup zentrieren wollt, dann müsst ihr den nächsten Abschnitt auch noch machen.
Denkt daran dass ihr bei der Background Farbe eine Farbe auswählt – das kann entweder eine Farbe sein die leicht transparent ist oder so. Schaut auch das ihr bei der Row und Modulen die Hintergrundfarbe abstellt oder definiert. Das geht gerne vergessen und dann sieht das Popup komisch aus….
Element Zentrieren
Wenn ihr die Elemente im Popup zentrieren wollt, dann müsst ihr in den Sektions Einstellung das ganze noch zentrieren. Einfach unter ≪Advanced≫ -> ≪Custom CSS≫ gehen und unter ≪Main Element≫ den folgenden CSS Code eingeben
1 2 3 4 | display: flex; justify-content: center; align-items: center; min-height: 100vh; |
Button erstellen
Nun könnt ihr einen Button erstellen oder einen Link. Dabei ist wichtig dass die URL ein # ist und die CSS Klasse et-lb-btn-1 eingebaut ist. Also als Beispiel hier:
1 | <a href="#" class="et-lb-btn-1">Start Popup</a> |
CSS
Nun müssen wir den folgenden CSS Code einbauen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | body:not(.et-fb-root-ancestor) [class*='et-lb-content'] {
position:fixed;
visibility:hidden;
top:0px;
z-index:999999;
min-height:100%;
transition:all .2s 0s;
width: 100%;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content'] .et_pb_row {
position:relative;
top:50px;
}
.et-lb-open {
visibility:visible!important;
width:100%;
}
span.et-lb-close {
font-size:46px;
right:-1vw;
margin-top:-51px;
display:block;
color:#ffffff; /* Farbe schliessendes X */
padding:10px;
cursor:pointer;
font-weight:bold;
font-family:etmodules;
z-index:99999999999999;
position:absolute;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-content']:not(.et-lb-open) {
transform:scale(.3);opacity:0;
}
body:not(.et-fb-root-ancestor) [class*='et-lb-btn'] {
cursor:pointer;
} |
Wenn ihr den Code genau anschaut, dann gibt es einen Bereich, wo ihr die Farbe des zu schliessenden X Buttons definieren könnt. Je nachdem welche Farbe ihr als Sektion Hintergrundfarbe gewählt habt, müsst ihr es halt anpassen.
Javascript
Zum Schluss müsst ihr noch diesen Javascript Code einbauen – am einfachsten gehts unter ≪Integration≫ -> ≪Add code to the < head > of your blog≫.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script>
(function($) {
$(document).ready(function() {
$('<span class="et-lb-close">M</span>').prependTo('body:not(.et-fb-root-ancestor) [class*="lb-content"] > .et_pb_row:first-child');
$('body:not(.et-fb-root-ancestor) [class*="et-lb-content"] ').appendTo('#et-main-area');
$("[class*='et-lb-btn']").each(function(index, element) {
var classes = $(element).attr('class').match(/et-lb-btn\-(\w*)/);
if (classes !== null) {
$(element).on('click', function(e){
e.preventDefault();
$('.et-lb-content-' + classes[1]).toggleClass('et-lb-open');
});
$('.et-lb-close').click(function(){
$("[class*='et-lb-content']").removeClass('et-lb-open');
});
}
});
});
})(jQuery);
</script> |
Mehrere Popups einbauen?
Das coole an diesem Code ist, dass ihr selbst mehrere Popups definieren könnt. Ihr müsst einfach die beiden CSS Klassen kurz anpassen. Und zwar habt ihr hier ja gerade diese 2 CSS Klassennamn verwendet
1 2 | POPUP SEKTION CLASS: et-lb-content-1 POPUP BUTTON CLASS: et-lb-btn-1 |
Wenn ihr also einen 2. Button habt dann passt die zahl einfach an…
1 2 | POPUP SEKTION CLASS: et-lb-content-2 POPUP BUTTON CLASS: et-lb-btn-2 |
Ihr müsst nichts am CSS Code oder an der Javascript Funktion anpassen – einfach diese beiden CSS Klassennamen anpassen und zack funktionierts
Hi Eric, ich baue gerade etwas und nutze dein Tutorial. Vielen Dank schon mal für diesen tollen Trick. Ich habe getestet als Trigger Button ein Textmodul zu nutzen. Habe dem auch das # als Link gegeben und die Klasse entsprechend. Wenn man das so macht wird man immer nach oben an den Anfang der Seite geschickt. Das Popup öffnet sich. Wenn man das Popup schließt, dann ist man plötzlich ganz oben und nicht mehr bei dem Textmodul der das Popup öffnet. Das ist schade. Weißt du zufällig warum das so ist und wie man das lösen könnte? Nur falls du Zeit und Lust hast dich mit dieser Frage zu beschäftigen. 🙂 Liebe Grüße