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.
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.
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.
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.
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)
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.
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;
- Unzip the file to access the Divi-expanding-CTA.json
- 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.