Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

I recently had a client project that required me to modify the Person Module so that the Content and Social Media icons are hidden until the user clicked on the Person Image or Person Name. Then the user could also hide the content by clicking on the image or name a second time.

After much contemplation, I realized that the easiest solution was to use a little jQuery along with my custom CSS. And the result turned out pretty fantastic.

In this tutorial, I am going to share with you how you can slide-in / slide-out content using standard Divi modules, some custom CSS, and a little jQuery. Let’s unlock the power of Divi Modules, Custom Classes, CSS & jQuery combined.

View The Live Demo

 

Let’s Get Started

 

Creating the Modules

The first thing we are going to do is create the modules and assign some custom classes to them.

1. In the section you want to add the modules, create a new 4-column row and change the gutter width to 2

 

2. In the first column you will  Insert an Image Module and then upload your person Image. I recommend a minimum size of 500×550 for best results on tablets when the columns switch from 4 to 2.

 

3. Before you save the module, open up the Custom CSS Tab and add two custom CSS classes: gq_team_image gq_img1 *keep a space between the two classes

 

4. Once you save that Module, you can add a new Text Module underneath. This Text Module will include the Name and Title. Assign the name an “H1” tag and keep the title as it is. Don’t woirry about the style for now, we will style this module using CSS a little later.

 

5. Before you save the module, open up the Custom CSS Tab and add two custom CSS classes: gq_team_name gq_name1 *keep a space between the two classes

 

6. Now below that you can insert a Person Module. In this module you will only add Social Media urls and the text in the description field. Do not add name, title or an image to this module.

 

7. Before you save the module, open up the Custom CSS Tab and add THREE custom CSS classes: gq_team_info gq_hide_info gq_info1  *keep a space between the three classes

 

8. Now you will repeat the process for the next 3 columns. The fastest way to do this is to use the Duplicate feature for each module and then drag the duplicates over to the new column.

 

9. You will notice on the classes above, each one ends with the number one. Each column should have it’s own unique #. For example the custom css in the modules in the second column should look like this:

  • Image Module: gq_team_image gq_img2
  • Text Module: gq_team_name gq_name2
  • Person Module: gq_team_info gq_hide_info gq_info2

Be sure to update all the modules in the 2nd, 3rd, and 4th columns

 

Adding The Custom CSS

To do this you will need a basic child theme as we will be adding code to the functions.php file located in the child theme.

 

10. This first set of CSS is going to set the basic style to the various modules. These rules include z-index adjustments, custom padding, borders colors and transitions for the slide-in and slide-out.

 

/*------------------------------------------------*/
/*-----------[GQ SLIDE-IN + SLIDE-OUT]------------*/
/*------------------------------------------------*/


/* general styles */

	.gq_team_image {
		z-index: 1;
   		position: relative;
		background: #fff;
   		cursor: pointer;
		padding-bottom: 10px;
   		margin-bottom: 0px!important;}
	.gq_team_name {
		z-index: 1;
   		position: relative;
		background: #fff;		
   		border: 1px solid #e0e0e0;
   		padding: 15px 10px;
		cursor: pointer;
		margin-bottom: 0px!important;
		-webkit-transition: all 0.3s ease-in-out;
   		-moz-transition: all 0.3s ease-in-out;
   		transition: all 0.3s ease-in-out;}
	.gq_team_name h3 {
   		font-size: 18px;
   		line-height: 25px;
   		font-weight: 500;
   		text-transform: uppercase;
   		padding-bottom: 0px;
		-webkit-transition: all 0.3s ease-in-out;
   		-moz-transition: all 0.3s ease-in-out;
   		transition: all 0.3s ease-in-out;}
	.gq_team_name p {
   		font-weight: 700;
   		color: #b4b4b4;
		-webkit-transition: all 0.3s ease-in-out;
   		-moz-transition: all 0.3s ease-in-out;
   		transition: all 0.3s ease-in-out;}
	.gq_team_info {
   		border: 1px solid #e0e0e0;
	   	border-top: 0px;
    	padding: 15px 10px;
		margin-bottom: 0px!important;}

 

At this point your page should look something like this.

 

11. This next set of CSS will set the transition effects that our jQuery is going to assign and unassign. I call them the hide + unhide states.

 


/* hide + unhide states */

	.gq_hide_info {
   		margin-top: -100%;
   		z-index: 0;
   		position: relative;
   		opacity: 0;
		max-height: 200px;
		-webkit-transition: all 0.8s ease-in-out;
   		-moz-transition: all 0.8s ease-in-out;
   		transition: all 0.8s ease-in-out;}
	.gq_hide_close {
   		opacity: 0;
		max-height: 0px;
		-webkit-transition: all 0.8s ease-in-out;
   		-moz-transition: all 0.8s ease-in-out;
   		transition: all 0.8s ease-in-out;}
	.gq_unhide_info {
   		margin-top: 0%;
   		z-index: 0;
   		position: relative;
		opacity: 1;
		max-height: 1000px;}
	.gq_unhide_close {
   		opacity: 1;
		max-height: 1000px;}

	@media only screen and (max-width : 980px) {
		.gq_hide_info {
			margin-top: -10%;
			max-height: 0px;}
		.gq_unhide_info {
    		margin-top: 0%;
			max-height: 1000px;}}

 

