Hey! I want to start the DSL (Divi small layout) project. The objective of these posts is to demonstrate how small code snippets can help to achieve great looking designs in Divi theme.

If you like this kind of posts, please let me know in the comments section or just send me an email.

Divi small layouts #1

Preview

Download

Inside the demo:

Hover over the links to see the subtle effect animation.

The dashed border becomes solid and the position goes up a little bit.

It is a quick and easy tutorial. It won’t take more than 5 minutes to apply this to your design.

I just used this kind of animation on a client website and it was approved.

Let’s start!

Inside the page you want to add this feature, create a code module and write the following code:

<a href="#"><p class="text-animation">Menu Item 1</p></a>

Do you see that the <p> is inside the <a> tag?

This is to apply all the <p> padding clickable. Nice trick, hun?

Ok, now we need to style the class “text-animation” to make it work.

Add the following code inside Divi > Theme Options > Custom CSS:

.text-animation {
  position: relative; /* must have to add different position on hover */
  bottom: 0; /* initial place */
  border-top: 1px dashed #fff; /* dashed borders */
  border-bottom: 1px dashed #fff;
  text-transform: uppercase; /* make the text uppercase */
  padding: 15px !important; /* our clickable padding */
  font-size: 20px; /* I know you know what it is about */
  color: #fff; /* p color */
  transition: .3s all; /* transition initial - hover */
}

.text-animation:hover {
  position: relative;
  bottom: 5px; /* hover place */
  border-top: 1px solid #fff; /* solid borders */
  border-bottom: 1px solid #fff;
  transition: .3s all; /* transition hover - initial */
}

Play with all these properties so you master it in no time and start creating your own hover animations.

I would be immensely happy to see your designs and ideas based on this hover animation layout. Share your project link in the comments.

Conclusion

What do you think about the Divi small layouts project? I hope to help you somehow with new code snippets, code tricks and design ideas.

You can use these kind of animations on images borders, blurb icons and more.

Do you have any ideas about this?

Send me a message.

See ya!