6 Microinteractions That Will Make Your Divi Site More Enjoyable (& How to Achieve Them)

Microinteractions are a great way to enhance user experience as they interact with your site. Slight animations of icons, images, or form fields can cue the user to take action in a fun and purposeful way. There are countless microinteractions you can include on your site, but a good rule of thumb is to keep them “micro”. You don’t want to overdue it.

Today I’m going to show you some simple microinteractions that work seamlessly with Divi. Some of the more advanced microinteractions require more advanced jquery to implement. But, for this tutorial, I’m going to show you how to add some animations using only CSS. I’ll be concentrating on those elements that users normally interact with – buttons, icons, images, and forms.

Let’s get started.

6 Microinteractions That Will Make Your Divi Site More Enjoyable (& How to Achieve Them)

Subscribe To Our Youtube Channel

Implementing the Design In Divi

#1 Animating Blurb Icons on Hover

Divi comes with a library of icons that can be added to your site easily with the Blurb Module. This is useful for adding an illustration to those important bits of information like features or skills. If you want to draw attention to your information, you can animate the icon above your content.

I’m going to show you two ways to trigger the animation of the icon. In this first example, the icon animation is triggered when hovering over the actual icon. The types of animation I’m using are rotate, shake, and scale.

First add your blurb modules. Using the Divi Builder, add a standard section with a three-column layout, and insert a blurb module in the first column.

In the Blurb Module Settings, update the following settings:

Enter Title
Enter URL (i’m using # for now)
Use Icon: YES
Select an Icon
Icon Color: #0c71c3
Image/Icon Animation: No Animation
Content: [add your content]

Under Custom CSS, add a CSS Class called “rotate”. This will be used to trigger the a rotate animation.

Save & Exit

Before we add our custom CSS, set up the next two blurbs by duplicating the one you made previously twice and dragging them over to the two empty columns.

Click the hamburger icon on the second (middle) blurb to edit the settings. Under the Blurb Module Settings go to the Custom CSS section and replace the CSS Class “rotate” with the new class “shake”.

Save & Exit

Repeate the same process for the third blurb on the right column and replace the CSS class “rotate” with a new class called “scale”.

Now that your blurbs are in place. Go to Divi → Theme Options and add the following in the Custom CSS box:

.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
  -webkit-transition: all .2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
}
.rotate .et-pb-icon:hover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -o-transform: rotate(360deg);
  transform: rotate(360deg);
}

