Display 3 WooCommerce products instead of 4 with DIVI

I have changed the columns of the WooCommerce product page from 4 to 3 with this code:

@media only screen and ( min-width: 981px ){
.woocommerce-page ul.products li.product {
margin-right: 3.8% !important;
width: 30.8% !important;
}
.woocommerce-page ul.products li.product:nth-child(4n+1) {
clear: none !important;
}
.woocommerce-page ul.products li.product:nth-child(3n) {
margin-right: 0 !important;
}
}


@media only screen and (min-width: 800px)
{
.woocommerce-page ul.products li.product {
min-height: 600px;
}
}

Upgrade the style of DIVI category and archive blog pages

By default the DIVI blog category page style is basic. You can see an example in the picture below from the TweakDorks website.

By adding this in the custom css section in the theme options you can improve the style of your DIVI blog pages.

.archive img[width="1080"] {
max-width: 300px;
float: left;
margin-right: 20px;
}
.archive .et_pb_post {
border-top: 5px solid #F13361;
box-shadow: 0 0 10px #ddd;
padding: 10px;
}


Here is an example:


Changing color of Thank You message for DIVI Contact form

To do this, add a custom CSS class to that particular Module Settings / Advanced / CSS ID & Classes say custom-contact, then add the following code to Dashboard / Appearance / Customize / Additional CSS:

.my-new-contact .et-pb-contact-message {
color: #333;
}

You can play with the value to achieve the desired result.
Let me know the result.

Add the Ken Burns effect to slowly zoom out of background image

Add this CSS code to the custom CSS section of your theme.

@-moz-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-webkit-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-ms-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@-o-keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}

@keyframes kenburns {
0% {

transform: scale3d(1.3,1.3,1.3) translate3d(0,0,0);

-webkit-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
100% {

transform: scale3d(1,1,1) translate3d(0,0,0);

-webkit-opacity: 1;
-webkit-opacity: 1;
opacity: 1;
}
}