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

October 9, 2018

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Remove Animation

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

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-4 Theme Builder Layout

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 Theme Builder Layout

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-6 Theme Builder Layout

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 Theme Builder Layout

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-8 Theme Builder Layout

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 Theme Builder Layout

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-10 Theme Builder Layout

Creating CTA #1

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-1 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Paste Gradient in CTA Module

Paste this gradient background on the CTA Module.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-20 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-24 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Creating CTA #2

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-2 Theme Builder Layout

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 Theme Builder Layout

Drag to Section

Scroll down the page and place the duplicate right here:

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-30 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

Creating CTA #3

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-3 Theme Builder Layout

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 Theme Builder Layout

Drag to Section

Place the duplicate in the following section:

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-36 Theme Builder Layout

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 Theme Builder Layout

Remove CTA Gradient Background

Remove the gradient background of the module as well.

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-38 Theme Builder Layout

Use Background Color Instead

Use a background color instead.

  • Background Color: #f2835a

creating-slide-in-ctas-with-divis-row-alignment-animation-settings-39 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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 Theme Builder Layout

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!

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

creator-of-editorskit-launches-community-block-sharing-site Theme Builder Layout

Creator of EditorsKit Launches Community Block-Sharing Site

Jeffrey Carandang, the creator behind the EditorsKit WordPress plugin, launched a new community site for sharing block designs and templates today. The ShareABlock website allows visitors to download block files directly from the site and import them into the block...

divi-meetup-network-community-update-november Theme Builder Layout

Divi Meetup Network Community Update: November

THE HOLIDAYS HAVE BEGUN AND WE LOVE IT! Thanksgiving has come and gone and so has our massive annual Black Friday Deal. However, it’s not too late to get in on the action! You can still take advantage of our Cyber Monday deal to get 25% off a new membership or account...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.