Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Posted on October 9, 2018 by in Divi Resources | 6 comments

Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level. This week, as part of our ongoing Divi design initiative, we’re going to show you how to creating slide-in CTAs with Divi’s row alignment and animation settings using the Cleaning Company Layout Pack.

To help pull this off, we’ll start off by removing all the animations that are already there. That way, we can highlight the calls to action that slide in.

Let’s get to it!

Preview

Let’s take a look at the three different examples we’re going to handle in this post:

slide-in ctas

Upload Cleaning Company Landing Page

Add New Page & Switch to Visual Builder

As mentioned before, we’re going to use the Cleaning Company Layout Pack to create this tutorial but feel free to use this approach for any website you’re building. Add a new page, enter your page title and switch over to Visual Builder right away.

slide-in ctas

Upload Cleaning Company Landing Page

Once you do, you’ll see three options appear on your screen. You can start building from scratch, choose a premade layout or clone an existing page. Choose the second option.

slide-in ctas

Search for the Cleaning Company Layout Pack, select the landing page layout and upload it to your page.

slide-in ctas

Removing all Animation Settings on Page

Locate Section on Page

Once the layout is uploaded to your page, go ahead and locate the following section.

slide-in ctas

Remove Animation

Open its settings and remove the animation that is already there.

slide-in ctas

Extend Style to All Sections

To save time, we’re going to extend this animation style to all the design elements on the page. We’ll start with the sections on our page by right-clicking, selecting ‘Extend Animation Styles’. Make it apply to all section throughout the page and click on ‘Extend’.

slide-in ctas

slide-in ctas

Extend Style to All Rows

Repeat the same steps, but instead, make it apply to all the rows throughout the page.

slide-in ctas

slide-in ctas

Extend Style to All Modules

Lastly, make it apply to all modules on the page as well.

slide-in ctas

slide-in ctas

Creating CTA #1

slide-in ctas

Add New Row

Location

Let’s start creating the first slide-in CTA! Add a new row at the bottom of the following section:

slide-in ctas

Column Structure

Choose the following column structure for the row you’ve just added:

slide-in ctas

Row Alignment

We’re going to push the row to the left to help create the slide-in effect.

  • Row Alignment: Left

slide-in ctas

Sizing

We’ll also decrease the width of our row.

  • Use Custom Width: Yes
  • Custom Width: 500px

slide-in ctas

Spacing

And to get rid of the unnecessary white space, remove the top and bottom padding of the row.

  • Top Padding: 0px
  • Bottom Padding: 0px

slide-in ctas

Add Call to Action Module

Add Copy

We can now add our Call to Action Module! Add some content of choice.

slide-in ctas

Add Link

Add a link to your CTA Module next. If you don’t have a link to redirect to yet, you can simply enter ‘#’. Without adding something to this box, you won’t be able to see the button, so make sure you don’t leave it empty.

slide-in ctas

Remove Background Color

The CTA Module has by default a background color. Go ahead and remove it in the background settings.

slide-in ctas

Copy Section Gradient

Open the section containing the blue gradient background. Without changing anything about it, right-click and copy the settings.

slide-in ctas

Paste Gradient in CTA Module

Paste this gradient background on the CTA Module.

slide-in ctas

Title Text Settings

Open the CTA Module settings again, go to the title text settings and make some changes to match the layout pack:

  • Title Font: Ubuntu
  • Title Font Weight: Bold
  • Title Text Size: 24px (Desktop & Tablet), 16px (Phone)
  • Title Line Height: 1.2em

slide-in ctas

Body Text Settings

Change the body font weight of the body as well.

  • Body Font Weight: Semi Bold

slide-in ctas

Button Settings

Change the button settings next.

  • Use Custom Styles for Button: Yes
  • Button Text Size: 18px
  • Button Text Color: #557df3
  • Button Background Color: #FFFFFF
  • Button Border Width: 10px
  • Button Border Color: #FFFFFF
  • Button Border Radius: 0px
  • Button Font: Ubuntu
  • Font Weight: Bold

slide-in ctas

slide-in ctas

Spacing

Increase the padding of the module as well.

  • Top Padding: 80px
  • Bottom Padding: 80px
  • Left Padding: 50px
  • Right Padding: 50px

slide-in ctas

Border

