Wie erstelle ich ein Popup in Divi?

Erstelle eine Sektion mit einer CSS-ID, blende sie per CSS standardmäßig aus und zeige sie per Klick-Trigger an. Mit dem Divi Theme Builder oder einem kurzen JavaScript-Snippet lassen sich Popups ohne Plugin realisieren.

WordPress – Divi Popup

Marius Marzian • 15. Juli 2021 • 3 Min. Lesezeit

SEO-Experte

Marius Marzian

OIT GmbH

Profil ansehen

wir haben eine Anleitung zusammengestellt, um ein Popup per Button zu öffnen.

1. CSS Klasse

Dem Schaltflächenelement “popup” eine Klasse geben

2. Abschnitts- und Spaltenklassen

Fügen Sie einen Abschnitt mit dem Klassennamen “popup-overlay” hinzu

Füge dann in der Spalte den Klassennamen “popup-content” mit etwas in die Spalte ein.

Füge dann ein Textmodul für das Schließen-Symbol im Popup mit Inhalt hinzu:

<span class="close-popup">x</span>

Fügen Sie dann modalen Text hinzu, um Inhalt im Popup hinzuzufügen und Ihren Inhalt hinzuzufügen.

3 CSS zum benutzerdefinierten CSS hinzufügen

.popup-overlay {
    position: fixed; 
    top: 0; 
    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 {
	  display: flex; 
	  opacity: 1; 
    z-index: 99999; 
}

span.close-popup {
    color: #fff;
    position: absolute;
    top: -53px;
    right: -32px;
    font-size: 30px;
    cursor: pointer;
}

Füge jquery hinzu, um das Popup beim Klicken auf die Schaltfläche und die Schaltfläche zum Auslösen anzuzeigen und auszublenden:

<script>
jQuery(document).ready(function( $ ) {	
    $(document).on('click', '.popup', function(event){
    event.preventDefault();
    });		
});
</script>
<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>

Hinzufügen von zwei Popups auf einer Seite

Hierfür müssen alle oben genannten css, jQuery und Abschnitt mit Spalte und Modul dupliziert werden.

1) Klassennamen ändern

Button – popup2

Section – popup-overlay2

Column – popup-content2

Close button – <span class=“close-popup2″>x</span>

Ich habe jQuery von dieser Seite entfernt und in Theme-Option->Integration hinzugefügt, denn wenn Sie den Abschnitt jedes Mal duplizieren, wird auch dieser Code dupliziert und widerspricht sich gegenseitig.

<script>
jQuery(document).ready(function( $ ) {		
    $(document).on('click', '.popup2', function(event){
    event.preventDefault();
    });		
});
</script>
<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>