4,9 based on 300 reviews

Trusted by 1500+ businesses and student of all shapes and sizes

ferdyaiwhite
ferdyaiwhite

About

Tutorials

Recommended

• Tools

• Themes

• plugins

Blog

Knowledge

How To Make A Website Using Divi

Learn how to create a WordPress website using the Divi theme.

Ferdy
}

241 Minutes Of Watchtime

February 7, 2026

divi theme custom mobile menu
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;
}

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

2 Comments

  1. Ferdy

    Great tutorial! Thank you!

    Reply
    • Ferdy

      Thanks!

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *