Portfolio and Testimonials

Divi Theme includes a special post type we can use to display any additional type of content – projects post type. Building a portfolio includes creating a main Portfolio page and also a layout for a single portfolio item – for a single project.

Please note that the main Maya Webdesign demo page shows the final version of the website. The exact layout created during this lesson can be viewed here.

Video Chapters

scripts.js

$('.maya-testimonial').each(function(){
		
	image = $(this).find('.et_pb_testimonial_portrait');
	author = $(this).find('.et_pb_testimonial_author');
		
	$(image).insertBefore(author);
		
});

style.css

/*
______________________
   
   Portfolio
______________________

*/


/* Testimonial Module */
.maya-testimonial .et_pb_testimonial_description {
    margin-left: 0!important;
}

.maya-testimonial .et_pb_testimonial_author {
    margin-top: 10px;
}


@media (max-width: 767px) {
    .et_pb_column .maya-testimonial .et_pb_testimonial_portrait {
        margin: 0 15px 0 0;
        float: left;
    }

    .maya-testimonial .et_pb_testimonial_author {
        margin-top: 10px;
    }

}
.maya-testimonial .et_pb_testimonial_content {
    font-style:italic;
}


/* Person Module */

.maya-person .et_pb_team_member_image {
    max-width: 150px;
    margin: 0 auto 25px;
}
   
   
@media (min-width: 768px) and (max-width: 980px) {   
	.et_pb_column .maya-person .et_pb_team_member_image {
		float:none;
	}   
	
	.et_pb_column .maya-person .et_pb_team_member_description {
		display:block;
	}
}

/* Portfolio Module */
.maya-portfolio .et_pb_ajax_pagination_container, .et-fb .maya-portfolio>div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 70px;
}

.maya-portfolio .et_pb_portfolio_item > a:after {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: '';
    background: var(--gray3);
    opacity: 0.6;
    transition: all .3s ease-in-out;
}

.maya-portfolio .et_pb_portfolio_item > a img {
	transition: all .3s ease-in-out;
	filter:grayscale(1);
}  

.maya-portfolio .et_pb_module_header {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all .3s ease-in-out;
    opacity:0;
    margin-top:25px;
}

.maya-portfolio .et_pb_module_header a {
    display: inline-block;
    background: var(--gray3);
    padding: .75em 1.25em;
    border-radius: 50px;
}

.maya-portfolio .et_pb_portfolio_item:hover > a:after {
	opacity:0;
} 

.maya-portfolio .et_pb_portfolio_item:hover .et_pb_module_header {
	opacity:1;
	margin-top:0;
}
.maya-portfolio .et_pb_portfolio_item:hover > a img {
	filter:none;
}

@media (max-width: 980px) {
	.maya-portfolio .et_pb_ajax_pagination_container {
	    grid-gap: 50px;
	}
}

@media (max-width: 767px) {
	.maya-portfolio .et_pb_ajax_pagination_container {
    	grid-template-columns: 1fr;
	}
}