How to Supercharge Divi’s Call to Action Module Using CSS

On Friday the 29th of June, Divi Space hosted the first of their new series of Facebook Live webinars about supercharging the Divi modules. This Webinar focuses on Call to Action. SJ shows you three CSS powered tricks you can do with your CTA module.

If you missed the Facebook live, you can rewatch it at any time!

Super Powered Modules – Call To Action

Posted by Divi Space on Friday, June 29, 2018

SJ will be sharing the code for Type Text Animation, Image Fade Rotation, and a Sunrise Transition. The only Prep necessary is giving each effect its own CSS class. This will keep the effects running only where you need them to.

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.

Here’s the code:

/* 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;
}

The code can be dropped into Divi's CSS options or into a child theme and should work seamlessly. If you do use this code please let us know where you've used it. We are always excited to know the code we share is being used.

Since this is CSS you aren’t going to kill or break anything. Play with the values and see what works best for you.

There are going to be several more Supercharging Your Divi Modules and David Blackmon plans on posting a list so you can be sure to watch the ones you are most interested in. SJ is currently planning for the next supercharging webinar to feature sliders – showing you three effects you can add to the default Divi slider using CSS and jQuery instead of using a third-party slider.

Randy Brown

Randy A Brown is a professional writer specializing in WordPress, eCommerce, and business development. He loves helping the WordPress community by teaching readers how to improve their websites and businesses. His specialties include product reviews, plugin and theme roundups, in-depth tutorials, website design, industry news, and interviews. When he's not writing about WordPress he's probably reading, writing fiction, or playing guitar.

Previous post
Next post

6 Comments

  1. Haroun Kola

    Thanks for this video, I always wanted to change the boring, standard CTA module.

    Reply
  2. Ben Delaney

    This was a great webinar! thank you. I enjoyed the conversational approach and really appreciated the way Stephen discussed the rationale behind the code. One thing many folks will learn here is how powerful and lightweight a CSS approach can be as opposed to making another JS call.

    Great job.

    Reply
  3. Toudjidoum

    You have just incorporated for my website the most performing components in the world for the existence of my website consisted of image fade rotation which are really important in the cited field above.
    More once truly thanks.

    Reply
  4. Morten

    Awesome inspiration..
    Just wondering if it wil be possible, for cta at the bottom of af page, to start the ‘typed animation’, only when scrolled into the view-port?

    Thanks

    Reply
  5. Chris Backhouse

    Great tutorial and some top css! I’ll be following your future episodes avidly.

    Reply
  6. Dylan

    How can I get the typed effect to run separate on two lines? Say I have an H1 tag that runs two lines, with this code the cursor is the height of both lines, and types it all in one straight shot. How can I get it so it types line 1 and then jumps back to the left and types line two after?!

    Thank you very much for this demonstration, I was just looking last week at how to do this, and the answer was here :).

    Reply

Submit a Comment

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