Divi CTA Cards are an outgrowth of my desire to style Divi Call to Action modules different for every client. Divi provides a lot of ways to customize CTA modules (colors, borders, fonts, etc.). But after a while, they all begin to look like minor variations on the same theme. The titles, description and button all appear together in the same places (left, right or center) and there are no animations or hover effects. Divi CTA cards offer the ability to mix different features by adding classes to Call to Action modules. You can mix and match:

  • Hover effects
  • Title placement options
  • Overlays
  • Background effects
  • Animations
  • AJAX-style spinner

Eamples of Standard Divi Call To Action Modules

Here are a few examples of Divi CTA modules styled in different ways using features available in the Divi Builder.

Standard Divi CTA - Example 1

This is a standard Divi Call to Action Module styled with a blue background and dark red button with everything positioned on the left.

Standard Divi CTA - Example 2

This is a standard Divi Call to Action Module styled with a image background an orange button with everything positioned in the center.

Standard Divi CTA - Example 3

This is a standard Divi Call to Action Module styled with a pink/violet diagonal background and teal button with everything positioned on the right.

As you can see, you can create a lot of variety using standard Divi. But I wanted more.

Divi CTA Cards

The primary difference between standard Divi CTA modules and my Divi CTA Cards is that the entire card is clickable. This has several benefits:

  • This eliminates the need for a button, which frees up more space in the module to visually engage visitors
  • Eliminating the button also permits more freedom in the placement of the title and description
  • Making the whole card as an integral unit allows us to add hover effects that invite visitors to click through and learn more

Examples of Divi CTA Cards

What can you do with Divi CTA Cards? Here are just a few examples. Scroll down further to see all of the features available.

Camping Equipment

Romantic Getaways

Be sure to hover. (If you are on a mobile device, tapping will display the hover effect.) Normally clicking on these would load another page, but since all of the examples link to themselves, in our demo, nothing happens.

Implementing Divi CTA Cards

If you simply want to use Divi CTA Cards on your website without reading the details of how they are constructed:

  1. Install the CSS code on your website. I recommend adding this to your child theme’s style.css file.
  2. Install the jQuery code provided below on you website. The easiest way to do this is to add it to Divi Theme Options > Integration Tab and paste it into the “Add code to the < body >” section.
  3. Peruse the examples below and copy/paste the CSS classes shown into your CTA modules’ CSS Class field (found on the Advanced Tab)

For those who desire a deeper understanding of how these work, this article is constructed as a tutorial. I’ll start with the basic design and then add features, starting with the simplest and working up to more complex options at the end. One note before we start, the code presented here is functional but not fully tested. The design permits unique cards to be created by combining multiple features. I have tested many combinations, but there are probably a hundred or more possible permutations that are untested. If you find a combination that doesn’t work, please tell me in the comments below. I’ll fix the problem and update the code. If you find a problem and develop a fix, please share that too. If I like your fix, I’ll incorporate that into the code as well.

Standard Divi CTA Card

The standard Divi CTA card has these features:

  • The entire card is clickable
  • Hovering over the card dims it slightly, a micro-interaction that suggest the card is clickable.
  • A minimum height is defined. This is needed, because once the button is removed, the module shrinks dramatically.

Here’s what a standard Divi CTA Card like:

Standard Divi CTA Card

To make the entire card clickable, we’ve made button transparent and resized it to cover the entire card. The opaque hover effect makes it apparent that the card is clickable.

CSS Class: trg-cta-card

Once the CSS code has been added to your website, all that’s needed to change a standard Divi CTA module to a Divi CTA Card is to add this to the module’s CSS Class field: trg-cta-card Some notes about the techniques employed to accomplish this:

  • To make the card clickable, we make the button transparent and resize it to cover the entire card.
  • We use flexbox to position the title and description in the center of the box.
  • The code includes some transition settings that are needed when we add animation features later.

Here is the CSS code:

