About Page

In this video, we are going to create a Divi layout for the About page and see how to display a hidden section on the button click using jQuery. The About Page shouldn’t be overlooked and you should think of it as a goal-oriented sales page.

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-story').hide();
	
$('.maya-story-trigger').click(function(e){
		
	e.preventDefault();
	$('.maya-story').slideDown();
		
	$('body,html').animate({
			
		scrollTop: $('.maya-story').offset().top - 100
		
	}, 1000);
		
});

style.css

/*
______________________
   
   About Page
______________________

*/

@media (min-width:981px) and (max-width: 1100px) {

	.maya-about-hero .et_pb_image {
		transform: scale(1.35) translateX(-10%);
	}
}

.maya-about-hero .et_pb_row {
	display:flex;
}
.maya-about-hero .et_pb_column:first-child {
	align-self:flex-end;
}

@media (max-width: 980px) {
	
	.maya-about-hero .et_pb_column:first-child {
		margin-bottom:0;
	}
	.maya-about-hero .et_pb_row {
		flex-direction:row-reverse;
	}
	.maya-about-hero .et_pb_column {
		width:50%;
	}

}

@media (max-width: 600px) {

	.maya-about-hero .et_pb_row {
		flex-direction:column-reverse;
	}
	.maya-about-hero .et_pb_column {
		width:100%;
	}
	.maya-about-hero .et_pb_image_wrap {
		max-height: 400px;
		overflow: hidden;
		text-align: center;
	}
	.maya-about-hero .et_pb_image_wrap img {
		max-width:70%;
	}
}