Then, add some top right and bottom right border-radius in the border settings.

  • Top Right: 100px
  • Bottom Right: 100px

slide-in ctas

Box Shadow

To create more depth, we’re going to add a subtle box shadow.

  • Box Shadow Blur Strength: 71px
  • Box Shadow Spread Strength: -5px

slide-in ctas

Animation

Last but not least, give your CTA Module an animation effect.

  • Animation Direction: Right
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Linear

slide-in ctas

Creating CTA #2

slide-in ctas

Clone CTA #1 Row & Make Changes

Clone Row

To create the second example, go ahead and clone the first row.

slide-in ctas

Drag to Section

Scroll down the page and place the duplicate right here:

slide-in ctas

Remove Section Top Padding

Open the settings of the section you’ve put the row in and remove the top padding.

  • Top Padding: 0px

slide-in ctas

Remove Section Top Left Border Radius

Go to the Border settings next and remove the top left border-radius as well.

slide-in ctas

Remove CTA Top Right Border Radius

Then, open the CTA Module and remove the top right border-radius to allow the section and module to blend.

slide-in ctas

Change Animation

For this slide-in CTA, we’re going to use a different animation. Feel free to play around with other animation options as well.

  • Animation Direction: Center
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Linear

slide-in ctas

Creating CTA #3

slide-in ctas

Clone CTA #1 Row & Make Changes

Clone Row

To create the last example, we’re going to clone the row once again.

slide-in ctas

Drag to Section

Place the duplicate in the following section:

slide-in ctas

Change Row Alignment

Open the row settings of the module and change the alignment to right.

  • Row Alignment: Right

slide-in ctas

Remove CTA Gradient Background

Remove the gradient background of the module as well.

slide-in ctas

Use Background Color Instead

Use a background color instead.

  • Background Color: #f2835a

slide-in ctas

Change Button Text Color

To match the background color, change the button text color as well.

  • Button Text Color: #f2835a

slide-in ctas

Remove CTA Border Radius

We’re turning the CTA Module into a square by removing all the border-radius it was given.

slide-in ctas

Change Animation

Change the animation settings next.

  • Animation Direction: Down
  • Animation Intensity: 100%
  • Animation Starting Opacity: 100%
  • Animation Speed Curve: Linear

slide-in ctas

Remove Section Bottom Padding

Last but not least, we’re going to push the module to the bottom of the section by removing the bottom padding of the section it’s placed in and we’re done!

  • Bottom Padding: 0px

slide-in ctas

Preview

Let’s take a final look at the three examples of slide-in CTAs we’ve created.

slide-in ctas

Final Thoughts

In this post, we’ve shown you how to create slide-in CTAs using Divi’s Cleaning Company Layout Pack. We’ve started off by removing the animations that are already present on the page. After that, we’ve created three slide-in CTAs to draw attention. This blog post is part of our Divi design initiative where we try to put something in your design toolbox each and every week. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

6 Comments

  1. nice work

  2. Great !! it avoids creating a div in a module code.
    How it reacts on motive(mobile)?

  3. Dear Donjete,
    Thank you, as usual, for great tips and inspirations. Each time I go to youtube to watch the video of the presentation you offer. As you make the effort of doing a video, why not add it here above your wonderful explanations?
    It really is an added value. Thanks again for your great work!!!

  4. Great! Thank you

  5. GREAT JOB. Love it.
    Can you create a layout of just the module of CTA #1?

  6. hi

    To go farther still, you can insert of the js into a module code for a random(unpredictable) display(posting) of several cta:

    Duplicate the created module and add this class at all modules :

    element-variable

    and create a module code with this code :

    window.onload=function(){
    var E=document.getElementsByClassName(“element-variable”);
    var m=E.length;
    var n=parseInt(Math.random()*m);
    for(var i=m-1;
    i>=0;i–){var e=E[i];
    e.style.display=’none’;
    }E[n].style.display=”;
    }

    and save

    it’s great 🙂 🙂

Leave a Reply

Comments are reviewed and must adhere to our comments policy.

500,591 Customers Are Already Building Amazing Websites With Divi. Join The Most Empowered WordPress Community On The Web

We offer a 30 Day Money Back Guarantee, so joining is Risk-Free!

Sign Up Today

Pin It on Pinterest