Divi Popup ohne Plugin erstellen: Simples How-to
Posted on: Feb 23

Divi Popup ohne Plugin erstellen Simples How-to

Popups sind ein mächtiges Werkzeug, um die Aufmerksamkeit Ihrer Website-Besucher zu erlangen und Ihre Konversionen zu steigern. Normalerweise benötigen Sie dafür jedoch ein teures Plugin, aber genauso gut können Sie eins selbst erstellen. In unserem simplen How-to, zeigen wir Ihnen, wie Sie Ihre Webseite optisch aufpeppen können und Ihre Konversionen verbessern.

Mit dieser Schritt für Schritt Anleitung können Sie jede beliebige Divi Sektion Ihrer WordPress Webseite in ein Popup verwandeln.

Divi Popup ohne Plugin erstellen: Simples How-to

Beginnen wir jetzt mit dem Tutorial

1 Trigger erstellen

Dieser ist der Auslöser, der später das Popup anzeigen wird. In diesem Beispiel verwenden wir ein Button, Sie können aber selbstverständlich auch eine andere Quelle als Trigger definieren. Zum Beispiel geht es auch mit einem Textmodul.

1. Gehen Sie zu den erweiterten Einstellungen der Button Moduls und geben Sie die folgende CSS Klasse ein: trab-popup-trigger

Einstellungen für den Button Popup Trigger im Divi Theme

2. Wechseln Sie jetzt innerhalb der Modul-Einstellungen zum Reiter Inhalt -> Link und geben bei Link-URL des Buttons: #kontakt-pop ein.

Ziel für den Trigger als Link URL eingeben

2 Popup Sektion erstellen

Da Sie jetzt den Trigger vermerkt haben, geht es an die Erstellung der Sektion, welche später das Popup darstellen soll. Sie können hier selbstverständlich die volle Power des Divi Builders ausnutzen und diese beliebig gestalten. Die Möglichkeiten sind grenzenlos, für jetzt reicht aber eine Sektion mit 1 Zeile und einem Bild plus Text.

Der neuen Sektion müssen Sie jetzt die ID aus dem obigen Schritt für den Link geben. Das war #kontakt-pop. Dieses Mal aber ohne „#“ also nur kontakt-pop, wie im Screenshot. Zusätzlich zu der ID vergeben Sie noch die Klasse mit dem Namen trab-pop-content.

Divi Popup ohne Plugin Section Einstellungen

Setzten Sie jetzt noch im Design Tab bei „Größe einstellen“ die minimale Höhe auf 100%. Dadurch breitet sich das Pop-up immer auf die volle Höhe des Bildschirms aus.

Am besten fügen Sie in Ihr Popup noch ein Close-Trigger beispielsweise in Form eines „X“ Icons im rechten oberen Eck ein. Sie müssen diesem Trigger anschließend nur die Klasse trab-popup-close zuweisen.

Bestätigen und speichern Sie und fahren jetzt mit dem nächsten Punkt weiter.

3 CSS hinzufügen

Fügen Sie das folgende CSS in Ihren Theme-Optionen oder in das Stylesheet Ihres Child Theme ein.

/* Zeigen / verstecken Sie das Popup-Überlagerungs-Wrapper, wenn die Klasse "is-visible" sich ändert, führen Sie das CSS nur auf die Frontend durch */
body:not(.et-fb) .trab-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) .trab-popup-wrapper.popup-is-visible {
opacity:1;
visibility:visible;
}

/* Ermöglichen Sie das Scrollen des Inhalts innerhalb des Popup-Wrappers */
.trab-popup-inside {
height:100%;
overflow-y: scroll;
}

/* Verhindern Sie das Scrollen des Körpers, wenn das Popup sichtbar ist */
body.trab-noscroll {
overflow: hidden;
}

/* Zentrieren Sie den Popup-Inhalt innerhalb des Abschnitts */
.trab-pop-content {
display:flex;
flex-direction:column;
justify-content: center;
}
.trab-pop-content .et_pb_row {
margin-top:0;
margin-bottom:0;
}

/* Passen Sie die Position des Popup-Overlays für die Admin-Leiste an */
@media (min-width:600px) and (max-width:782px) {
body:not(.et-fb).admin-bar .trab-popup-wrapper {
top:46px;
}
}
@media (min-width:783px) {
body:not(.et-fb).admin-bar .trab-popup-wrapper {
top:32px;
}
}

/* Bewegen Sie das Popup auf andere Elemente */
.et_builder_inner_content.popup-is-visible {
z-index:99999;
}

/* Fügen Sie einem Hand-Cursor zum Trigger-Element für Schließen hinzu */
.trab-popup-close {
cursor:pointer;
}

/* Fügen Sie Zeilenanimation hinzu, wenn das Popup ausgelöst wird */
.trab-popup-wrapper.popup-is-visible .et_pb_row:not(.trab-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}}

4 jQuery Code einfügen

Sie können den folgenden Code entweder mit einem Code Modul nur für die benötigte Seite des Pop-ups einfügen, oder global. Wenn Sie den Code global auch auf anderen Seiten nutzen möchten, dann tragen Sie ihn am besten im Theme Optionen Integration Tab ein.

jQuery Javascript code für das Divi Popup in den Theme Optionen eingeben
<script>
jQuery(document).ready(function ($) {
  $('.trab-pop-content').each(function () {
    $(this).wrap('<div class="trab-popup-wrapper"><div class="trab-popup-inside">');
  });

  $('.trab-popup-trigger, .trab-menu-popup > a')
    .off()
    .click(function (e) {
      e.preventDefault();
      SectionID = $(this).attr('href');
      $(SectionID).closest('.trab-popup-wrapper').addClass('popup-is-visible');
      $(SectionID)
        .closest('.et_builder_inner_content')
        .addClass('popup-is-visible');
      $('body').addClass('trab-noscroll');
    });

  $('.trab-popup-close').click(function (e) {
    e.preventDefault();
    $('.popup-is-visible').removeClass('popup-is-visible');
    $('body').removeClass('trab-noscroll');

    var PopupVideoIframe = $(this)
      .closest('.trab-pop-content')
      .find('.et_pb_video_box iframe');
    var PopupVideoSrc = PopupVideoIframe.attr('src');
    PopupVideoIframe.attr('src', PopupVideoSrc);

    var PopupVideoHTML = $(this)
      .closest('.trab-pop-content')
      .find('.et_pb_video_box video');
    PopupVideoHTML.trigger('pause');
  });
});
</script>

Popup bei Pageload Triggern

Wenn Sie das Popup ganz einfach automatisch beim Laden der Seite anzeigen möchten, müssen Sie eine 2. Funktion in den Integrationstab einfügen. Sie können hier die ID, welche „#kontakt-pop“ heißt, mit Ihrer eigenen ersetzten, falls abweichend. Genauso können Sie die Verzögerung bestimmen, indem sie die 3000 ersetzten. Hierbei handelt es sich um Millisekunden.

setTimeout(function () {
SectionID = $('#kontakt-pop');

SectionID.closest('.trab-popup-wrapper').addClass('popup-is-visible');
SectionID.closest('.et_builder_inner_content').addClass('popup-is-visible');
$('body').addClass('trab-noscroll');
}, 3000);

Unterschied zwischen Modal Popup und Lightbox

Im Grunde genommen sind modal Popups und Lightbox[1] ein und dasselbe. Der Unterschied liegt lediglich darin, dass modal Popups meist für Login- oder Registrierungsformulare verwendet werden und ein „neues Fenster“ öffnen, während Lightboxes oft nur mit einem Overlay über dem aktuellen Inhalt eingeblendet werden.

Doch lieber mit Plugin automatisch erstellen lassen?

Wenn Ihnen die Anleitung zu komplex ist oder einfach zu lange dauert, dann kann ich Ihnen folgende Plugins empfehlen. Mit diesen können Sie kinderleicht ein individuelles Popup oder Lightbox erstellen.

  1. Divi Toolbox
  2. Bloom
  3. Divi Supreme Pro 

Sollten Sie weiterhin Hilfe benötigen dann kontaktieren Sie mich gern. Oder lesen Sie weiter in der Divi Theme Anleitung.

Daniel Trabold Gründer von Trabolda25 und WordPress Experte

Artikel von

Daniel Trabold

Daniel hat mehr als 10 Jahre Erfahrung in der Programmierung und ist absoluter WordPress Fan. Wenn er nicht in seinem dunklen Keller programmiert, dann ist er gern am Strand oder im Gym.

Kontakt aufnehmen