.shake .et-pb-icon:hover {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

.scale .et-pb-icon:hover {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

Check out your page and hover over the icons to see the effect in action.

The second way to trigger the icon animation is by hovering over the blurb module area.

To do that, replace the CSS you just added with the following:

.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.5s ease-out;
}
.rotate:hover .et-pb-icon {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}

.scale:hover .et-pb-icon {
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}

.shake:hover .et-pb-icon {
  animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

This effect is really useful when featuring content without a button. Having the icon move on hover is a useful microinteraction that engages the user to click the icon.

#2 Adding Pulse Animation to The CTA Button

Adding a pulse animation on your CTA button can be a effective attention grabber. The trick is to make it subtle enough so that it grabs the user’s attention without becoming a distraction.

First, add a standard section with a fullwidth column. Then add a Call to Action Module. In the Call to Action Module Settings, under General Settings, change the following:

Enter Title
Enter Button URL (I’m using “#” for now)
Enter Button Text (I’m using “Click Me!”)
Use Background Color: YES
Background Color: #dddddd

Under Advanced Settings, change the following:

Use Custom Styles for Button: YES
Button Text Color: #ffffff
Button Background Color: #2ea3f2
Add Button Icon: NO

Under Custom CSS add the CSS Class “pulse”.

Now go to Divi → Theme Options and enter the following Custom CSS for your pulse effect:

.pulse .et_pb_button {
animation-name: pulse;
animation-duration: 5000ms;
transform-origin:70% 70%;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes pulse {
0% { transform: scale(1); }
30% { transform: scale(1); }
40% { transform: scale(1.08); }
50% { transform: scale(1); }
60% { transform: scale(1); }
70% { transform: scale(1.05); }
80% { transform: scale(1); }
100% { transform: scale(1); }
}

.pulse .et_pb_button:hover {
animation: none;
}

Now your CTA button will pulse twice every 5 seconds.

#3 Adding Lift Effect on CTA Button

This next effect lifts the CTA button instead of making it pulse. On hover, it raises the button slightly with a shadow underneath to create the perception of elevation.

Now that we already have a CTA section created, make a duplicate of that entire section you just created for the pulse CTA.

Click to edit the Section Module Settings of your new duplicated section and change the background color to #ffffff.

Save & Exit

Now edit the Call to Action Module Settings. Under Advanced Design Settings, change the following:

Add Button Icon: YES
Choose Button Icon (an arrow point down works well for this example)
Button Icon Color: #ffffff
Only Show Icon On Hover for Button: NO

Under Custom CSS add a CSS Class called “lift” under the Custom CSS tab.

Go to Divi → Theme Options and add the following Custom CSS:

.lift .et_pb_button:hover{
box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);
margin-top: -5px;
margin-bottom: 5px !important;
}

Check out the results.

#4 Rotating the Button Icon on Hover

To make the button icon rotate on hover, go back to the Call To Action Module Setting and add the CSS Class “rotate-icon” (one space after the class “lift”) under Custom CSS.

Then go to Divi → Theme Options and add the following Custom CSS:

.rotate-icon .et_pb_button:hover:after {
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}

Go check out your button. Notice the button icon rotates 90 degrees counter-clockwise creating a microinteraction for the user that literally gives direction.

#5 Adding Microinteractions with Images

Adding Microinteractions with images is like icing on the cake. Images are already engaging, and adding another dimension of interaction gives them that extra clickable quality you may need.

Let’s get started. Add a standard section with a three-column layout and insert an image module in the first column.

Click to edit the Image Module Settings. Under General Settings, upload an image and switch the option “Open in Lightbox” to YES.

Under Custom CSS, add the CSS Class “tilt”.

Save & Exit

Duplicate your image module twice and drag them to the other two columns in your row.

Now add the Custom CSS in Divi → Theme Options:

.tilt.et_pb_image {
    -webkit-transition: all .2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;
border: 1px solid #fff;
}

.tilt.et_pb_image:hover {
-moz-transform: rotate(5deg) scale(1.1);
-webkit-transform: rotate(5deg) scale(1.1);
-o-transform: rotate(5deg) scale(1.1);
transform: rotate(5deg) scale(1.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 1px solid #fff;
}

Now go check out your row of images on your page.

On hover, the images increase their size by 10%, rotate 5 degrees, and pop off of the page with the use of a shadow.

Now let’s add an opposite effect. This time, the images will start off tilted and shadowed. Then on hover, the images will return to the normal state.

Duplicate the row of images you just made.

Now go through each of the three new photos on the row and change the Custom CSS class from “tilt” to the new class “straight”.

Then add the Custom CSS in Divi → Theme Options:

.straight.et_pb_image {
-webkit-transition: all .2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-moz-transform: rotate(-5deg) scale(0.8);
-webkit-transform: rotate(-5deg) scale(0.8);
-o-transform: rotate(-5deg) scale(0.8);
transform: rotate(-5deg) scale(0.8);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);
border: 1px solid #fff;
}

.straight.et_pb_image:hover {
-moz-transform: rotate(0deg) scale(1);
-webkit-transform: rotate(0deg) scale(1);
-o-transform: rotate(0deg) scale(1);
transform: rotate(0deg) scale(1);
border: 1px solid #fff;
box-shadow: none;
}

<

#6 Animating Contact Form Fields

This last microinteraction adds some animation to the input fields on Divi’s Contact Form. The purpose of this microinteraction is to aid the user in the process of filling out important information. The hover and focus effect on the input fields helps with identification and assurance through the process. And, it is easy to implement.

First, add a contact form module to a standard section with a fullwidth column layout. Edit the Row Module Settings. Under General Settings, set “Use Custom Width” to YES, and set the Custom Width to 600px.

Save & Exit

Next edit the Contact Form Settings.

Under General Settings, change “Display Captcha” to NO. (optional)

Under Custom CSS, add a CSS Class called “border-left”.

Go to Divi → Theme Options and enter the following Custom CSS:

.border-left .et_pb_contact p input, .border-left .et_pb_contact p textarea {
height: 60px;
border-left: 4px solid #ddd;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;

}
.border-left .et_pb_contact p input:hover,.border-left .et_pb_contact p textarea:hover, .border-left .et_pb_contact p input:focus, .border-left .et_pb_contact p textarea:focus {
border-left: 8px solid #2ea3f2;
font-size: 16px;
}

That’s it. You now have a simple yet interactive contact form that adds a colored tab effect in combination with a slight increase of the input field font size both on hover and on focus.

Final Thoughts

I hope you find these microinteractions useful. They are simple to use with Divi (using only CSS) throughout your site. Feel free to adjust the CSS for these examples to fit your needs or come up with something completely new.

Enjoy!

As always, feel free to post your ideas, comments, and/or questions below.