Footer Layout with Call to Action

In this video, I will walk you through creating a global footer template in the Theme Builder with vertical menu modules, social icons and a call to action section.

Video Chapters

style.css

/*
______________________
   
   Footer
______________________

*/


#maya-footer .et-menu {
	display: block;
}

#maya-footer .et_pb_menu {
	display: inline-block;
	min-width: 200px;
}
  
  
#maya-footer .et_pb_menu .et-menu > li a {
	position:relative;
	transition:all .3s ease-in-out;
	margin-bottom:10px;
}

#maya-footer .et_pb_menu .et-menu > li > a:before {
	content:'';
	display:block;
	position:absolute;
	bottom:10px;
	left:-60px;
	right:auto;
	height:10px;
	width:40px;
	background:url(img/zigzag.svg) repeat-x;
	animation: zigzagPlay 3s infinite linear;
	opacity:0;
	transition:all .3s ease-in-out;
} 

#maya-footer .et_pb_menu .et-menu > li > a:hover:before {
	opacity: 0.5;
	left: -40px;
}  
  
#maya-footer .et_pb_menu .et-menu > li > a:hover {
	padding-left:10px;
}
  
/* Footer CTA Button */
a.zigzag-footer-link {
	position:relative;
}

#page-container #et-boc #maya-footer a.zigzag-footer-link:before {
	content: '';
	display: block!important;
	opacity: 1;
	position: absolute;
	bottom: -40px;
	left: auto;
	width: 120%;
	right: -35%;
	height: 30px;
	background: url(img/zig-big.svg) repeat-x;
	animation: zigzagPlay 1s infinite linear;
	transition: all .3s ease-in-out;
	animation-play-state: paused;
}

#page-container #et-boc #maya-footer a.zigzag-footer-link:hover:before {
	animation-play-state:running;
}
  
  
/* Footer Mobile Menu */
@media (max-width:980px) {
	
	#maya-footer .et_mobile_nav_menu {
		display: none;
	}
	
	#maya-footer .et_pb_menu__menu,
	#maya-footer .et_pb_menu__wrap {
		display: block;
	}
	
}

@media(max-width:320px) {
	#maya-footer .et_pb_text {
		padding:0!important;
		background:none;
	}
	#maya-footer .et_pb_button {
		transform:scale(0.75);
		margin-bottom:50px;
	}
}