Divi small layouts #4 comes now with a video tutorial! Follow all the steps taken to achieve the layout and learn from another Divi developer. I’m sure all Web Designers have different ways of doing their art, so I’m happy to share a little bit about mine.

If you like this kind of “post format” with a video tutorial to follow along, please subscribe and send me your feedback.

I created a similar layout for a client of mine – and he gave me such a nice feedback – so I want to share it with other Divi Lovers. Hope you like it as much as he did.

Without further ado, let’s create the Divi small layout from the demo.

Divi small layouts #4>

Preview

Download

The video tutorial says it all. I think the most important part of the blog post is to share the CSS that will be used to accomplish the layout design.

Layout

Click here to download the Divi small layout #4. Please, use this layout directly on the page you want to use it. Click the  to upload it.

CSS

The CSS to obtain the layout design is divided into 2 important parts.

I got the awesome box-shadow code used in this layout from the Propeller project. It’s really worth to check it out!

First, learn how to create 2 border-bottom borders – one that reaches all the row width – and another one with a different color that reaches the specific width you set.

Secondly, create links with the Font Awesome icons. You’ll need to install the plugin Better Font Awesome to easily add icons to your layout. This plugin is a must for all my websites. Make the icons animate when hovering the mouse over the links and the icon.

This is a pretty neat skill to obtain, and I’m sure you’ll start using in your Divi projects.

/* -- Divider 2 colors -- */
.d2 {
  border-bottom: 2px solid #ccc;
}
 
.d2:after {
  content: "";
  display: block;
  background: #039be5;
  width: 90px;
  height: 2px;
  position: relative;
  top: 2px;
}
 
/* -- Link -- */
.linkicon {
  color: #039be5;
  padding: 5px;
  margin-right: 5px;
  border: 1px solid #eee;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
 
a:hover .linkicon {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
 
* {
  transition: .3s all;
}

Conclusion

How did you like the Divi small layouts #4 with video tutorial?

I already bought a microphone to record better voice sound on my next video tutorials. It’s the Blue Snowball USB Microphone (Textured White). Hope it’s as good as I saw in the review.

Please, subscribe if you liked it and stay tuned for more tuts! Your feedback is always important to me. Don’t forget to send a quick message.

See ya!