Divi Popups einfach und ohne Plugin erstellen

Divi Divi ist ein WordPress Theme und besticht durch tolle Features. Mit diesem Theme braucht ihr in WordPress fast keine zusätzlichen Plugins mehr! Offizielle Webseite von Divi mehr erfahren 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 jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren hinzufügen

Füge folgendes jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren hinzu, um das Popup beim Klicken auf die Schaltfläche anzuzeigen, auszublenden und auszulösen:

<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>

5. Mehrere Popups auf einer Seite hinzuzufügen

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 (ändern Sie den Namen entsprechend)

Abschnitt – popup-overlay2

Spalte – popup-content2

Schließen-Schaltfläche:

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

7. Dupliziere jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren & Ändern der Klassennamen

Dupliziere jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren und ändere die Klassennamen ebenfalls wie oben angegeben.
Du solltest das jQuery jQuery ist eine schnelle, kleine und funktionsreiche JavaScript-Bibliothek. Sie macht Dinge wie HTML-Dokumenten-Traversal und -Manipulation, Ereignisbehandlung, Animation und Ajax viel einfacher mit einer einfach zu verwendenden API, die in einer Vielzahl von Browsern funktioniert. Mit einer Kombination aus Vielseitigkeit und Erweiterbarkeit hat jQuery die Art und Weise, wie Millionen von Menschen JavaScript schreiben, verändert. Quelle mehr erfahren von dieser Seite entfernen und es in Theme Option -> Integration einfügen, damit keine Konflikte entstehen.

<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>

8. Neue CSS-Klassen

Erstelle ebenfalls neue CSS-Klassen, diese können einfach zu den anderen ergänzt werden.

.popup-overlay,
.popup-overlay2 {

    position: fixed;
    /* fixed it */

    top: 80px;
    /* 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,
.popup-overlay2.show2 {

    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,
span.close-popup2 {

    color: #fff;

    position: absolute;

    top: -53px;

    right: -32px;

    font-size: 30px;

    cursor: pointer;

}

9. Das fertige Ergebnis – ein Beispiel auf mbn.de

So z.B. kann das Ergebnis dann aussehen:

Auf dieser Webseite haben wir den Code verwendet um das Popup darzustellen:

Dieser Beitrag ist auch verfügbar auf: English (Englisch)