Hello, my friend! Welcome back to Divi small layouts #3. Today you’ll create a card based design that is inspired by Google Material Design – the new design trend for websites. I was thinking of a new design to my WordPress website creation agency and after some time thinking and browsing the internet to get some inspirations I came up with a small card type layout with a subtle hover effect.

Divi small layouts #3

Preview

Download

You can use this idea the way you want. Be creative! I used it to show my website users what are the 3 main services that my agency offers.

Basically, this layout is created with a 3 columns layout, 1 icon, title/texts and a call to action button.

It has a small box-shadow setting to match Google Material design style and a subtle border-top animation when hovering the column.

How to achieve this Divi layout

Everything in this layout is really simple to do.

Usually, I like to set the title with small font size and in uppercase.

Buttons have some nice hover effect. I don’t like to add icons to buttons, but feel free to do it, it’s a nice feature.

I set the rows to have 30px of padding – to give some space for the text to fit and look fine.

The 2 main things from this layout is all about the hover effect. Going up when hovering and animating the border. I’ll show now how simple it is to make it.

Going up!

Add this code inside Divi > Theme Options > Custom CSS.

.up {
  position: relative;
  bottom: 0px;
  padding: 30px;
  border-top: 3px solid transparent;
  transition: .3s all;
}

.up:hover {
  position: relative;
  bottom: 5px;
  border-top: 3px solid #039be5; /* Change border-top color */
  transition: .3s all;
}

Don’t forget to add the up class and box-shadow class inside Row Module Settings > Custom CSS > Column CSS Class.

Box shadow

The last code snippet to achieve this layout design is about the box-shadow property in CSS.

I like to follow the Propeller team that have created a responsive framework based on Google’s Material Design Standards & Bootstrap.

This box-shadow idea was picked from their features page. This whole project is under MIT license and it’s really worth to check it out.

Add this code inside Divi > Theme Options > Custom CSS.

/* Credits: http://propeller.in/ */
.box-shadow {
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
  transition: .3s all;
}

I recommend using the Custom CSS and JS plugin to handle all the CSS code on your WordPress website.

Conclusion

What did you think about this Divi theme small layout idea? Hope you learned a new concept today with this layout tutorial.

Feel free to download, copy and paste all the code in this post. Send me the link later so I can follow your projects and design creations too.

Send me a message or comment here if you are liking this series. I’m looking forward to creating new posts like this one.

See ya!