Web Guidelines

Guidelines

Elements

HTML/CSS

Call to Action Module

Example
CSS

The Divi Call to Action Module. Colors and typography can be modified in the Divi module settings as long as they meet brand guidelines. The Divi CSS included below is included to define the structure and styling of the Call to Action Divi module. Color and typography styling may be modified via the Divi module settings.

Example

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

CSS

Copy

/* Call to action title */

h1,
h2,
h3,
h4,
h5,
h6 {
color: #333;
padding-bottom: 10px;
line-height: 1em;
font-weight: 500;
}

/* Call to action module */

.et_pb_promo {
padding: 40px 60px;
text-align: center;
}

.et_pb_promo_description {
padding-bottom: 20px;
position: relative;
}

.et_pb_column_1_2 .et_pb_promo,
.et_pb_column_1_3 .et_pb_promo,
.et_pb_column_1_4 .et_pb_promo,
.et_pb_column_1_5 .et_pb_promo,
.et_pb_column_1_6 .et_pb_promo,
.et_pb_column_2_5 .et_pb_promo,
.et_pb_column_3_5 .et_pb_promo {
padding: 40px;
}

.et_pb_column_1_2 .et_pb_has_bg_hover.et_pb_promo:hover,
.et_pb_column_1_3 .et_pb_has_bg_hover.et_pb_promo:hover,
.et_pb_column_1_4 .et_pb_has_bg_hover.et_pb_promo:hover,
.et_pb_column_1_5 .et_pb_has_bg_hover.et_pb_promo:hover,
.et_pb_column_1_6 .et_pb_has_bg_hover.et_pb_promo:hover,
.et_pb_column_2_5 .et_pb_has_bg_hover.et_pb_promo:hover,
.et_pb_column_3_5 .et_pb_has_bg_hover.et_pb_promo:hover {
padding: 40px !important;
}

.et_pb_no_bg_hover.et_pb_promo:hover {
padding: 0 !important;
}

.et_pb_has_bg_tablet.et_pb_promo {
padding: 40px !important;
}

.et_pb_no_bg_tablet.et_pb_promo {
padding: 0 !important;
}

.et_pb_has_bg_phone.et_pb_promo {
padding: 40px !important;
}

.et_pb_no_bg_phone.et_pb_promo {
padding: 0 !important;
}