Standard Divi CTA

This is a standard Divi Call to Action Module styled with a blue background and dark red button.

CSS Class: none

TRG 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

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

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

TRG CTA Card - Hover Background

Hovering over this card makes the background color change.

CSS Class: trg-cta-card hover-background

TRG CTA Card - Hover Border

Hovering over this card makes the border color change.

CSS Class: trg-cta-card hover-border

Title on Top

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

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

Title on Bottom

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

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

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

Hover Overlay

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

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

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

Hover Description

When you hover on this card, the description appears.

CSS Class: trg-cta-card hover-description

Polaroid Style

This card is styled to look like a Polaroid photograph.

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

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

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

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

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

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

Combo #1

This card combines the Title on Bottom, Hover Zoom In Background and Spinner features.

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

Combo #2

This card combines, the Title on Left, Hover Sharpen Background, and Hover Description features.

CSS Class: trg-cta-card trg-wrap hover-sharpen-bg cta-title-left hover-description

Combo #3

This card merges the Hover Background and Spinner features.

CSS Class: trg-cta-card hover-background trg-spinner

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.

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.

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