WMF Academy CSS Tricks
Making Custom Parallax Row In Visual Composer
Add a new class to the row: bg-parallax, and in the custom CSS of Visual Composer enter this code:
.bg-parallax{
background-image: url(https://webmaxformance.com/academy/wp-content/background.jpg)!important;
background-repeat: no-repeat;
background-attachment: fixed;
}Divi Featured Image In Blog Posts Aligning Left
With this CSS code you can align your featured images of your blog posts on the left with the excerpt text on the right. You can put this code in the Divi -> Theme Options -> Custom CSS:
.et_pb_post > a img {
float: left;
margin-right: 4%;
width: 50% ;
}
#page-container .et_pb_post {
clear: both !important;
float: none !important;
margin-bottom: 10% !important;
margin-bottom: 50px !important;
}
Outcome:
Completely removing the header from your landing page in Divi
Add this CSS code in the custom CSS of your landing page:
#main-header { display:none; }
#page-container {
padding-top:0px !important;
margin-top:-1px !important
}
Also, if you want to completely remove the footer too, you can use this CSS code:
#main-footer{
display:none!important;
}
Making an element of your page RESPONSIVE
This code will reduce the font-size of the h2 tag to 18px when the browser is SMALLER than 770px.
@media screen and (max-width: 767px) {
h2 {
font-size:18px;
}
}
Making a nice hover effect
This code will create a nice hover effect for your columns.
.main-column{
box-shadow: 0 0 4px #333;
width: 100%;
transition: background-color 0.7s ease;
}
.main-column:hover{
background-color:#014FA2;
color:#fff;
}
Result:
WMF Academy JavaScript Tricks
Make Content Delay for a specific Row (with custom ID) in Visual Composer
First, you can install a plugin for custom script for your specific page. Next, assign the id: delaycontent to your Row or Div
In the field for custom JavaScript of your page, put the following code…
This JavaScript code will delay the specific content of your page (with the id: delaycontent) for 60 seconds (60000 milliseconds)
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>
<script>
$(document).ready(function() {
$(‘#delaycontent’).hide();
$(‘#delaycontent’).delay(173000).fadeIn(500);
});
</script>