/* TRG Divi Call To Action Cards */
.trg-cta-card {
  -webkit-box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1);
  position: relative;
  min-height: 300px;  //Set to your preference
  padding: 0;
  -webkit-transition: all 0.3s;
  -kthtml-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 10px !important;
}
  .trg-cta-card .et_pb_promo_description {
  position: absolute;
  padding: 20px;
  top: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-flow: column nowrap;
  flex-flow: column nowrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.trg-cta-card h2 {
  margin-top: 0;
}

.trg-wrap-container .et_pb_button,
.trg-cta-card .et_pb_promo_button.et_pb_button,
.trg-cta-card .et_pb_promo_button.et_pb_button:hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  z-index: 9999;
}
  .trg-cta-card:hover {
  opacity: 0.8;
}

Divi CTA Card Hover Effects

The change in opacity is a rather paltry micro-interaction. I wanted to make it more obvious that the card was clickable, so I created different micro-interactions using basic hover effects. Under each of these I’ll show the CSS class(es) to be added to the CTA module to activate the feature and then underneath I’ll show the CSS code.

TRG CTA Card - Hover Grow

When someone hovers over the card, the card grows and casts a shadow.

CSS Class: trg-cta-card hover-grow

/* Grow on hover */
.hover-grow {
-webkit-transition: all 0.3s ease-in-out;
-kthtml-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hover-grow:hover {
-webkit-transform: scale(1.04);
transform: scale(1.04);
-webkit-transition: all 0.3s ease-in-out;
-kthtml-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.5) !important;
box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.5) !important;
}

TRG CTA Card - Hover Shrink

When someone hovers over the card, the card shrinks to reveal a shadow.

CSS Class: trg-cta-card hover-shrink

/* Shrink on hover */
.hover-shrink {
-webkit-transition: all 0.3s ease-in-out;
-kthtml-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hover-shrink:hover {
-webkit-transform: scale(0.96);
transform: scale(0.96);
-webkit-transition: all 0.3s ease-in-out;
-kthtml-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
-webkit-box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.5) !important;
box-shadow: 0px 7px 15px rgba(0, 0, 0, 0.5) !important;
}

TRG CTA Card - Hover Background

Hovering over this card makes the background color change.

CSS Class: trg-cta-card hover-background

/* Change background color on hover */
.hover-background {
-webkit-transition: background 0.3s;
-kthtml-transition: background 0.3s;
transition: background 0.3s;
}
.hover-background:hover {
-webkit-transition: background 0.3s;
-kthtml-transition: background 0.3s;
transition: background 0.3s;
background-color: #ff2814 !important; //change to your preference
opacity: 1;
}

TRG CTA Card - Hover Border

Hovering over this card makes the border color change.

CSS Class: trg-cta-card hover-border

/* Change border color on hover */
.hover-border {
-webkit-transition: border 0.3s;
-kthtml-transition: border 0.3s;
transition: border 0.3s;
border: 0;
}
.hover-border:hover {
-webkit-transition: border 0.3s;
-kthtml-transition: border 0.3s;
transition: border 0.3s;
border: 10px solid #ff2814 !important; //change to your preference
opacity: 1;
}

Hover Description

When you hover on this card, the description appears.

CSS Class: trg-cta-card hover-description

/* Description appears on hover */
.hover-description ~ .et_pb_promo_description,
.hover-description .et_pb_promo_description {
color: transparent !important;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.hover-description h2 {
color: #fff;
}
.trg-wrap-container:hover .hover-description ~ .et_pb_promo_description,
.hover-description:hover .et_pb_promo_description {
color: #fff !important;
}
.hover-description:hover {
opacity: 1;
}

Divi CTA Card Title Placement

In some instances, I needed the title to be more prominent and positioned in different places.

Title on Top

This card has the title element relocated to the bottom of the card.

CSS Class: trg-cta-card cta-title-top

/* TRG CTA Cards - Title on Top */
.cta-title-top ~ .et_pb_promo_description h2,
.cta-title-top h2 {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: rgba(255, 0, 0, 0.8); /* Set to your preference */
padding: 5px;
line-height: 1.5em;
}

Title on Bottom

This card has the title element relocated to the bottom of the card.

CSS Class: trg-cta-card cta-title-bottom

* TRG CTA Cards - Title on Bottom */
.cta-title-bottom ~ .et_pb_promo_description h2,
.cta-title-bottom h2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background: rgba(255, 0, 0, 0.8); /* Set to your preference */
padding: 5px;
line-height: 1.5em;
margin: 0;
}
.cta-title-bottom .et_pb_promo_description {
padding-bottom: 50px;
}

