Skip to Main Content

How to add a reclosable sliding call to action on Divi

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 901.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Having a call to action on your site is one of the least intrusive ways to grab your visitors' attention. Most of the time, they'll just ignore the CTA or close it to continue crawling the page, but sometimes you'll earn them. A slide call to action will work great for promoting just about anything on a landing page.

In this tutorial, we are going to design a closable call to action that can be added to any corner of a page using Divi Theme Builder. Once done, you will be able to promote your products and specials anywhere on the page without having to use a plugin.

Let's start!

Preview

Here's a quick look at the four inserted CTAs that we'll add to the four corners of the page template. Of course, you won't need to deploy all four at the same time. Notice how each can be closed by clicking on the "x" icon, then you can choose to re-enable the CTA by clicking on the "plus" icon.

What you need to get started

To get started, you will need to to install and activate the Divi theme . Make sure you have the latest version of Divi.

You will also need at least one page created with Divi Builder for testing purposes in order to assign the new template to this page to display the result.

Creation of a sliding call to action, with a page template in Divi

Creation of a new model

From the WordPress dashboard, go to Divi> Theme generator. Then click on the "Add a new template" box to create a new template.

Create a page template

Assign the template to the page or pages on which you want to display the promotional bar.

Assign a page template to pages

On the new model, click on the "Add a custom body" area then select "Create a custom body".

Add custom body

Then select the “Build From Scratch” option.

Creation of the publication content section

The post content section is a necessary part of any page template in order to display the actual content of the page or the post embedded in Divi or WordPress. We'll add it to our model before creating our first call to action to insert.

Add a row to a column

To begin, add a row of a column to the regular section.

Single line section

Add a publishing content module

Then add a publishing content module to the line.

Item content

Line settings

After that update the line parameters as follows:

  • Width: 100%
  • Max width: 100%
  • Padding: 0px high, 0px low
Divi line configuration

Creating the call to action top left

Now that we have our post content module in place, we're ready to start adding our first call to action to insert in the top left corner of the page template.

Add a section

Each new call to action will be created with a brand new section. This will allow you to add any layout or module needed to design the call to action.

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

Add a new regular section to the template layout.

Selection of a new divi section

Add a row to a column

Then give the section a row of a column.

Choose a divi column

Section settings

Drag (or move) the section above the post content section and update the section settings as follows:

  • Left color background gradient:
  • Right background gradient:
  • Display the gradient above the image: YES
  • Background image: [insert image]
  • Width: 320px
  • Margin: 320px left
  • Padding: 0px high, 0px low
  • Animation Style: Slide
  • Animation direction: right
  • Animation delay: 2000 ms

Then jump to the advanced tab and add the following CSS class and Z index:

  • CSS class: slide-in-cta
  • Z Index: 999

And add the custom CSS snippet following the main element:

position: fixed;top: 80px;left: -320px;

The CSS class is needed so that we can target the section with code later. Custom CSS will position the top left section of the page template in a fixed (or sticky) position. The “left: -320 pixels” position should move the entire section (which is 320 pixels wide) outside of the browser window (so out of our view). But we have the left margin of 320 pixels to bring it back to view. The reason it is constructed this way is that we can turn the margin value on or off when you click the "x" icon. This will cause the CTA to slide in and out of sight.

Line settings

Now, update the line parameters as follows:

  • Use a custom gutter width: YES
  • Gutter width: 1
  • Width: 100%
  • Padding: 0px high, 0px low
Divi line parameter

Add a call to action module

Inside the row, add a Call to Action module.

Add call to action module

Call to action settings

Then update the call-to-action settings.