12. This piece is not necessary but adds a nice touch. By adding this set of rules, we will add hover effects to the contents within the Name Box. So if the user hovers over the image, the Name box will change to blue and the text will change to white. Same thing happens when they hover over the name box. Clicking on the image or the Name box will trigger the slide-in and slide-out so this is a good way to let the user know that something will happen if they click on these areas.


/* hover states */

	.gq_team_image:hover + .gq_team_name, .gq_team_name:hover {
    	background: #3994cb;
    	border: 1px solid #3994cb;}

	.gq_team_image:hover + .gq_team_name h1,
	.gq_team_image:hover + .gq_team_name p, 
	.gq_team_name:hover > h1, 
	.gq_team_name:hover  > p {
   		color: #fff!important;}

	.gq_hover_name {
    	background: #3994cb;
    	border: 1px solid #3994cb;}
	.gq_hover_name h1, .gq_hover_name p {
   		color: #fff!important;}

 

At this point your page should look something like this.

 

 

Add an Image Overlay

13. On this next bit off CSS we are going to apply an overlay to the image. So that when you user mouses over it, a FontAwesome icon will appear. It will be the “plus” icon letting the user know there is more. And the the slide-inb is triggered with the jQuery, that symbol will change to an “x” icon. And when clicked on again it will trigger the content to slide-out To do this you will first need to grab a line of code from Font Awesome. So go to this page and give them your email so they can send you the code you need. http://fontawesome.io/get-started/

 

14 Once you get your email, copy the script, go to Divi Theme Options > Integration and paste the script where it says Add code to the < head > of your blog

 

15. No go back to your stylesheet and add the following code to the rest of your custom CSS

 


/* image overlay */

	.gq_team_image:before {
   		position: absolute;
   		color: #fff;
   		font-family: "FontAwesome";
   		content: "\f067";
   		font-size: 22px;
   		background: #3994cb;
   		padding: 27px 19px;
   		border-radius: 50px;
   		opacity: 0;
    	margin-top: 45%;
		left: 50%;
   		margin-right: -50%;
   		transform: translate(-50%);
		-webkit-transition: all 0.3s ease-in-out;
   		-moz-transition: all 0.3s ease-in-out;
   		transition: all 0.3s ease-in-out;}

	.gq_team_image:hover:before {
   		opacity: .8;}

	.gq_close_icon:before {
		position: absolute;
   		color: #fff;
   		font-family: "FontAwesome";
   		content: "\f00d";
   		font-size: 22px;
   		background: #3994cb;
   		padding: 27px 19px;
   		border-radius: 50px;
   		opacity: 0.8;
    	margin-top: 45%;
		left: 50%;
   		margin-right: -50%;
   		transform: translate(-50%);}

 

Now your page should look something like this.

 

Adding the jQuery

To do this you will need a basic child theme.

The first thing we will have to do is enqueue the jQuery library kit. This took me a few trial and errors because the most recent library is not compatible with Divi. Fortunately after going back to several releases I found the one that is. We will be working in the functions.php file of your child theme so please make a backup before you do this. If your site breaks after editing the functions.php, you just have to move the backup up copy of the functions.php file back in there using your ftp manager or cpanel file manager.

16. In the functions.php file located within the child theme you will add the following code after <?php

 

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_deregister_script('jquery');
wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js", false, null);
wp_enqueue_script('jquery');
}

 

Your page should look like this unless you already had other code in there.

 

17. Now you will go to Divi Theme Options > Integration and paste the following jQuery into the field that says Add code to the < body > (good for tracking codes such as google analytics)

 

<script>
// toggle staff content on click by geno quiroz
$(document).ready(function(){
	$('.gq_img1, .gq_name1').click( function() {
		$(".gq_info1").toggleClass("gq_unhide_info");
		$(".gq_name1").toggleClass("gq_hover_name");
		$(".gq_img1").toggleClass("gq_close_icon");
	});
	$('.gq_img2, .gq_name2').click( function() {
		$(".gq_info2").toggleClass("gq_unhide_info");
		$(".gq_name2").toggleClass("gq_hover_name");
		$(".gq_img2").toggleClass("gq_close_icon");
	});
	$('.gq_img3, .gq_name3').click( function() {
		$(".gq_info3").toggleClass("gq_unhide_info");
		$(".gq_name3").toggleClass("gq_hover_name");
		$(".gq_img3").toggleClass("gq_close_icon");
	});
	$('.gq_img4, .gq_name4').click( function() {
		$(".gq_info4").toggleClass("gq_unhide_info");
		$(".gq_name4").toggleClass("gq_hover_name");
		$(".gq_img4").toggleClass("gq_close_icon");
	});
});
</script>

 

This is for those interested in learning a little about what the jQuery is doing. We have 4 basic functions, one for each column.

Each of the 4 main functions is saying that when a user clicks on the image or the name box in that column, then do the following things.

  • For the info module, apply the unhide class
  • For the name module, apply the hover effect class
  • For the image module, apply the hover effect with the “x” icon instead of the “+” icon

 

And by using .toggleClass, we are saying when the user clicks again, reapply the original classes.

This is just one example of how we can unlock the power of Divi’s custom classes, CSS and the power of Javascript.

That’s it. Now your page should be working something like this.

 

Once you start playing around with this type of stuff you will find you can do all sorts of amazing stuff in Divi, Custom Classes, Custom CSS and jQuery.

Have fun!


Well, that’s all for now. I hope you find this article useful.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest