Create A Wordpress Website Using The Divi Theme

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;
  border-radius: 2rem;
}

.et-menu li.menu-item-has-children:hover > .sub-menu {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  border-radius: 2rem;
}

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.