Having a call to action on your site is one of the least intrusive ways to grab the attention of your visiteurs. Most of the time they will just ignore the CTA or close it to continue browsing the page, but sometimes you will win them over. A call to action slide will work great for promote just about anything on a landing page.
In this tutorial, we will design a closeable call to action that can be added to any corner of a page using Divi Theme Builder. Once this is done, you will have the option to promote your products and special offers 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.
Assign the template to the page or pages on which you want to display the promotional bar.
On the new model, click on the "Add a custom body" area then select "Create a custom body".
Then select the “Build From Scratch” option.
Creation of the publication content section
Section of contents post is a necessary part of any page template in order to display the contents real page or post embedded in Divi or WordPress. We'll add this to our template 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.
Add a publishing content module
Then add a module contents publication to the line.
Line settings
After that update the line parameters as follows:
- Width: 100%
- Max width: 100%
- Padding: 0px high, 0px low
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.
Add a new regular section to the template layout.
Add a row to a column
Then give the section a row of a 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
Add a call to action module
Inside the row, add a 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 #]
Then remove the default background color to reveal the background for the section we added earlier.
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.
Presentation text settings
Update the following design parameters.
Contents
- remove default title and body text
- Use the icon: YES
- Icon: more (see screenshot)
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
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;
Result
Here is the result so far.
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;
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;
Result
You will now see a call to action as a slide at the top right of the page template.
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.
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.
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>
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.
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 !