Module 7 - Lesson 6

Contact Page

In this video, we are focusing on the contact page, making sure it is “distraction-free” and invites potential visitors to get in touch.

Video Chapters

00:00 Introduction

00:33 Creating a Theme Builder Template

02:41 Editing the Footer

04:02 Building the First Section

08:39 Contact Methods Section

09:53 Contact Form

15:38 Social Follow

18:12 Customizing Error Message

20:40 Adjusting Mobile Version

style.css

/*
______________________
   
   Contact Page
______________________

*/


.maya-contact-hero {
	display:flex;
	align-items: center;
}

.maya-contact .et_pb_button {
	line-height:1!important;
	align-self:center;
}

.maya-contact .et_pb_contact p .et_contact_error {
	border: 3px solid #fb8080!important;
}


@media (max-width:1160px) {
	.maya-contact-hero {
		align-items: flex-start;
	}
	.maya-contact-hero .et_pb_column:nth-child(1) {
		width: 30%;
		margin-right: 15%;
	}
	
}

@media (max-width:980px) {
	.maya-contact-hero .et_pb_column:nth-child(1) {
		width: 45%;
		margin-right: 5%;
	}
	.maya-contact-hero .maya-zigzag-before svg {
		transform: translateY(70px);
	}
}

@media (max-width:600px) {
	.maya-contact-hero .maya-zigzag-before svg {
		transform: translateY(40px);
	}
}

@media (max-width:479px) {
	
	.maya-contact-hero {
		display:block;
	}
	
	.maya-contact-hero .et_pb_column:first-child {
		max-width: 50%;
		transform: translateX(-5px);
	}
	.maya-contact-hero .maya-zigzag-before svg {
		transform: translate(60px,-120px);
	}

}


/* Page Container overflow */
#page-container {
	overflow-x: hidden;
	overflow-y: auto;
}

Join the discussion

Share your thoughts about this lesson with fellow students!

Login to your Account

If you're a DSA Student, please log in to your account to access the course content.

Sorry, you don't have access to this content.

It looks like you're not enrolled in Divi Stylist Academy.