


All Custom CSS Codes For Divi 5
Smooth dropdown animation
.et-menu li.menu-item-has-children > .sub-menu {
opacity: 0;
transform: translateY(10px);
transition: all 0.25s ease;
visibility: hidden;
}
.et-menu li.menu-item-has-children:hover > .sub-menu {
opacity: 1;
transform: translateY(0);
visibility: visible;
}
Clamp Size For Heading Hero
1.6rem, 1.2rem + 2.2vw, 3.25rem
BlogPost Overview With Featured Image Aspect Ratio Of 16x9
.et_pb_blog .et_pb_image_container {
aspect-ratio: 16 / 9;
overflow: hidden;
border-radius: 16px; /* adjust to your design */
}
.et_pb_blog .et_pb_image_container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block; /* removes small gaps */
}
All Custom CSS Codes For Divi 4
Different logo on fixed header
.et-fixed-header #logo {
content: url(https://yourdomain.com/wp-content/uploads/logo.png);
}
Change Height Of The Fullwidth Slider
.et_pb_slide {
height: 100vh;
}
Footer text
© 2026 | Ferdy Korp | Disclaimer | Privacy Policy Webdesign: Ferdy
Blurb CSS
border: 1px solid #3194c8; padding: 25px; border-radius: 4px;
Blurb Animation CSS
.animation-blurb.et_pb_blurb:hover {
background: #315669;
transition: all 1.0s ease-in-out 0s;
}
Remove Sidebar Border
.container:before { background-color:transparent !important; }
.et_pb_widget_area_right { border-left:0 !important; }
.et_pb_widget_area_left { border-right:0 !important; }
Contact Form Sum Color
.et_pb_contact_captcha_question {
color: #FFF;}
Black Title
h2 a{
color: #000000;
}
Contact Form Sum Color
.et_pb_contact_captcha_question {
color: #FFF;
Sticky Header Theme Builder
#divi-sticky-header {
top: 0;
width: 100%;
z-index: 99 !important;
}
2 Buttons Side By Side
.pa-inline-buttons .et_pb_button_module_wrapper {
display: inline-block;
}
Vertically Center Content
.et_pb_equal_columns .et_pb_column {
margin-top: auto;
margin-bottom: auto;
}
Padding Teammember
.et_pb_team_member_description {
padding: 20px;
}
In this Divi Theme tutorial I show you how to create a professional website.





Great tutorial! Thank you!
Thanks!