Supercharge Divi’s Call to Action Module Using CSS

Last modified Oct 30, 2019
Difficulty Intermediate
Language CSS
Category

Watch Tutorial

This Divi Snippet focuses on Call to Action. SJ shows you three CSS powered tricks you can do with your CTA module.

 

Image Fade Rotation

First, you need to create a before element. Creating a display block with standard parameters helps you make sure the code is working correctly. Then you place the URL of the image you’re using inside brackets on the background line. A couple more simple commands and the image is sized correctly and centered. The next couple of lines of code make the image larger so it will cover the entire area as it rotates and hides the overflow. Lastly, you’ll set the starting degree of rotation and the amount of opacity and the Zed index if you want to tint the photo.

Now you are ready to set the appearance on hover. Copy most of the code you’ve written so far and relabel it hover before. Set the values that you want to change and delete the second instance of the code that you want to stay the same. At this point, you’ll have a sudden jump between the two images. A line of code between the two main blocks will set the speed and style of the transition.

Remember copying your code, deleting it, reloading the page, and then pasting the code back in is a good way to test that all the code will work correctly from load.

 

Sunrise Transition

The Sunrise Transition’s code is very similar to the code for Image Fade Rotation. The code will work the same for setting your beginning parameters. You’ll want to code a small box in a corner of your CTA component and round the edges using a border radius percentage. To make the effect cover the entire area expand the width and height of your extra box and then set your new circle’s center at the corner of the component. Set the correct color of your sunrise and you’ll be ready to set the hover and transition parameters. The larger you make the sunrise element the more of a delay you’ll have before the effect reverses when you hover off.

These before and hover before commands with transition could be used for a wide variety of effects on your CTA modules.

 

Type Text Animation

Typically type text animation is done with JavaScript or jQuery but if you only want to animate one or two lines here is a way to do it without having to load an entire JavaScript library.

Using the class you created in setup you create a line to act as a cursor and then move it in near the text you’ll be working with. Next you’ll set the margins of your text and code the white-space and overflow to make the text disappear as you lower the width.

Moving away from CSS it’s time to create keyframe animations. A short line of code creates a typing animation and another short line creates our simulated blinking caret. Time to head back to the CSS. Write the code to get the animations to run, and then tweak the values to get them to run smoothly.

There are two things to take note of. First, you can run multiple animations on the same line if you place the comma between them. Also, if you make your own animation run it through a CSS linter to get the web kit and MS animations.

 

Does this snippet (still) work?

Please let us know in the comments if everything worked as expected. We have tested this code with the Version: 4.0.2 of the Divi Theme.
If you think this code saved you time, we will be happy to receive a comment!

____

License: This snippet contains code from the Divi Theme, copyright https://elegantthemes.com, modified by Divi Space, July 2018. Licensed under the GNU General Public License, no warranty; click here for details.

CSS

/* Image fade */
.image-fade:before {
display: block;
position: absolute;
content: "";
background: url('folder/image.jpg');
top: -20%;
left: -20%;
width: 140%;
height: 140%;
z-index: 0;
opacity: 0.05;
background-size: cover;
background-position: center;
transform: rotate(-10deg);
transition: 1s ease all;
}

.image-fade:hover:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.3;
transform: rotate(0deg);
}

.image-fade {
overflow: hidden;
position: relative;
}

/* typed */

@keyframes type {
from { width: 0; }
}

@keyframes caret {
50% { border-color: transparent; } }

.typed h2 {
border-right: .1em solid #fff;
width: 266px;
margin: 0 auto;
white-space: nowrap;
overflow: hidden;
animation: type 6s steps(24, end),
caret .3s step-end infinite alternate;
}

/* sunrise */

.sunrise:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
left: 0;
bottom: 0;
background: #ff8900;
border-radius: 50%;
transition: 1s ease all;
}

.sunrise:hover:before {
width: 300%;
height: 300%;
left: -150%;
bottom: -150%;
}

.sunrise {
position: relative;
overflow: hidden;
}

 

Your Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Receive notifications about our new blog posts.

Before You Start

Build a Child Theme

Child themes are incredibly important for the overall look, feel, and navigation of your website, so we encourage you to take the time to get to know the content. This will help your web design and development processes tremendously. That’s why we’ve made it super easy to build a child theme for Divi or Extra in seconds!

Generate Child Theme

How to Add Java Script and jQuery to Divi

There are four ways you can add JavaScript or jQuery to a Divi website: use the code module, the Divi Theme Options console, enqueue scripts using the functions.php file, or using a plugin.

Read More

How to Add CSS to Divi

Divi users can choose between five different methods to add custom CSS to their websites. Read more about these various methods you can use to add custom CSS to your Divi theme, as well as better understand the pros and cons of each method.

Read More