Lesefortschritt:

Popups mit dem Divi-Theme erstellen – ganz ohne Plugin

4. Februar 2024 | CSS-Stylesheet, Divi-Theme, Scripts

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:

  1. 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.
  2. 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.
  3. 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».
  4. 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.
  5. 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.

6 + 10 =

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This