Divi ist ein WordPress Theme und besticht durch tolle Features. Mit diesem Theme braucht ihr in WordPress fast keine zusätzlichen Plugins mehr! Divi bietet die Möglichkeit, Popups einfach und ohne die Nutzung eines Extra-Plugins zu erstellen. In diesem Beitrag findet Ihr eine kurze und einfache Anleitung wie dies funktioniert und was ihr dafür zu tun habt.
1. Button: Klasse „popup“
Füge dem Button die Klasse popup hinzu.
2. Sektion: „popup-overlay“
Füge einen Abschnitt mit der Klasse popup-overlay hinzu.
3. Die Klasse „popup-content“
Anschließend füge die Klasse popup-content mit etwas Padding zur Spalte hinzu. Füge dann ein Textmodul für das Schließsymbol im Popup hinzu:
<span class="close-popup">x</span>Füge dann ein Textmodul hinzu, um den Inhalt des Popups zu definieren. Füge dann dieses CSS ein, um das Popup zu gestalten:
.popup-overlay {
position: fixed; /* fixed it */
top: 0; /* moves it to the top */
width: 100%; /* makes it fullwidth */
height: 100vh; /* makes it full height of the screen */
z-index: -1; /* moves the section behind all the rest so it is not shown */
justify-content: center; /* centers the row in the middle */
align-items: center; /* centers the row in the middle */
opacity: 0; /* hides the overlay */
overflow: hidden;
transition: opacity 0.4s ease-in-out; /* fades it in */
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
background: rgba(0, 0, 0, 0.9);
}
/* CSS for overlay when shown */
.popup-overlay.show {
display: flex; /* flex as this allows us to center the row */
opacity: 1; /* shows the overlay */
z-index: 99999; /* moves the overlay on top of all the other sections */
}
/* CSS X icon above the content */
span.close-popup {
color: #fff;
position: absolute;
top: -53px;
right: -32px;
font-size: 30px;
cursor: pointer;
}4. jQuery
Füge folgendes jQuery hinzu, um das Popup beim Klicken auf die Schaltfläche anzuzeigen, auszublenden und auszulösen:
<script>
jQuery(document).ready(function ($) {
$(document).on('touchstart click', '.popup', function(event) {
event.preventDefault();
$('.popup-overlay').addClass('show');
});
$(document).on('touchstart click', '.popup-overlay', function(event) {
$('.popup-overlay').removeClass('show');
});
$(document).on('touchstart click', '.popup-content', function(event) {
event.stopPropagation();
});
$('.close-popup').click(function() {
$('.popup-overlay').removeClass('show');
});
});
</script>5. Mehrere Popups auf einer Seite
Es ist möglich, einer Seite mehrere Popups hinzuzufügen. Hierfür müssen Sie alle obigen CSS-, jQuery- und Abschnittsdateien mit Spalte und Modul duplizieren.
6. Duplizieren & Ändern der Klassennamen
Du musst die Klassennamen ändern. Dupliziere den Abschnitt und ändere dann die Klassennamen:
- Button:
popup2 - Abschnitt:
popup-overlay2 - Spalte:
popup-content2 - Schließen-Schaltfläche:
<span class="close-popup2">x</span>
7. jQuery für Popup 2 anpassen
Dupliziere das jQuery und ändere die Klassennamen ebenfalls. Du solltest das jQuery aus dem Beitrag entfernen und stattdessen in Theme Options → Integration einfügen, damit keine Konflikte entstehen.
<script>
jQuery(document).ready(function ($) {
$(document).on('touchstart click', '.popup2', function(event) {
event.preventDefault();
$('.popup-overlay2').addClass('show2');
});
$(document).on('touchstart click', '.popup-overlay2', function(event) {
$('.popup-overlay2').removeClass('show2');
});
$(document).on('touchstart click', '.popup-content2', function(event) {
event.stopPropagation();
});
$('.close-popup2').click(function() {
$('.popup-overlay2').removeClass('show2');
});
});
</script>8. Neue CSS-Klassen
Erstelle ebenfalls neue CSS-Klassen für das zweite Popup:
.popup-overlay, .popup-overlay2 {
position: fixed;
top: 80px;
width: 100%;
height: 100vh;
z-index: -1;
justify-content: center;
align-items: center;
opacity: 0;
overflow: hidden;
transition: opacity 0.4s ease-in-out;
-moz-transition: opacity 0.4s ease-in-out;
-webkit-transition: opacity 0.4s ease-in-out;
background: rgba(0, 0, 0, 0.9);
}
.popup-overlay.show, .popup-overlay2.show2 {
display: flex;
opacity: 1;
z-index: 99999;
}
span.close-popup, span.close-popup2 {
color: #fff;
position: absolute;
top: -53px;
right: -32px;
font-size: 30px;
cursor: pointer;
}9. Das fertige Ergebnis
So kann das Ergebnis dann aussehen. Ein Praxisbeispiel: www.mbn.de
Verwandte Artikel
Hast du eine Frage zu diesem Artikel?
Schreib uns – wir antworten in der Regel innerhalb eines Werktages.