The built-in transformation options of Divi have proven to be an extremely useful design tool, allowing you to resize, rotate, skew or position any element on a page with ease. And you can even choose to turn items into hover state for awesome hover effects. So today we are going to show you how to deploy these animations in one click.
This method requires the use of jQuery. The great thing about this technique is that you can use the built-in design parameters of Divi to style transform properties, then enable (or disable) those transform properties with a mouse click. This will open up a ton of unique possibilities for revealing contents hidden by moving items on click rather than hover. And it also helps reduce the need to know a lot of CSS.
Let's start.
What you need to get started
For this tutorial, all you need is Divi. To get started, go to your WordPress dashboard. Create a new page, give your page a title and continue designing on the Divi builder in the foreground. Select the “Build from scratch” option. Now you are ready to go!
The basic idea explained
Before I get into too much detail in this tutorial, I'll walk you through how this technique works in a few words.
Each time you customize an element (section, line or module) in Divi, you add custom CSS to this element in the background. For example, using Divi's built-in settings, you can add a transform rotation property to a blurb module so that it rotates the module along the Z axis by 20 degrees.
But behind the scenes, you create a custom CSS that is added to this text module and looks like this:
.et_pb_text_0 {transform: rotateZ (20deg); }
Simple enough. And let's say you wanted to add that same hover transform option. You just need to apply the transform property for the hover state in the settings of Divi Builder.
And the code will look something like this behind the scenes:
.et_pb_text_0: hover {transform: rotateZ (20deg); }
However, if you want to deploy the transform property on click, things will have to work a little differently. You will need to enter a javascript code to trigger a click event on the element (or text module).
With our current example, our main goal is basically to turn the transform property "transform: rotateZ (20deg)" on and off on click. An easy way to do this is to create a custom CSS class with the property "transformer: none!" Important ”in the page (or external style sheet) settings. It would look something like this.
.toggle-transform-animation {transform: none! important; }
With that CSS in place. We can add the CSS class "toggle-transform-animation" to the blurb module element which has our transform property.
This will disable (override) the transform property and prevent it from initially activating even though the transform property's style has already been added to it.
Now all you have to do is activate (add and remove) this custom CSS class when you click on the element. So, each time we click on the element, the class will be deleted and the transformation properties (the ones you added with Divi) will be deployed.
Here is a simple example of how to do this. First, add another CSS class to the blurb module named "transform_target".
Next, go to Divi > Theme Options > Integration and add the following jQuery script to the head of your blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
That's all ! Now, every time you click on the presentation module, the transform property that you added to the presentation in Divi will be activated or deactivated.
Let's now build an example so that you can see how this might be useful for your own projects.
How to switch transformation properties on Click to display content in Divi
For this example, we'll stick with a simple blurb example used above. Next, we're going to add additional blurb behind this so that whenever you click on the top blurb, it will move out of the way to reveal the contents additional blurb sitting behind the document.
Creating Blurb modules front and back
Then add a presentation module to the 1 column.
Update the contents blurb to include only a title (remove the default body content), then add a blurb icon.
Then update the design parameters as follows:
Background color: #4c5866
Icon Color: #ffffff
Orientation of text: center
Text color
: Lightweight Custom Margin: 0px at the bottom
Custom padding: 15% at the top, 15% at the bottom, 10% at the left, 10% at the right
We will come back to this module later, but for now, we need to create our second Blurb module which will serve as a "return" module with additional content.
To do this, duplicate the presentation module you just created.
Then, on the second module, remove the presentation icon (and the default image) and add body content back to the module. Then update the design parameters as follows:
Background color: rgba (76,88,102,0.3)
Text color: Black
Custom padding: 20% top
Position the module before Summary
Now that our two blurbs are styled, we need to go back to our front (top) blurb and position it above the back (bottom) blurb. To do this, we will give it an absolute position with a height of 100% and a width of 100%.
First, open the top / front presentation module settings and update the following:
height: 100%;
width: 100%;
Then add the following custom CSS code to the main element:
position: absolute! important; transition: all .5s;
Then update the z index as follows:
Z index: 2000
The absolute position, combined with 100% height and width and the z index, ensures that the blurb module stays on top of the blurb module behind it. The transition property is in fact the duration of the transition of the transform options we will deploy on the next click. And the "cursor: pointer" is to change the cursor so that the element appears clickable to the user.
Adding transformation options and custom classes to the front blurb
Now is the time to add our transform properties to the front blurb. We will then add the custom CSS classes necessary for our jQuery to toggle these properties on click.
Under the front blurb design parameters, add the following transformation properties:
X and y transformation scale: 20%
Transform origin: top center
Remember that the transformation design you see at this point will be the one triggered on click. We simply take advantage of the Divi builder to obtain the desired design. In this case, the front blurb contracts and becomes centered at the top of it like a clickable icon.
Once you're done, add the two CSS classes needed to target the front blurb with jQuery as follows:
CSS class: toggle-transform-animation transform_target
(be sure to separate each class name with a space)
Then add the following custom CSS code snippet that will be used to enable and disable transformation properties with jQuery.
.toggle-transform-animation {transform: none! important; }
You will notice that the previously added blurb transformation properties have been disabled because this class has been applied to it.
Now go to Divi> Theme options> Integration and add the following jQuery script to the head of the blog:
jQuery(document).ready(function() {
jQuery('.transform_target').click(function(){
jQuery(this).toggleClass('toggle-transform-animation');
});
});
Let's see the final result.
You can use this example to create even more impressive designs. Do not hesitate to share your opinion in the comments section.