Title on Left

This card has the title element relocated to the left suspended a bit off the bottom.

CSS Class: trg-cta-card cta-title-left

/* TRG CTA Cards - Title on Left */
.cta-title-left ~ .et_pb_promo_description h2,
.cta-title-left h2 {
position: absolute;
top: 66%;
left: 0;
width: 75%;
text-align: center;
background: rgba(20, 75, 255, 0.6); /* Set to your preference */
padding: 5px;
line-height: 1.5em;
}
.cta-title-left ~ .et_pb_promo_description,
.cta-title-left .et_pb_promo_description {
padding-top: 40px !important;
text-align: right !important;
-webkit-box-pack: start !important;
-ms-flex-pack: start !important;
justify-content: start !important;
}

Divi CTA Card Overlay Effects

In some cases, I wanted a typical Divi overlay to appear when visitors hovered over the card. Once I had that working, I realized I could use this to make a button appear whenever a user hovered.

So far, everything we have done has been accomplished with CSS. However, to accomplish what I envisioned, I needed an extra div element added to the CTA module. I did this using a tiny jQuery snippet.

The jQuery code looks for elements with the class “trg-container-element” assigned. When it finds one, it adds two nested divs and assigns the class “trg-overlay” to the parent and “overlay-content” to the child.

Note: The button that appears in the overlay can’t use the button settings in the Divi Builder. For that reason, the colors and fonts must be set in the CSS code.

// Append an overlay element
jQuery(".trg-overlay-container").append("<div class="trg-overlay"><div class="overlay-content"></div></div>" );

Hover Overlay

When you hover over this card, it displays an overlay.

CSS Class: trg-cta-card trg-overlay-container

