Add a Slide-in Call-to-Action to Divi
Here’s how to easily add a slide-in call-to-action to the bottom right of your Divi Builder page.
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.
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:
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