Ein Kunde von mir wollte eine „Call Back“ Funktion, also ein Formular, welches nach belieben eingeblendet werden kann, aber nicht zu viel Platz des Layouts einnimmt. Zusätzlich sollte der Button sichtbar sein. Es gibt bestimmt Plug-ins für solche Funktionen, doch warum nicht Divis hauseigenen Module und den Builder nutzen? Also entwickelte ich eine einfache Lösung, wie ich nach belieben Inhalt ein- und ausblenden kann. In diesem Falle ein „Call Back“ Formular.

Vorbereitung

Als erstes benötigen wir auf einer Seite, eine neue „Standard Section“. Dieser Container dient als unsere „slide-in-Box“. In diesen Container habe ich ein „Textmodul“ für die Überschrift, ein „Kontaktmodul“ für das Formular und ein „Codemodul“ für den „Close-Button“ erstellt. Leider kann der hauseigene Divi-Button kein „on-Click“-Event auslösen, darum der eigene Button.
Natürlich kann der Inhalt auch andere Funktionen übernehmen, z.B. das Verstecken der Sidebar in einem Blog-Layout.

Dieses „Section Modul“ benötigt eine „ID“ und eine „Klasse“, welche unter den „Section Modul Setting“ in „Custom CSS“ eingetragen wird. Ich habe die ID „callback“ und die Klasse „callback-hidden“ verwendet. Zweites wird später die Werte für die Box im ausgeblendeten Status beinhalten. Und da dieser Container ja auf allen Seiten gleich sein sollen, legen wir diesen als „globales“ Element in die Divi-Library.

Dieser Container / Seciton sollte an oberster Stelle jeder Seite stehen.

Code für den Close-Button

In das Code-Modul wird folgender html-Code eingefügt, welcher ein Button darstellt und bei „onclick“ eine kleine Java-Funktion „callBackBtn()“ aufruft. Um den Button zu gestalten gebe ich diesem noch eine eigene Klasse: „call-back-btn“. Da dies der Schließen-Button ist, soll auch „CLOSE“ draufstehen.

Call-Back-Button in der Navigation

Als nächstes sollte ein Button in der Hauptnavigation erstellt werden, welche die Funktion übernimmt, den „CALL-BACK-Container“ einzublenden. Hierzu wähle ich einen „individuellen Link“ und füge folgenden html-Code in das Feld „Angezeigter Name“ ein.

Dieser bekommt die gleiche Klasse wie der Close-Button, und ruft ebenfalls bei „onclick“ die Funktion „callBackBtn()“ auf.

!ACHTUNG
Die URL benötigen wird nicht, doch lässt sich kein Navigationselement ohne URL erstellen. Also verwende ich zum Erstellen ein Sprung-Element „#“, damit der Navigationspunkt gespeichert wird. Dieses kann später bei Bedarf wieder gelöscht werden.

Java-Funktion erstellen

Damit das Ein- und Ausblenden funktioniert, habe ich einen einfachen Weg gewählt, da ich keine komplizierten Scripte laden wollte. Ich habe ein kleines Scripte geschrieben, welches die „Klasse“ des „Call-Back-Containers“ abfragt und diese bei Bedarf abändert. Die Position und die Animation übernimmt in diesem Falle einfaches CSS.

Dieses Script wird in den „Divi Theme Options“ unter „Integration“ in „Add code to the <head> of your blog“ eingefügt.

<script>
function callBackBtn() {
    var cb = document.getElementById("callback");

    if (cb.classList.contains("callback-hidden")) {
        cb.classList.remove("callback-hidden");
        cb.classList.add("callback-shown");
    } else {
        cb.classList.remove("callback-shown");
        cb.classList.add("callback-hidden");
    }
}
</script>
Erklärung des Scripts

Wird der Button gedrückt, fragt das Scritp als erstes die ID „callback“ des Containers ab:

var cb = document.getElementById("callback");

Als nächstes überpüft die Schleife, ob unser Container auch die Klasse „callback-hidden“ beinhaltet, welche wir beim Erstellen des Containers unter „cutom css“ eingetrtagen haben:

if (cb.classList.contains("callback-hidden")) {

Lautet die Antwort ja, wird die Klasse „callback-hidden“ entfernt und die Klasse „callback-shown“ hinzugefügt. Dadurch bekommt der Container eine neue CSS mit anderen Werten und wird eingeblendet:

cb.classList.remove("callback-hidden");
cb.classList.add("callback-shown");

Lautet die Antwort nein, wird die Klasse „callback-shown“ entfernt und die Klasse „callback-hidden“ hinzugefügt, wodurch der Container wieder ausgeblendet wird.

else {
        cb.classList.remove("callback-shown");
        cb.classList.add("callback-hidden");

Das Script ändert also den Namen der Klasse des Containers ab und kann so dem Container verschiedene Zustände zuordnen.

CSS für die Container-Zustände

Nun brauchen wir noch ein wenig CSS-Code, damit nicht nur die Animation funktioniert, sondern auch die Position und das Aussehen des Containers festgelegt ist. Das CSS wird in den Styles des „Child-Themes“ oder in den „Divi Theme Optionen“ eingefügt.

/*-Position des Callback Containers / Section*/
#callback { 
    z-index: 999999; /*-Ebene des Containers-*/
    width: 300px; /*-Containerbreite-*/
    height: 100%; /*-Containerhöhe-*/
    top: 0px; /*-Am Browserrand oben ausgerichtet-*/
    position: fixed; /*-fixierte Position-*/
    transition: all 0.8s ease-in-out 0s; /*-Animation-*/
    overflow: scroll; /*-bei zu kleinem Fenster wird gescrollt-*/
}

/*-Postion bei geschlossenen Zustand-*/
.callback-hidden { 
    right: -300px; /*-rechts minus Containerbreite-*/
    transition: all 0.8s ease-in-out 0s; /*-Animation-*/
}

/*-Position bei aktiven Zusatan-*/
.callback-shown { 
    right: 0px; /*-Rechts ausgerichtet-*/
    transition: all 0.8s ease-in-out 0s; /*-Animation-*/
}

CSS für die Buttons

Die Buttons sollen auch noch schön aussehen.

.call-back-btn {
    background: #ea1d63;
    border: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 8px;
    cursor: pointer;
    display: block;
}

#callback .call-back-btn {
    width: 100%;
}

Abschließende Bemerkungen

Durch das Abändern des CSS Codes, könen unterschiedlichste Möglichkeiten und Ideen realisiert werden. Von links, oben, unten oder rechts eingeblendet bis hin zu vollflächigen Darstellungen. Dank Divi kann auch jeder Inhalt in dem Container dargestellt werden. Der einzige Nachteil ist, dass alte Browser nicht unterstützt werden. Das betrifft vor allem IE, der die Funktion erst ab 10 unterstützt.

Disclosure: Some of the links in this post are "affiliate links." This means if you click on the link and purchase the item, I will receive an affiliate commission.