/* TRG CTA Cards - Overlay */
.trg-overlay {
position: absolute;
top: 0;
left: 0;
background-color: #fff;  /* Set overlay background color to your preference */
overflow: hidden;
width: 100%;
height: 100%;
-webkit-transition: opacity 0.75s ease-in-out;
transition: opacity 0.75s ease-in-out;
opacity: 0;
}
.trg-overlay-container:hover .trg-overlay {
opacity: 0.8;
}
.trg-overlay .overlay-content {
white-space: nowrap;
color: #ff2814; /* Set icon color to your preference */
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
.trg-overlay .overlay-content::before {
content: &quot;\e050&quot;; /* Set icon to your preference -- Google Divi Icon Font for choices */
line-height: 2em;
font-size: 30px;
font-family: &quot;ETmodules&quot;;
}

Hover Button

When you hover over this card, it displays a transparent overlay containing a button that slides down.

CSS Class: trg-cta-card trg-overlay-container overlay-button

/* TRG CTA Cards - Overlay containing button */
.trg-wrap-container:hover .trg-overlay,
.overlay-button.trg-overlay-container:hover,
.overlay-button.trg-overlay-container:hover .trg-overlay {
opacity: 1;
}
.overlay-button .trg-overlay {
background-color: transparent;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.overlay-button.trg-overlay-container:hover .trg-overlay{
top: 25%;
}
.overlay-button .trg-overlay .overlay-content::before {
content: &quot;Learn More&quot;;  /* Set button text to your preference */
display: inline-block;
line-height: 1.7em;
font-family: &quot;Droid Sans&quot;,Helvetica,Arial,Lucida,sans-serif; /* Set button font to your preference */
color: #fff;  /* Set button text color to your preference */
border: 2px solid #fff; /* Set button border to your preference */
background-color: rgba(20, 255, 20, 0.6); /* Set button background color to your preference */
padding: 10px;
width: 150px; /* You may need to adjust this based on length of button text */
font-size: 20px;
}
.overlay-button .et_pb_promo_description {
padding-bottom: 100px;
}

Divi CTA Card Background Effects

This group of features manipulates the background image of the CTA module. However, in order to manipulate the background, we need to wrap the module inside a container. Why is this needed? Consider the Hover Zoom In effect. Without a container, when we make the background image larger, the entire CTA module would grow. By wrapping it inside a container, we can enlarge the image while keeping the module the same size. But we also need to make some additional structural changes to the module. Otherwise, when we manipulate the background, the title and description go along for the ride. For example, if we grow, shrink or blur the background, we also grow, shrink or blur the title and description.

Here is how Divi’s CTA Module is structured. (Simplified.)

<div class="et_pb_promo">
  <div class="et_pb_promo_description">
    <h2>Title</h2>
    Description
  </div>
  <a class="et_pb_promo_button"></a>
</div>

Here is the structure we need.

<div class="trg-wrap-container">
  <div class="et_pb_promo"></div>
    <a class="et_pb_promo_button"></a>
    <div class="et_pb_promo_description">
      <h2>Title</h2>
      Description
    </div>
  </div>

Once again, a small jQuery snippet will do this for us.

(function($){
  // Wrap the element in a container
  $( ".trg-wrap" ).wrap( "<div class="trg-wrap-container"></div>" );
  // Move the description and the button to the new container
  $(function(){
      $(".trg-wrap .et_pb_promo_description").each(function(){
          $(this).insertAfter($(this).parent())
      })
      $(".trg-wrap .et_pb_promo_button").each(function(){
          $(this).insertAfter($(this).parent().parent())
      })
  });
})(jQuery);

All of the background effect require the CSS class “trg-wrap” to create the container, plus an additional class to add the specific feature. The container needs its own CSS code:

/* Wrap the CTA Module in a container and move description to new parent */
.trg-wrap-container {
height: 100%;
width: 100%;
max-height: 300px;
overflow: hidden;
position: relative;
}
.trg-wrap-container .et_pb_promo_description {
position: absolute;
top: 0;
left: 0;
background-color: transparent;
overflow: hidden;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 20px;
color: #fff; /* Set to your preference */
text-align: center;
z-index: 1;
}
.trg-wrap-container .et_pb_promo_description h2 {
color: #fff; /* Set to your preference */
margin: 0;
}

The one downside of restructuring the CTA module ib this manner, is that the Divi Builder settings for the Title and Description (font-size, color, etc) are lost. We will need to set these via CSS (as commented above). But the effects we can create by doing this are worth that cost and more.

Hover Zoom In Background

When you hover over this card, the background slowly zooms.

CSS Class: trg-cta-card trg-wrap hover-zoom-in-bg

/* Zoom in the background on hover */
.hover-zoom-in-bg {
  -webkit-transition: all 3s;
  transition: all 3s;
}
.trg-wrap-container:hover .hover-zoom-in-bg {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity: 1;
}

Hover Zoom Out Background

When you hover over this card, the background slowly zooms.

CSS Class: trg-cta-card trg-wrap hover-zoom-out-bg

/* Zoom out the background on hover */
.hover-zoom-out-bg {
-webkit-transition: all 3s;
transition: all 3s;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.trg-wrap-container:hover .hover-zoom-out-bg {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}

Hover Sharpen Background

The background on this card is a bit blurred. When you hover, the background comes into focus.

CSS Class: trg-cta-card trg-wrap hover-sharpen-bg

/* Blur the background and sharpen on hover */
  .hover-sharpen-bg {
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
  .hover-sharpen-bg {
  -webkit-filter: blur(5px);
  filter: blur(5px);
}
  .trg-wrap-container:hover .hover-sharpen-bg {
  -webkit-filter: blur(0);
  filter: blur(0);
}

Hover Color Background

The background on this card is black and white. When you hover, the background turns to color.

CSS Class: trg-cta-card trg-wrap hover-color-bg

/* Make the background image black and while and show color on hover */
.hover-color-bg {
-webkit-transition: all 1.0s;
transition: all 1.0s;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.trg-wrap-container:hover .hover-color-bg {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-filter: none;
filter: none;
}

Polaroid Style

This card is styled to look like a Polaroid photograph.

CSS Class: trg-cta-card trg-wrap cta-polaroid

/* TRG CTA Polaroid-StyleCards */
.cta-polaroid {
background-color: #fff !important;
border: 10px solid #fff;
}
.cta-polaroid ~ .et_pb_promo_description h2,
.cta-polaroid h2 {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 5px;
line-height: 1.5em;
color: #222;
background-color: #fff;
margin-bottom: 0;
}
.polaroid.et_pb_promo_description {
padding-bottom: 50px;
}

Divi CTA Card On-Click Spinner

In mobile devices, of course there is no hovering. The hover effects do appear when an item is tapped. In testing, this confused some. If the next page didn’t load quickly, it made it seem that the tap simply produced the hover effect and they scrolled on. Later, when the new page loaded, they didn’t understand what had happened.

To counter this, I added an AJAX-style spinner. For each client, I change the spinner image (an SVG file). To create your own, I suggest you visit loading.io.

Once again, a bit of jQuery magic is needed to attach a click event to the CTA Card. My solution is a bit different than other spinners I’ve seen. Most of the time jQuery is used to add a class to an element which causes the spinner, which is already present but hidden, to be made visible. In this case, the spinner doesn’t exist until someone clicks, then jQuery adds the spinner element to the Divi CTA Card.

// Add a spinner
  $(&quot;.trg-spinner a&quot; ).click(function() {
      $(this).parent().append(&quot;<div class='trg-spinner-container'></div>&quot;);
  });;
});

On-Click Spinner

Then the card is clicked an AJAX-style spinner is displayed until the next page loads.

CSS Class: trg-cta-card trg-spinner

/* AJAX=Style Spinner*/
.trg-spinner-container {
background-color: transparent !important;
background-size: cover !important;
border: none;
color: transparent !important;
width: 100%;
height: 100%;
content: &quot;&quot;;
opacity: 1;
filter: alpha(opacity=1);
}
.trg-spinner-container:before {
content: url('images/double-spinner.svg');
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

Animating Divi CTA Cards

Divi CTA Cards easily be can be animated using any of Divi’s built-in animations simply by adding addition CSS classes to the module settings. For details, see my previous article: Use All 18 Divi Built-In Animations Anywhere Here’s an example:

Divi CTA Cards

Extend Divi Call To Action modules by adding: Hover effects (5), Title placement options (3), Overlays (2), Background effects (5), Animations (18) and an AJAX-style spinner.

CSS Class: trg-cta-card trg-wrap hover-sharpen-bg et-waypoint et_pb_animation_fade_in

Divi CTA Card Summary

For me, Divi CTA Cards provide the flexibility to create an unlimited variety of Call To Action modules. It’s possible to combine any hover effect with any title placement with any overlay option with any background effect. In addition, the spinner can be attached to any Divi CTA Card. I hope you find my Divi CTA Cards useful. I’d be even more pleased to learn that someone has used what I’ve provided here and taken it to a new level. Please don’t dump the code provided here into a production website without first testing it in a staging environment. While I’ve spent considerable time testing things, I don’t offer any assurances that my code will work everywhere. Comments are always appreciated. If you notice something that’s less than perfect let me know. That way we can all learn. One last thought. I don’t claim to be an expert. This is what works for me. In the past, I’ve been able to learn from others who took the time to share their code. This my way to return the favor and pay it forward. Update (9/14/17): I updated the jQuery to properly place the link in the DOM to be clickable.

Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This