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:

creating-slide-in-ctas-with-divis-row-alignment-animation-settings Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-1 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-2 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-3 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Remove Animation

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-4 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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’.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-5 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-6 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Extend Style to All Rows

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-7 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-8 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Extend Style to All Modules

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-9 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-10 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Creating CTA #1

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-1 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Add New Row

Location

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-11 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Column Structure

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-12 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Row Alignment

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

  • Row Alignment: Left

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-13 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Sizing

We’ll also decrease the width of our row.

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-14 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-15 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Add Call to Action Module

Add Copy

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-16 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-17 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Remove Background Color

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-18 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Copy Section Gradient

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-19 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Paste Gradient in CTA Module

Paste this gradient background on the CTA Module.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-20 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-21 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Body Text Settings

Change the body font weight of the body as well.

  • Body Font Weight: Semi Bold

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-22 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-23 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-24 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Spacing

Increase the padding of the module as well.

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-25 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Border

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

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-26 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-27 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-28 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Creating CTA #2

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-2 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Clone CTA #1 Row & Make Changes

Clone Row

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-29 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Drag to Section

Scroll down the page and place the duplicate right here:

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-30 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Remove Section Top Padding

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

  • Top Padding: 0px

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-31 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Remove Section Top Left Border Radius

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-32 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-33 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-34 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Creating CTA #3

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-3 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Clone CTA #1 Row & Make Changes

Clone Row

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-35 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Drag to Section

Place the duplicate in the following section:

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-36 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Change Row Alignment

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

  • Row Alignment: Right

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-37 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Remove CTA Gradient Background

Remove the gradient background of the module as well.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-38 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Use Background Color Instead

Use a background color instead.

  • Background Color: #f2835a

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-39 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Change Button Text Color

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

  • Button Text Color: #f2835a

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-40 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Remove CTA Border Radius

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-41 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Change Animation

Change the animation settings next.

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-42 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-43 Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

Preview

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings Creating Slide-in CTAs with Divi’s Row Alignment & Animation Settings

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!

SEO News and More

SEO News and More