Create A WordPress Website Using The Divi Theme

Website Tutorials 27 January 2026 Tutorial 21 of 154

Divi 5 Tutorials Playlist

divi theme custom footer 01
divi theme custom post 01

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 16×9

.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.

{
“@context”: “https://schema.org”,
“@type”: “VideoObject”,
“name”: “Create A WordPress Website Using The Divi Theme”,
“description”: “Learn how to create a WordPress website using the Divi theme.”,
“thumbnailUrl”: “https://img.youtube.com/vi/KvjemTyuBB0/maxresdefault.jpg”,
“uploadDate”: “2026-01-27”,
“embedUrl”: “https://www.youtube.com/embed/KvjemTyuBB0”,
“url”: “https://www.youtube.com/watch?v=KvjemTyuBB0”,
“publisher”: {
“@type”: “Person”,
“name”: “Ferdy Korpershoek”,
“url”: “https://ferdy.com”
}
}