The Elegant Themes website was recently given a full makeover including an updated expanding Call-To-Action section that encourages users to sign up for an Elegant Themes membership. This is a nice effect to help draw extra attention to an important section of the website.

There was a previous post on their blog that showed you “How to Create an “Expanding” CTA like Elegant Themes”, but this required extra custom CSS and Javascript to achieve the effect. With the new settings in Divi, it is now possible to recreate this effect using only the built-in Divi Builder settings.

This post will walk you through the key steps used to recreate the CTA using the inbuilt Divi Builder options and comes with a free Divi layout file for the full effects at the bottom of the post.

Creating the expanding Call-To-Action section

The expanding Call-To-Action effect is achieved by adding various settings to your section that the CTA sits in.

The CTA in the demo is made up of 1 row and 3 Divi modules (1 text module, followed by1 button module, followed by 1 text module), but you can replace this content within the CTA sections with anything you like, as the hover effect is achieved on the section level.

Divi CTA section

The key steps to create the expanding CTA effect are all set on the CTA section and include;

  • Adding a hover expand to the section via the Design > Transform settings
  • Adding a hover background color to the section via the Content > Background settings
  • Adding a hover box shadow to the section via the Design > Box Shadow settings
  • Reducing transition speed on the section on the Advanced > Transitions settings

1. Adding a hover expand to the section via the Design > Transform settings

To Add the hover expand to the CTA section you can go into the CTA section settings and browse to the Design > Transform settings. Click on the cursor icon to reveal the Default and Hover states. You need to select the hover tab and on the Transform Scale section set the value to 115%. The link icon will be selected by default so both vertical and horizontal scale will change as either number is changed. Your whole CTA section and it’s contents will now grow 15% when the mouse enters the section.

CTA expand settings

2. Add a hover background color to the CTA section

To add the hover background color to the CTA section you can go into the CTA section settings and browse to the Content > Background settings. Click on the cursor icon to reveal the Default and Hover states. You need to select the hover tab and in the background-color tab set the color to #755ec9.

Divi CTA background color

3 Add a hover box-shadow to the CTA section

To add the hover box-shadow to the CTA section, you can go into the CTA section settings and browse to the Design > Box Shadow settings. Select the 1st preset box shadow and then click on the cursor icon to reveal the Default and Hover states. You need to select the Default tab and set everything to 0. Then click on the Hover tab and use the following settings;

  • Box Shadow Horizontal Position – 0px
  • Box Shadow Vertical Position – 0px
  • Box Shadow Blur Strength – 80px
  • Box Shadow Spread Strength – 80px
  • Shadow Color – #755ec9 (same as the background in step 2)

divi call to action blur

4. Reducing transition speed on the CTA section

To slow the transition of the effect down on the CTA section like on the Elegant Themes website you can go into the CTA section settings and browse to the Advanced > Transitions settings. In the same section you can also set the Transition Speed Curve which for this demo is set to ease-out.CTA transition time

Download this CTA layout for free

If you are having trouble getting this CTA to work on your site or just want to add it to your site a bit faster, you can download the .json layout file here. To use this layout you will need to;

  1. Unzip the file to access the Divi-expanding-CTA.json
  2. Drag & drop the .json file into your Divi Visual Builder and follow the prompts OR import into your Divi library

If you have used this guide or free layout on your site feel free to drop a link in the comments and if you need help getting it to work just ask below.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close