Make everything material with
Material Columns for Divi
Create beautiful layouts with cool material design card effects – with or without hover animations.
BUY NOW
SEE IN ACTION

Material Columns

Material Columns re very versatile. You can easily make your existing layouts use them without the need to replace every row in the builder. However, if you are building a new page, we created a set of predefined layouts (rows) which you can load from the builder library without the need to configure anything by hand.

We created Material Columns row layouts with a base elevation of 1 and a hover elevation of 4 for every row layout in Divi:

  • 1/1
  • 1/2 & 1/2
  • 1/3 & 1/3 & 1/3
  • 1/4 & 1/4 & 1/4 & 1/4
  • 1/3 & 2/3
  • 2/3 & 1/3
  • 1/4 & 3/4
  • 3/4 & 1/4
  • 1/2 & 1/4 & 1/4
  • 1/4 & 1/4 & 1/2
  • 1/4 & 1 /2 & 1/4
We created various style variations for elevation and indention. You can choose which base elevation level and which hover elevation level you want.

There are 6 different levels of elevation from which you can choose.

  • 0: No elevation. The element lies flat on the surface
  • 1: Slightly elevated like this card
  • 2 & 3: Higher elevated
  • 4: Even higher elveated like this card when hovering
  • 5: The highest elevation level

You can chose any combination of base and hover elevation level. This card uses 1 as the base and 4 as the hover elevation. You can also invert the levels to make it look like the card is sinking on hover. Check out the examples further down.

Cool

This looks awesome.

Cool

This looks awesome.

Cool

This looks awesome.

Cool

This looks awesome.

Material Design

Material Design looks really cool – not only in mobile Apps but also on the web. It looks clean and modern and people love to play around with hover effects. That will automatically increase your retention time and your search engine rank will improve.

BUY NOW

Our Support

Is truly the best. Because we care for our customers, we are always there for you. You can write us at any time. Say hello, ask your questions or tell us about your secret desires. No matter what it is, you can always count on us.

15 + 3 =

Elevation Levels

The following examples are showing the different elevation levels you can choose. By default, we suggest you to use 1 for the base elevation and 4 for the hover elevation. However, it is up to you to decide which style fits the best for your site and you have every freedom to mix them how you desire. You want level 5 for the base elevation and 0 on hover? Feel free to do so!

Level 0

I am elevation level 0.

Level 1

I am elevation level 1.

Level 2

I am elevation level 2.

Level 3

I am elevation level 3.

Level 4

I am elevation level 4.

Level 5

I am elevation level 5.

Rounded Corners

The human loves straight lines but he is also programmed to see the beauty of nature and nature is not always straight. Thats why some people find rounded corners and curves so pleasing to the eye.

To make it easier to you to create cool looking material designs, we provide the same 1-4 elevation layout for each row type with rounded corners as well.
To apply rounded corners to any element on your site, you can use the same technique as for applying the material design. It’s easy and you can chose between three radii.

Radius 1

Slightly rounded corners

Radius 2

A little larger radius

Radius 3

A large radius. You shouldn’t use more.

Cool

This looks awesome.

Cool

This looks awesome.

Cool

This looks awesome.

Cool

This looks awesome.

FAQ

How to install Material Columns for Divi
  1. Unzip the jt-divi-material-columns.zip file
  2. Open the styles.css and copy everything
  3. Head over to you Divi Theme Options
  4. Paste the styles in the Custom CSS field and save
  5. Head over to your Divi Library
  6. Click the Import & Export button at the top
  7. Select the Import tab, choose the Material Columns.json file and confirm the import
How to use the predefined Material Columns for Divi layouts
To use the predefined layouts, simply head over to your Divi Page Builder, add a Standard Section and click on Add Row. On the Add from Library tab, you can find the Material Columns layouts.

How to add Material Columns to existing layouts
To use Material Columns for Divi in your existing layouts, simply copy the class for the style you want to apply to your existing rows Column 1-4 CSS Class. The class uses the following design:

  • jt-divi-material-column-{base-elevation}-{hover-elevation}

Simply replace base- and hover-elevation by a number between 0 and 5 (e. g. jt-divi-material-column-0-1 or jt-divi-material-column-4-1).

To make the cards have rounded corners, use one of these classes in addition:

  • jt-divi-material-column-rounded-corners-5
  • jt-divi-material-column-rounded-corners-10
  • jt-divi-material-column-rounded-corners-20

In some Divi installations, it might happen that the material design shadows look cut off. This is due to Divi adding a “overflow: hidden” CSS property to your section or row. To get around that, you can add the class “jt-divi-material-row” to the CSS Class field of the parent row (this time, the CSS Class field, not the Column 1-4 CSS Class).

By the way: you don’t have to add the classes to columns only. You also can add the classes to single module or any other element on your page.

 

Add the classes to the Column CSS Class field of the Row:

Add content to the Row:

Since Column 2 uses a different base elevation, it looks slightly different:

On hovering over column 1, it gets elevated from level 1 to level 4:

On hovering over column 1, it sinks down from level 4 to level 1: