How to Style the Divi Call to Action Module

With the Divi call to action module you can create some create CTA boxes for your website which will help to increase your conversions.

In this tutorial, I will be showing you 3 different CTA boxes and how you can create them.

You can find the demo’s right here.

Call to action box #1

In the first call to action box we are going to place a title, sub-title some body copy and a button. All of this can be created in the call to action module.

Step 1: Content tab

Start by placing the Call To Action module on your page.

Fill in the fields as in the image.

The “15 Tips to Increase Your Conversions” title is a h3.

Also place an URL under Link, otherwise your button will not show up.

I have used #434462 as my background color.

Step 2: Design tab

Title Text (h2)

• Title Font: Fira Sans
• Title Font Style: Uppercase
• Title Text Size: Desktop: 20px, Mobile: 16px
• Title Letter Spacing: 3px

Body Text

• Body Font Weight: Light
• Body Text Color: rgba(255,255,255,0.73)
• Body Text Size: Desktop: 20px, Mobile: 18px
• Body Line Height: 1.5em

Button

• Use Custom Styles For Button: Yes
• Button Text Size: Desktop: 18px, Mobile: 12px
• Button Text Color: #ffffff
• Button Background: #ef2140
• Button Background Hover: #d11d38
• Button Border Width: 0px
• Button Border Radius: 25px
• Button Font Style: Uppercase
• Show Button Icon: No
• Button Padding Desktop: 7px 7 px 25px 25px
• Button Padding Mobile: 7px 7 px 10px 10px
• Button Box Shadow: Top right option

Sizing

• Width Desktop: 60%
• Width Tablet, Mobile: 100%

Padding

• Padding Desktop: 75px 75px 75px 75px
• Padding Mobile: 75px 75px 25px 25px

Step 3: Advanced tab

CSS ID & Classes

• CSS Class: cta_box_1

Step 4: CSS

Place the following CSS in Divi > Theme Options > CSS or in your child theme CSS file.

/* ### CTA BOX 1 ### */

.cta_box_1 h3 {
  	font-size: 54px;
  	color:#fbc562 !important;
  	padding-top:5px;
  	padding-bottom: 35px;
  	font-family: 'Fira Sans',Helvetica,Arial,Lucida,sans-serif !important;
  	line-height:1.1em;
}

.cta_box_1 .et_pb_promo_description  {
  	padding-bottom:35px;
}

@media only screen and ( max-width: 479px ) {
.cta_box_1 h3 {
	 font-size: 36px;
}}

Call to action box #2

The next call to action box is a discount box. We will be starting with some row and column settings.

Step 1: Row settings

I am using a 3 column structure with a total width of 1240px. In each column I will be placing a Call To Action Module.

Column Settings: Content Tab

• Add an image for the bottom.
• Background Image Size: Actual Size
• Background Image Position: Bottom Center

Column Settings: Design Tab

• Spacing: 10px 10px 10px 10px
• Box Shadow: First option

Step 2: Content tab

Start by placing the Call To Action module in a column.

And fill in the fields.

The “$ 50 OFF” title is a h3.

Also place an URL under Link, otherwise your button will not show up.

Step 3: Design tab

Title Text (h2)

• Title Font: Source Sans Pro
• Title Font Weight: Bold
• Title Font Style: Uppercase
• Title Text Color: #000000
• Title Text Size: 20px

Body Text

• Body Font: Roboto Slab
• Body Text Color: #c60505
• Body Text Size: 28
• Body Line Height: 1.5em

Button

• Use Custom Styles For Button: Yes
• Button Text Size: 16
• Button Text Color: #ffffff
• Button Background: #e02b20
• Button Background Hover: #a81515
• Button Border Width: 0px
• Button Font Weight: Bold
• Button Font Style: Uppercase
• Show Button Icon: No
• Button Margin Top: 15px
• Button Padding Top and Bottom: 5px

Padding

• Padding Bottom: 150px
• Padding Left and Right: 25px

Border

• Round Corners: 4px
• Border Width: 5px
• Border Color: #01254c
• Border style: Dashed

Step 4: Advanced tab

CSS ID & Classes

• CSS Class: cta_box_2

Step 5: CSS

Place the following CSS in Divi > Theme Options > CSS or in your child theme CSS file.

/* ### CTA BOX 2 ### */

.cta_box_2 h2 {
	padding-bottom: 0px;
}

.cta_box_2 h3 {
  	font-size: 70px;
  	color:#01254c !important;
  	line-height:1.1em;
	font-weight: 800;
	letter-spacing: -3px;
	padding-bottom: 25px;
}

@media only screen and ( max-width: 479px ) {
.cta_box_2 h3 {
	 font-size: 54px;
}}

Call to action box #3 (desktop version)

The last call to action box is actually not created with the call to action module but with a text and a button module.

For this one we will be making 2 variatons. One for desktop and one for mobile.

We going to start with the desktop version.

Step 1: Row Settings

I am using a row with one column structure and a max-width of 750px. In this row place a text module and below a button module.

Step 2: Text Module Content Settings

“Get a Free Consultation Today” is a h4 title.

For the background I am using a gradient color. The dark blue is #341488 and the lighter blue is #6011ec.

The gradient direction is set to 135deg.

Step 3: Text Module Design Settings

Text

• Text Font Style: italic
• Text Color: rgba(255,255,255,0.8)
• Text Size: 18px

Heading Text h4

• Heading 4 Text Color: #ffffff
• Heading 4 Text Size: 28px

Spacing

• Padding: 25px 18px 35px 35px
• Heading 4 Text Size: 28px

Step 4: Text Module Advanced Settings

Custom CSS

• Add the following in the main element field.

outline: 2px dashed #1c9cbf;
outline-offset: -8px;

Visibility

• Disable on: Check mobile and tablet

Step 5: Button Module Content Tab

Give your button a title and link.

Step 6: Button Module Design Tab

Button

• Use Custom Styles For Button: Yes
• Button Text Size: 18
• Button Text Color: #ffffff
• Button Background: #da359d
• Button Border Width: 0px
• Button Border Radius: 2px
• Button Font Weight: Semi-Bold
• Button Font Style: Uppercase
• Show Button Icon: No
• Button Margin Top and Bottom: 0px
• Button Padding Top: 8px

Transform

• Transform translate x ass: 500px
• Transform translate y ass: -95px

Step 7: Button Module Advanced Tab

Visibility

• Disable on: Check mobile and tablet

Call to action box #3 (mobile version)

The mobile version we are going to build with the call to action module again.

Step 1: Content Tab

in the image below how I filled in the fields. Also add a link for the button otherwise it will not show up.

The background is the same as for the desktop version. The dark blue is #341488 and the lighter blue is #6011ec.

The gradient direction is set to 135deg.

Step 2: Design Tab

Text

• Text Allignment: center
• Text Color: light

Title Text H2

• Title Font Weight: Light
• Title Text Color: #ffffff
• Title Text Size: Desktop 18px, Mobile 16px

Body Text

• Body Font Weight: Bold
• Body Text Color: #ffffff
• Body Text Size: 24px

Button

• Use Custom Styles For Button: Yes
• Button Text Size: 18
• Button Text Color: #ffffff
• Button Background: #da359d
• Button Border Width: 0px
• Button Border Radius: 2px
• Button Font Weight: Semi-Bold
• Button Font Style: Uppercase
• Show Button Icon: No

Spacing

• Margin Bottom: 50px

Step 3: Advanced Tab

Visibility

• Disable on: Check desktop

If you have any questions let me know in the comments.