Having a reclosable sliding call to action on your site is one of the least intrusive ways to get 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 reclosable sliding call to action will work great for promoting just about anything on a landing page.
In this tutorial, we’re going to design a reclosable sliding 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.
Overview
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.
Creation of a reclosable 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 (s) 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.
Creating the post content section
The post content section is a necessary part of any page template to display the actual content of the page or post embedded in Divi or WordPress. We will add it to our model before creating our first call to action to insert.
Add a row to a column
To start, add a row of one column to the regular section.
Add a post content module
Then add a post content module to the row.
Line parameters
After that update the row settings as follows:
- Width: 100%
- Max width: 100%
- Padding: 0px high, 0px low
Creation of the call to action at the 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 Parameters
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 on the “x” icon. This will cause the CTA to slide in and out of sight.
Line parameters
Now let’s update the row 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 of 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 font: Lato
- Body font-weight: fat
- 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 top, 12 pixels bottom, 32 pixels left, 32 pixels right
- padding: 40 pixels top, 40 pixels bottom, 40 pixels left, 40 pixels 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 that is 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 title and body from the default 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;
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 already created section. Next, we’re going to create a slide-to-action 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 settings 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 Blurb Module Settings
Then open the Blurb module settings and update the custom CSS snippet in the main element by replacing “right” with “left”. Here is the full excerpt:
- position: absolute;
- bottom: 0px;
- left: -40px;
Results
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 “Bottom Right”, “Bottom Left” sections. You will also need to adjust the CSS code for each of the modules to have a result similar to the following.
Read more: 7 Divi child themes for podcasters
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 box.
<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>
Final thoughts on reclosable sliding call to action
With Divi, it is 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.
For website maintenance service contact us.