Trick # 315 | Dieser Beitrag beinhaltet 2079 Wörter. – Geschätzte Lesezeit: ca. 11 Minuten.
Heute zeigen wir Ihnen, wie Sie jede beliebige Section auf Ihrer Divi-Website in ein verstecktes Popup verwandeln können. Dieses wird wahlweise beim Laden der entsprechenden Seite direkt angezeigt – oder nach einem Klick auf eine Schaltfläche aktiviert. Dazu benötigen Sie keine Plugins – nur ein paar Zeilen CSS und etwas jQuery.
Wir spielen das Prozedere für das Popup hier beispielhaft mit einem Kontaktformular durch. Zunächst bereiten Sie dazu ein paar Schritte vor:
- Erstellen eines Trigger-Buttons: Sie können das Button-Modul des Divi-Themes als Auslöser verwenden. Fügen Sie an geeigneter Stelle ein entsprechendes Modul ein. Damit es funktioniert, fügen Sie dem Button eine benutzerdefinierte CSS-Klasse hinzu: «popup-trigger». Diese tragen Sie in den Button-Einstellungen unter dem Tab «Erweitert», «CSS-ID & Klassen» und dort im Tetfeld «CSS-Klassen» ein.
- Button-Link festlegen: Wechseln Sie hierfür zum Tab «Inhalt» des eben bearbeiteten Divi-Buttons. Fügen Sie im Feld «Button-Link-URL» die Zeile «#contact» ein.
- Eine Popup-Sektion erstellen: Fügen Sie der Seite (oder dem Beitrag) eine neue Sektion hinzu. Diese Sektion blenden Sie sogleich aus: klicken Sie dazu auf das Zahnrad-Icon der Sektion und deaktivieren Sie die Sektion für alle Anzeigearten. Stellen Sie zudem sicher, dass Sie auf der Registerkarte «Erweitert», unter CSS-ID & Klassen»/«CSS-ID» die richtige ID einstellen. Sie muss mit der URL der Schaltfläche aus Schritt 2 übereinstimmen. In unserem Beispiel lautet die ID «contact» (diesmal ohne das Rautezeichen). Der Abschnitt benötigt ausserdem die CSS-Klasse «popup-content».
- Mindesthöhe des Popups festlegen: Auf der Registerkarte «Design» der Sektion stellen Sie die Mindesthöhe auf 100 % ein. Damit stellen Sie sicher, dass sich der Hintergrund des Abschnitts auf den gesamten Bildschirm ausdehnt, wenn das Popup aktiviert wird.
- Inhalt einfügen: Fügen Sie nun der Popup-Sektion eine Zeile sowie ein Modul hinzu. Wir verwenden ein einspaltiges Design mit einem Kontakformular-Modul; da unser Beispeil-Popup diesen Zweck erfüllen soll.
Dies sind die vorbereitenden Schritte. Nun benötigen Sie etwas CSS-Code. Den folgenden Block kopieren Sie in das CSS-Stylesheet Ihrer Website – im Backend unter Design/Customizer/Zusätzliches CSS:
/* Show/hide the popup overlay wrapper when "is-visible" class changes, apply the CSS to frontend only */
body:not(.et-fb) .popup-wrapper {
position:fixed;
z-index:990;
top:0;
right:0;
bottom:0;
left:0;
transition: all .5s cubic-bezier(.14,.06,.41,1.39);
opacity:0;
visibility:hidden;
}
body:not(.et-fb) .popup-wrapper.popup-is-visible {
opacity:1;
visibility:visible;
}
/* Allow the content inside the popup wrapper to scroll */
.popup-inside {
height:100%;
overflow-y: scroll;
}
/* Prevent Body from Scrolling when Popup is visible */
body.noscroll {
overflow: hidden;
}
/* Center Align Popup Content inside the Section */
.popup-content {
display:flex;
flex-direction:column;
justify-content: center;
}
.popup-content .et_pb_row {
margin-top:0;
margin-bottom:0;
}
/* Adjust the position of the popup overlay for admin bar */
@media (min-width:600px) and (max-width:782px) {
body:not(.et-fb).admin-bar .popup-wrapper {
top:46px;
}
}
@media (min-width:783px) {
body:not(.et-fb).admin-bar .popup-wrapper {
top:32px;
}
}
/* Mave the popup on top of other elements */
.et_builder_inner_content.popup-is-visible {
z-index:99999;
}
/* Add a hand cursor to the close trigger element */
.popup-close {
cursor:pointer;
}
/* Add Row animation when popup is triggered */
.popup-wrapper.popup-is-visible .et_pb_row:not(.popup-close) {animation:scale-in .5s cubic-bezier(.14,.06,.41,1.39) both; animation-delay: .5s; }
@keyframes scale-in{0%{transform:scale(0.3);opacity:0}100%{transform:scale(1);opacity:1}}Weiter geht es mit jQuery-Code. Auch diesen kopieren Sie, wechseln im Backend zu Divi/Theme-Optionen/Integration und fügen den nachfolgenden Codeblock in das Fenster ein, welches den <head>-Bereich der Website definiert.
<script>
jQuery(document).ready(function($) {
$('.popup-content').each(function(){
$(this).wrap('<div class="popup-wrapper"><div class="popup-inside">');
});
$('.popup-trigger, menu-popup > a').off().click(function(e){
e.preventDefault();
SectionID = $(this).attr('href');
$(SectionID).closest('.popup-wrapper').addClass('popup-is-visible');
$(SectionID).closest('.et_builder_inner_content').addClass('popup-is-visible');
$('body').addClass('noscroll');
});
$('.popup-close').click(function(e){
e.preventDefault();
$('.popup-is-visible').removeClass('popup-is-visible');
$('body').removeClass('noscroll');
var PopupVideoIframe = $(this).closest('.popup-content').find('.et_pb_video_box iframe');
var PopupVideoSrc = PopupVideoIframe.attr("src");
PopupVideoIframe.attr("src", PopupVideoSrc);
var PopupVideoHTML = $(this).closest('.popup-content').find('.et_pb_video_box video');
PopupVideoHTML.trigger('pause');
});
});
</script>Damit funktioniert das Popup schon mal. Sie können es gleich hier nebenan austesten:
Automatisches Auslösen des Popups beim Laden der Seite
Um das Popup automatisch beim Laden der Seite auszulösen, benötigen Sie eine zweite jQuery-Funktion, welche Sie nach der soeben eingefügten unter Divi/Theme-Optionen/Integration platzieren. Kopieren Sie den nachstehenden Code und fügen Sie ihn an bekannter Stelle ein:
<script>
setTimeout(function(){
SectionID = $('#contact');
SectionID.closest('.popup-wrapper').addClass('popup-is-visible');
SectionID.closest('.et_builder_inner_content').addClass('popup-is-visible');
$('body').addClass('noscroll');
}, 3000);
</script>Ersetzen Sie gegebenenfalls «#contact» in Zeile 3 durch die ID Ihrer Popup-Sektion. Sie können auch den Wert 3000 auf Zeile 7 ersetzen, um eine eigene Verzögerung zu definieren. 3000 Millisekunden sind 3 Sekunden.
Probieren Sie es aus. Es ist erfreulich einfach. Allerdings muss ich gestehen: Es gibt Konfigurationen, bei welchen das Popup nicht recht will und der aufpoppende Inhalt gleich in ganzer Browsergrösse angezeigt wird.
Werbung
Werbung
