Skip to Main Content

How to create animated sections by clicking on Divi Builder

Divi: the easiest WordPress theme to use

Divi: The best WordPress theme of all time!

With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]

Divi's built-in transformation options have proven to be an extremely useful design tool, allowing you to resize, rotate, tilt or position any element of a page with ease. And you can even choose to turn elements into a rollover state to achieve stunning flyover effects. So today we are showing you how to deploy these animations in one click.

This method requires the use of jQuery. The main advantage of this technique is that you can use Divi's built-in design parameters to assign a style to transformation properties, and then enable (or disable) these transformation properties with a mouse click. This will open up a ton of unique possibilities for revealing hidden content by moving items on a click rather than on the flyover. And it also helps to 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 a title to your page and continue the design on the Divi generator in the foreground. Select the "Build From Zero" option. Now you are ready to go!

The basic idea explained

Before going into too much detail of this tutorial, I will explain the principle of how this technique works in a few words.

Whenever you customize an element (section, line, or module) in Divi, you add custom CSS to that element in the background. For example, using the built-in Divi parameters, you can add a transform rotation property to a blurb module so that it rotates the module along the Z axis of 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 want to add this same overflight transformation option. You only need to apply the transformation property for the rollover state in the Divi Builder settings.

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 transformation property to 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 the text module).

With our current example, our main goal is essentially to enable and disable the transformation property "transform: rotateZ (20deg)" to click. A simple way to do this is to create a custom CSS class with the transform property: none! Important "in the page settings (or external style sheet). It would look like something like this.

.toggle-transform-animation {transform: none! important; }

With this CSS in place. We can add the CSS class "toggle-transform-animation" to the blurb module element that has our transformation property.

This will disable (replace) the transformation property and prevent it from initially enabling even if the transformation property style has already been added to it.

Now you only have to activate (add and remove) this custom CSS class when you click on the item. Thus, each time we click on the item, the class will be deleted and the transform properties (the ones you added with Divi) will be deployed.

Here is a simple example of how to proceed. First, add another CSS class to the blurb module named "transform_target".

Are you looking for the best WordPress themes and plugins?

Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]

Divi Transform Properties on Click

Then go to Divi> Theme Options> Integration and add the following jQuery script to the top of your blog:

<script> jQuery (document) .ready (function () {jQuery ('. transform_target'). click (function () {jQuery (this) .toggleClass ('toggle-transform-animation');});}); </ Script>

That's all ! Now, each time you click on the presentation module, the transformation property you added to the presentation in Divi will be enabled or disabled.

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 will stick to an example of simple introductory text used above. Then, we will add an extra introductory text behind this one so that each time you click on the upper presentation text, it will step aside to reveal the additional content of the presentation text sitting behind the document.

Creating Blurb modules front and back

Then add a presentation module to the 1 column.

Update the content of the layout text to include only a title (remove the default body content), and add a presentation 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, delete the presentation icon (and the default image) and add body content 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 presentation texts are stylish, we must go back to our front presentation module (top) and position it above the rear presentation module (bottom). 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:

Easily create your website with Elementor

Elementor allows you to easily create any website design with a professional look. Stop paying expensive for what you can do yourself. [Free]

height: 100%;
width: 100%;

Divi Transform Properties on Click

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 index z, ensures that the blurb module stays above the blurb behind it. The transition property is actually the duration of the transition of the transformation options that we will deploy on the next click. And the "cursor: pointer" is to change the cursor so that the item seems clickable for the user.

Adding transformation options and custom classes to the front blurb

Now is the time to add our transformation properties to the presentation text before. We will then add the custom CSS classes needed by our jQuery to switch these properties to click.

Under the front blurb design parameters, add the following transformation properties:

X and y transformation scale: 20%

Transform the origin: top center

Remember that the design of the transformation that you see at this point will be the one triggered by clicking. We simply take advantage of the manufacturer Divi to get the desired design. In this case, the presentation text before contracts and becomes centered at the top of it as 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)

Divi Transform Properties on Click

Easily create your Online Store

Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]

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.

Go now to Divi> Theme Options> Integration and add the following jQuery script to the blog header:

<script> jQuery (document) .ready (function () {jQuery ('. transform_target'). click (function () {jQuery (this) .toggleClass ('toggle-transform-animation');});}); </ Script>

Let's see the final result.

You can use this example to create even more impressive designs. Feel free to share your opinion in the comments section.

This article features 0 comments

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Back To Top
2 shares
Share2
tweet
Save