A customer needed a “Call Back” functionality a form which can be shown by pressing a button but which takes not to much space of the layout. In addition the button should be in the navigation. I thought by myself there must be a plug in to do that. On the other site I am a friend of using modules from divi and I want to try to reach my goal without using a lot of plug ins. So I create my own solution to fade in and out a container with a “Call Back” from.

Preparation

First of all we need a container for our slide in content so we create a new “Standard Section” on a site. This container is our “slide-in-box”. In this container I placed in a “Text Module” for the headline, a “Contact Module” for the form and a “Code Module” for the “Close-Button”. It is not possible to use a Divi-Button because of the missing “on-Click”-Event.
Of course the Container can also be used to hide the sidebar or place some other content in there.

This new “Section Module” needs an “ID” and a “Class”. Type the id and class under “Section Modul Setting” in “Custom CSS”. I used the ID “callback” and the class “callback-hidden”. The callback-hidden-class is needed to place the container outside of our webpage area. We want to have this container on every site equal so we save this section as “global” to our Divi-Library (right click on the blue left section field).

Place this section at the top of your site.

Code for the Close-Button

In the “Code-Module” we place in the following html-code which is needed to show a button who will trigger some Java-code called “callBackBtn()”. The button also gets a class to style it and I wrote in “CLOSE” as the seen text in frontend.

Call-Back-Button in navigation

Next we need a button in our navigation which will slide in our Call-Back-Container. I used “individual link” and put the following html-code in as the “button name”.

This button get the same “class” as the close button because I want them to look the same and this button will also call the function “callBackBtn()” to trigger the status of our container.

!ATTENTION
The URL is necessary for wordpress to create a link or button. So I placed in the url field “#” and deledet it later.

Java-function

Now we need some magic to slide-in and slide out our container. I was looking for an easy way which I can handle without beeing a professional programmer. For that I wrote a simple and easy script which changes the class of my container. Now I can change the position only by using some “css”.

This script must be placed in “Divi Theme Options” under “Integration” in “Add code to the <head> of your blog”.

<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>
What the script does

If you press the button the script asked for the ID “callback” of the container.

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

Next it looks if the container also has the class “callback-hidden” which we named our container in the first steps in “cutom css”:

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

Is the answer “yes” the class “callback-hidden” will be deleted and the class “callback-shown” will take place. Our container has now a new class which tells the container to slide-in:

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

Is the answer “no” so the class “callback-shown” will be deleted and the class “callback-hidden” takes place and the container slides out.

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

The script is changing the calss name of the container and different classes tells the container to move to a special position.

CSS for Container

Now we need some styles for the position of the container. Other styles can be done by the module settings. So place the following code into your “Child-Themes” styles or in “Divi Theme Optionen” custom css.

/*-Position of Callback Container / Section*/
#callback { 
    z-index: 999999; /*-Layer depth-*/
    width: 300px; /*-Width of the container-*/
    height: 100%; /*-The height-*/
    top: 0px; /*-Set the container at the top of the browser-*/
    position: fixed; /*-fix position-*/
    transition: all 0.8s ease-in-out 0s; /*-Animation-*/
    overflow: scroll; /*-if there is more content you can scroll-*/
}

/*-Postion slide out-*/
.callback-hidden { 
    right: -300px; /*-right minus width of the container-*/
    transition: all 0.8s ease-in-out 0s; /*-Animation-*/
}

/*-Position slide in-*/
.callback-shown { 
    right: 0px; /*-set on right of the browser-*/
    transition: all 0.8s ease-in-out 0s; /*-Animation-*/
}

CSS for Buttons

Our buttons need also some stylings. Just some color, width, fontweight and what we need to let the button look great.

.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%;
}

Conclusion

You can now change easily the CSS Codes, to create new ideas and possibilities. Slide in from the other direction or make full covered call back container. You can also place in other content. The function will not work below IE 10 but I do not care about old browsers because most people are using new standards and since my customers all jumped on new versions of IE or using Firefox I am going to use more and more code for great ideas and designs.

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.