Contents
  • Title: [enter the text of your choice]
  • Button: [enter the text of your choice]
  • Body: [enter the text of your choice]
  • Button link URL: [enter actual URL or #]
Customize the divi module offer

Then remove the default background color to reveal the background for the section we added earlier.

Remove background color
Design parameters (text, button and fill)

On the Design tab, update the following:

  • Title font: Lato
  • Title Font Weight: Heavy
  • Title line height: 1,3 em
  • Body Police: Lato
  • Body font weight: bold
  • Use custom styles for the button: YES
  • Button text size: 15px
  • Button border width: 0px
  • Button letter spacing: 1px
  • Button font: Lato
  • Button font weight: heavy
  • Button font style: TT
  • Button padding: 12 pixels at the top, 12 pixels at the bottom, 32 pixels at the left, 32 pixels at the right
  • padding: 40 pixels at the top, 40 pixels at the bottom, 40 pixels at the left, 40 pixels at the right

Add an open and close icon with a Blurb module

Once the call to action is done, we need to create the icon button used to open and close the sliding call to action. To create this, add a blurb module under the call to action module.

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Divi bubble info module

Presentation text settings

Update the following design parameters.

Contents
  • remove default title and body text
  • Use the icon: YES
  • Icon: more (see screenshot)
Add a divi icon
Design
  • Icon Color: # 000000
  • Use icon font size: YES
  • Icon font size: 40 pixels
  • Width: 40px
  • Height: 40px
  • Rounded corners: 50%
  • Transform Z axis rotation: 135 degrees
Customize a divi icon
Advanced settings

Under the advanced tab, add the following CSS class:

  • CSS class: slide-in_target

Then add this custom CSS to the main element.

position: absolute;bottom: 0px;right: -40px;

Add the following custom CSS to the Blurb image.

margin-bottom: 0px;

Customize style css divi module

Result

Here is the result so far.

Result achieved now

Keep in mind that we still need to add some code to add the close and open functionality when you click the "x" icon. We'll add the code after creating a call to action in each of the four corners of the model.

Creation of the call to action at the top right

With the first call to action built in, we can speed up the process of creating the rest of the CTAs by duplicating the section already created. Next, we're going to create a slide call to action for the top right corner.

Duplicate section

Deploy wireframe display mode, then duplicate the CTA section at the top left.

Update section settings

Then update the new section parameters as follows:

  • margin: 320px right
  • animation direction: left

Then update the custom CSS in the main element by replacing “left” with “right”. Here is the full excerpt:

position: fixed;top: 80px;right: -320px;

Modify divi section alignment

Update the parameters of the Blurb module

Next, open the Blurb module settings and update the custom CSS snippet in the main element by replacing “right” with “left”. Here's the full excerpt:

position: absolute;bottom: 0px;left: -40px;

Add a divi code

Result

You will now see a call to action as a slide at the top right of the page template.

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [Recommended]

Slider at the top right

Perform the same operations for the rest of the “Lower Right”, “Lower Left” sections. You will also need to adjust the CSS code for each of the modules to have a result similar to the following.

Final result divi

Adding custom jQuery and CSS snippets using a code module

For the last step we need to add some custom jQuery and CSS so that we can get the functionality of opening and closing each of the slide CTAs.

Add a code module

Add a code module to one of the sections of the presentation.

Add a js divi code

Paste the code

Then open the code settings and paste the following code into the code area.

<style>.slide-in-cta, .slide-in_target, .slide-in-toggle-active {transition: all 400ms ease-in-out;} .slide-in-toggle-active {margin: 0px 0px 0px 0px !important;}.slide-in-toggle-active .slide-in_target  {transform: none !important;background: rgba(0,0,0,0.2);}  .slide-in_target {cursor: pointer;}</style><script>(function($) {$(document).ready(function(){$('.slide-in_target').click(function(){$(event.target).closest('.slide-in-cta').toggleClass('slide-in-toggle-active'); });    });})( jQuery );   </script>

Add jquery code

Latest Thoughts

With Divi, it's not at all difficult to create a call to action. And since you can use the theme builder to add a call to action to a page template, you'll have more control over which pages display those CTAs. 

This article features 1 comment

  1. Great, this article! This is exactly what I am looking for!
    Thank you very much.

    Small subsidiary question, is it possible that this CTA only opens automatically at a certain place when scrolling on the page?

    Have a good day !

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
4 shares
Share4
tweet
Save