Add a Slide-in Call-to-Action to Divi

Written by Dan Mossop

Slide-in Call-to-Action (CTA) elements are a good way to grab your users' attention and boost conversions. Here's an easy way to add a slide-in section to Divi. It slides-in an entire Divi Builder section into the bottom-right of the window as the user scrolls down. This means you're not limited to the CTA module – you can put whatever you want in there.

Scroll down the page for an example of this in action (here I am just using a basic CTA module).

The process is quite simple, but there are a couple of steps.

Step 1: Set up your Section

Begin by adding a new standard Divi Builder section to your page. This should be added at the point you want it to appear on the page. The top of this section will slide in to view immediately after the bottom of the section above it is scrolls into view. Note that the section after the slide-in section in the page will be moved up to fill the gap left by the slide-in section (which will no longer be part of the main page content).

Now go into the newly added section and in the Advanced / Custom CSS tab, add the following as the CSS ID: slide-in-cta

Next add the rows and modules you want to this section. You may wish to begin customizing them, but note that we will adjust the width of the section later and so you may wish to hold off making too many changes until you can see what the final space available for content is.

This is an Example CTA

This is a slide-in section with a single CTA module, but really you could slide in any section / modules of your choosing.

Step 2: Add the Code Module

The bulk of the work needed to make the slide-in effect is done by the code below.

Add a code module as the very first module in your section's first row (I recommend making this row single-columned so that the close button added by the code module shows up in the right place).

Then in the code module's content field, paste the following:

<style>
#slide-in-cta { 
   width: 33%;
   position: absolute; 
   right: 0; 
   z-index: 1; 
}
.slide-in-cta-sticky { 
	position: fixed !important; 
	bottom: 0; 
}
#slide-in-cta-close { 
	float:right; 
	line-height: 2em; 
}
#slide-in-cta-close:before {
	content: "\4d"; 
	font-family: 'ETmodules'; 
	color: #fff;
    text-shadow: 1px 0 0 #999, 0 -1px 0 #999, 0 1px 0 #999, -1px 0 0 #999;
	font-size: 20pt;
}
#slide-in-cta .et_pb_code_0 { 
	padding: 0; 
	margin: 0; 
}
</style>

<script>
jQuery(function($) {
	var waypoint = new Waypoint({
		element: $('#slide-in-cta + .et_pb_section'),
		handler: function(dir) {
			$('#slide-in-cta').toggleClass('slide-in-cta-sticky', (dir=='down'));
		},
		offset: function() {
			return $(window).height() - $('#slide-in-cta').outerHeight(true) + 10;
		}
	});
});
</script>

<a id="slide-in-cta-close" href="#" onclick="jQuery('#slide-in-cta').hide(); return false"></a>
You don't really need to worry about the details of this code.

One thing you may need to change is the "width: 33%;" in the third row. This sets the total width of the section when it is displayed on the bottom right of the screen, inclusive of any padding, etc. Increase / decrease it for a wider / narrower slide-in section.

If you are having problems with the close button displaying incorrectly (as a bunch of icons), try replacing the content: "\\4d"; part with content: "\\\\4d";. It seems that on some Divi installations the double backslash is required (and gets converted into the correct single backslash).

Step 3: Customize the CTA Section

If you now view your page, you should see your slide-in CTA section appear when you scroll down past its position in the page. It comes complete with a close button, which lets your users dismiss the slide-in section if they wish.

All that's left is to customize it to your needs. What you do with it is entirely up to you, of course, and you can customize it the way you would any other Divi section.

A couple of things to consider are:

  • Do you want to remove all the section / row padding? This can be useful if you are displaying a single module. An alternative is to set a transparent background on the section.
  • Do you want to disable it on mobiles? If so, you can disable it in the section settings.

One final note, the close button gets rid of the CTA section on this page view only. It will come back when the user refreshes the page. As such, you may want to add it to some pages, rather than having it on all your pages. I'll try look into adding a support for cookies to allow the CTA to be shown only once to each user.

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

5 Comments

  1. This is so convenient. I thought that I would've needed to install Bloom or a similar plugin just for a slide-in. Thanks!

    Reply
    • Glad it helped, Asad!

      Reply
  2. I figured out the problem I was having by checking out the source code for this blog post. Your supplied code above has an error. #slide-in-cta-close:before {
    content: "\\4d"; has one backslash too many. It should be content: "\4d";

    thanks for all the great work you do. Divibooster and your blog posts have helped me out tremendously with my client websites.

    Reply
    • Thanks Mark. I'm glad you figured it out. The strange thing is that on some Divi installs the double backslash seems to be necessary and on others a single backslash is required. I haven't tracked down exactly why this is. The CSS is correct with a single backslash, but in some cases Divi seems to convert the double backslash into one (and gets rid of a single backslash entirely). I've updated the post to note this. Cheers!

      Reply
  3. Everything is working except for how "X" to close should be displayed. Instead of an "X" I'm seeing 3 symbols (a Target symbol [circle with a dot in the middle], A less than symbol and the symbol for a bullet list.)

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

Enhance Your Divi Site with AI-Powered CTAs

Boost engagement on your Divi site with WP Magic CTAs. Our AI plugin creates personalized, targeted call-to-actions, helping you capture your audience's attention with ease. Elevate your promotional strategies and enjoy seamless integration with Divi's capabilities. Limited time: 50% off until Sept 5!

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

5 Comments

  1. This is so convenient. I thought that I would've needed to install Bloom or a similar plugin just for a slide-in. Thanks!

    Reply
    • Glad it helped, Asad!

      Reply
  2. I figured out the problem I was having by checking out the source code for this blog post. Your supplied code above has an error. #slide-in-cta-close:before {
    content: "\\4d"; has one backslash too many. It should be content: "\4d";

    thanks for all the great work you do. Divibooster and your blog posts have helped me out tremendously with my client websites.

    Reply
    • Thanks Mark. I'm glad you figured it out. The strange thing is that on some Divi installs the double backslash seems to be necessary and on others a single backslash is required. I haven't tracked down exactly why this is. The CSS is correct with a single backslash, but in some cases Divi seems to convert the double backslash into one (and gets rid of a single backslash entirely). I've updated the post to note this. Cheers!

      Reply
  3. Everything is working except for how "X" to close should be displayed. Instead of an "X" I'm seeing 3 symbols (a Target symbol [circle with a dot in the middle], A less than symbol and the symbol for a bullet list.)

    Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.