BG +359 2 441 4633 NL 020 893 20 39 UK 020 813 30 277 USA (678) 608 2711info@webfactory.bg

Adding Material Design To Your Website With Divi

27.02.2017


 

Adding Material Design To Your Website With Divi

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.

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(0000.23), 0 6px 20px rgba(0000.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 {
overflowhidden;
}
.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-bottom10px !important;
}
.material .et_pb_button {
box-shadow: 0 3px 10px rgba(0000.23), 0 3px 10px rgba(0000.16);
 
}
.material .et_pb_button:hover {
    box-shadow: 0 25px 55px 0 rgba(0000.21), 0 16px 28px 0 rgba(0000.22);
margin-top-5px;
margin-bottom5px !important;
 
}
  
.material .et_pb_button:hover:after {
line-height1.7em;  
-webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
   
.material.et_pb_row {padding27px 15px;}
  
 
.material .et_pb_column {
box-shadow: 0 3px 10px rgba(0000.23), 0 3px 10px rgba(0000.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(0000.23), 0 6px 20px rgba(0000.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.

 

« Back