Material Design was invented by Google in 2014 in an effort to combine tactile elements (based on the sense of touch) with technological possibilities of the real world and beyond. It capitalizes on the users familiarity with things like paper and ink and adds scientific realities like movement and shadows. It even stretches the real world limitations of technology and science just enough to bend but not break the rules of physics. The result is a design that is both familiar and magical at the same time.

Some common elements of material design include the use of meaningful transitions (or motion), the use of light and shadow, grid layouts, and bold colors. It is surprising how easily these elements can improve the overall design and user experience of your website.

Today, I will show you how to implement a few elements of material design to your website using the Divi builder and a little CSS.

Let’s get started.

Adding Material Design To Your Website With Divi

Subscribe To Our Youtube Channel

Implementing Material Design with Divi

In today’s design, I’m using bold colors and images on a white background to entice the user. I’m also adding shadows and movement when hovering over certain elements to further engage the user. I’m adding a button that straddles the line between image and content since both are relevant to the call to action. And lastly, I added a little movement to the button icon which purposefully “points” them in the right direction. All of these elements are consistent with material design and easily implemented.

The design elements used are images from unsplash.com. The header image has a 1288px width and a 737px height. The four box images are 800px width by 450px height. The rest of the design is accomplished through the Divi builder and custom CSS.

Designing The Header

Using the default standard section shown in the Divi Builder, insert a fullwidth column.

Click on the section module settings. Under General Settings, insert your background image.

Then click on the Row Module Settings give it a custom padding:

Top: 150px
Bottom: 50px

Under the Advanced Design Settings, add a custom bottom margin of -100px.

Save & Exit

Since this section will only serve as a background, you don’t need to add any modules.

Now add another standard section using the Divi Builder and give it a fullwidth column. Then click the Row Module Settings.

Change the General Settings as follows:

Use Custom Width: Yes
Custom Width: 700px
Custom Padding: Top 50px and Bottom 50px

Under the Advanced Design Settings give the row a custom margin as follows:

Top: -144px
Bottom: 0px
Background Color: #ffffff

Under the Custom CSS tab, add the following CSS to the Main Element text box:

box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);

Save & Exit

Next add a text module to the row. Under General Settings, add your content inside the Content box. Make sure to wrap your header in an h1 tag. Here is what I am adding (make sure to select the text tab when entering html):

<h1 style="text-transform: captialize;">Material Design</h1>
Aenean consectetur ipsum ante, vel egestas enim tincidunt quis.

Under Advanced Design Settings, change the following:

Header Font: Bold (B)
Header Font Size: 40px;
Header Text Color: #e91e63
Header Letter Spacing: 2px

Now your header is finished.

Designing the Columns and Content Boxes

Once the header is in place, it is time to add your columns and content boxes.

First add a standard section with a one-half, one-half column layout

Edit the section settings. Under General Settings, change the custom padding option to the following:

Top: 0px
Right: 20px
Left: 20px

Now click the Row Module Settings. Under Advanced Design Settings, locate the Equalize Column Heights option and switch it to “YES”. It is also a good idea to add a bottom padding of 20px to each of your columns for spacing.

Go over to the Custom CSS tab and give this Row Module a custom CSS class called “material”. This will be our identifier for all of our custom css elements we will add later on. This is important so that the design elements aren’t applied site-wide, but only where you add the “material” class.

Save & Exit

Now you can start adding modules to your row. I want to include 3 modules stacked on top of each other: an image module, a button module, and a text module. First add an image module to the left one-half column of the row.

In the Image Module Settings, under General Settings, change/add the following:

Upload/Enter Image
Remove Space Below The Image: Yes
Animation: Fade In
Image Alignment: Center

Save & Exit

Under the Image Module, add a button module. Change the button module settings under General Settings as follows:

Button URL: [enter url] (I’m just putting # for now)
Url Opens: In The New Tab
Button Text: More
Button Alignment: Center

Under Advanced Design Settings, change the following:

Use Custom Styles for Button: Yes
Button Text Size: 24px
Button Text Color: #ffffff;
Button Background Color: #e91e63
Button Border Width: 0
Button Border Radius: 0
Add Button Icon: Yes
Button Icon: Circled Chevron down icon (make sure to select a down facing arrow icon)

Finally, add a Text Module under the button module.

Go to the Text Module settings. Under General Settings, change the Text Orientation to Center and enter your content in the content section.

Under Advanced Design Settings, give your text module some custom padding as follows:

Top: 10px
Right: 10px
Bottom: 10px
Left: 10px

Save & Exit

Next, you are going to duplicate the image, button, and text modules you just created and drag them over to right one-half column of the row.

After duplicating your modules, go ahead and duplicate the two column row by selecting the duplicate row icon.

Now your layout should look like this:

Go back and change the content of your modules to whatever you need them to be for your website.

Adding the Custom CSS

The next step is to add custom CSS for those additional material design elements. Go to Divi → Theme Options and add the following css in the Custom CSS text box:

.material .et_pb_image {
overflow: hidden;
}
.material .et_pb_column img{
vertical-align:top;
    -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;
}
.material .et_pb_column:hover img{
    -webkit-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
}

.material .et_pb_button_module_wrapper {
margin-top: -26px;
margin-bottom: 10px !important;
}
.material .et_pb_button {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);

}
.material .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;

}
 
.material .et_pb_button:hover:after {
line-height: 1.7em;   
-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
  
.material.et_pb_row {padding: 27px 15px;}
 

.material .et_pb_column {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
    -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;

}

.material .et_pb_column:hover {
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.23), 0 6px 20px rgba(0, 0, 0, 0.16);

}

Save changes and go check out the final result.

A Few Tips

In addition to the use of bold colors on a white background, you now have a little extra movement that helps the “material” come alive for the user. Each of the four column boxes have a slight resting elevation (via shadowing) that increases on hover. The button straddles the image and content, and it has a resting elevation that increases even more on hover as it moves up 5 pixels. Also when hovering over the button, the button icon rotates counterclockwise 90 degrees from pointing down to pointing right. And, the image zooms when hovering over the column box.

Notice that each of the transitions and movements are purposeful and swift. They should be coherent enough to grab one’s attention, but quick enough not to disrupt the continuity of the user experience.

As far as the layout of this design goes, you can use if for a number of different things like featured portfolios, featured services, or CTA’s. Sky’s the limit.

If you would like to add additional content to the boxes, you can do this easily since the shadowing and hover effect is done at the column level. Simply add additional modules to your columns. You can also add more columns to your row if you want. A three column layout looks great.

If you want to change the background of the boxes, you can go to Row Module Settings under Advanced Design Settings and change the background color for each column.

Final Thoughts

I’m not a material design expert, but I do enjoy learning more about it and implementing the design elements when an opportunity comes. For more information on material design you can visit https://material.io/. They have a useful color palette as well.

I hope you found this tutorial helpful. I’m looking forward to hearing from you in the comments below.