Material is beautiful and so is

Material Blurb for Divi

Create beautiful material design cards with the powerful and highly customizable Material Blurb for Divi Module.

Material Design has never been easier!

With Material Blurb for Divi you can create stunning card layouts. There are endless possibilities to customize the module. Here are some examples.

Material

It's fun. You should try it!

It’s fun. You should try it!

Go

Blurb

It's fun. You should try it!

Blurb

It’s fun. You should try it!

</div>
</div>
</div>

Go

for Divi

It's fun. You should try it!

for Divi

It’s fun. You should try it!

</div>
</div>
</div>

Go

Material Design Elevation!

Material Blurb for Divi offers 5 default elevation levels. You can set the elevation level for normal and hover state separately.

No Elevaton

Just flat

No Elevaton

Just flat

</div>
</div>
</div>

Elevaton 1

First level of elevation.

Elevaton 1

First level of elevation.

</div>
</div>
</div>

Elevaton 2

Second level of elevation.

Elevaton 2

Second level of elevation.

</div>
</div>
</div>

Elevaton 3

Third level of elevation.

Elevaton 3

Third level of elevation.

</div>
</div>
</div>

Elevaton 4

Fourth level of elevation.

Elevaton 4

Fourth level of elevation.

</div>
</div>
</div>

Elevaton 5

Fifth level of elevation.

Elevaton 5

Fifth level of elevation.

</div>
</div>
</div>

Left nothing to be desired!

Material Blurb for Divi has switches, sliders, pickers and fields to customize the look and feel in any way you want. If you are missing a setting, just tell us and we will add it for you in the next update!

Material Blurb for Divi

Lets you create stunning, beautiful, retention increasing designs which your customers will love to play with.

Material

It’s fun. You should try it!

</div>
</div>
</div>

Material Blurb for Divi

Increase engagement and sales, improve your Google ranking and make your visitors happy.

Material

It’s fun. You should try it!

</div>
</div>
</div>

Completely Customizable!

Material Blurb for Divi can be customized in any thinkable way. Use only text, only images or combine them as you desire. Use icons instead of images or animate the module when hovering. Of course you can use a different icon on hover and animations are combinable with elevations.

</div>
</div>

</div>
</div>

</div>
</div>

Two Buttons

Below each other, wrapping the button text.

Two Buttons

Below each other, wrapping the button text.

</div>
</div>
</div>

Two Buttons

Below each other, filling the blurb.

Two Buttons

Below each other, filling the blurb.

</div>
</div>
</div>

Two Buttons

Side by side, filling the blurb.

Two Buttons

Side by side, filling the blurb.

</div>
</div>
</div>

Two Buttons

Side by side, wrapping the button text.

Two Buttons

Side by side, wrapping the button text.

</div>
</div>
</div>

Many Options

You can customize everything.

</a>

Many Options

You can customize everything.

</div>
</div>
</div>

Endless Options

It's incredible!

</a>

Endless Options

It’s incredible!

</div>
</div>
</div>

Your Imagination

is the only limiting factor!

</a>

Your Imagination

is the only limiting factor!

</div>
</div>
</div>

N

And of course

We also do icons instead of images

</a>

Many Options

You can customize everything.

</div>
</div>
</div>

tr

But our Icons

Are a little bit better!

</a>

Many Options

You can customize everything.

</div>
</div>
</div>

/

Because you can

Create really cool effects

</a>

Many Options

You can customize everything.

</div>
</div>
</div>

NN

And customize

Just about everything

</a>

Many Options

You can customize everything.

</div>
</div>
</div>

Gradients

Make nice backgrounds too

Material

It’s fun. You should try it!

</div>
</div>
</div>

Parallax Images

Make also cool backgrounds

Blurb

It’s fun. You should try it!

</div>
</div>
</div>

Videos

Make sooo cool backgrounds

for Divi

It’s fun. You should try it!

</div>
</div>
</div>

Rich Text

The latest version of Material Blurb for Divi also supports rich text. This gives you even more freedom in the way you can use this awesome module.

I am a rich text blurb

Use me as if you would create a post or page. You can use all the cool features of WordPress TinyMCE editor.

Rich Text is Awesome

With rich text

you can do

really interesting things.

 

Likeadditionalbuttons

See what you can do with Material Blurb for Divi

Here are some more original styling ideas on how to show off Material Blurb for Divi. They can be easily achieved using the custom CSS fields of the module. No hacking of your themes CSS required!

Buttons moved to the top

Material Blurb for Divi

Get it now!

Material Blurb for Divi

Get it now!

</div>
</div>
</div>

Material Blurb for Divi

Get it now!

Material Blurb for Divi

Get it now!

</div>
</div>
</div>

Equalized heights

Large Blurb

Large blurb has a really long text. Compared to small blurb or medium blurb, this text has a lot more lines. It gets wrapped multiple times and will cause small blurb and medium blurb to show some empty space due to the fact, that we equalized the columns of this row and made the blurb fill the height.

Large Blurb

Large blurb has a really long text. Compared to small blurb or medium blurb, this text has a lot more lines. It gets wrapped multiple times and will cause small blurb and medium blurb to show some empty space due to the fact, that we equalized the columns of this row and made the blurb fill the height.

</div>
</div>
</div>

Medium Blurb

Medium blurb has a longer text. It might get wrapped and is probably longer than only one line. At least it is longer than small blurbs text.

Medium Blurb

Medium blurb has a longer text. It might get wrapped and is probably longer than only one line. At least it is longer than small blurbs text.

</div>
</div>
</div>

Small Blurb

Small blurb has a short text.

Small Blurb

Small blurb has a short text.

</div>
</div>
</div>

Ok

Small Blurb

Small blurb has a short text.

Small Blurb

Small blurb has a short text.

</div>
</div>
</div>

Ok

Medium Blurb

Medium blurb has a longer text. It might get wrapped and is probably longer than only one line. At least it is longer than small blurbs text.

Medium Blurb

Medium blurb has a longer text. It might get wrapped and is probably longer than only one line. At least it is longer than small blurbs text.

</div>
</div>
</div>

Large Blurb

Large blurb has a really long text. Compared to small blurb or medium blurb, this text has a lot more lines. It gets wrapped multiple times and will cause small blurb and medium blurb to show some empty space due to the fact, that we equalized the columns of this row and made the blurb fill the height.

Large Blurb

Large blurb has a really long text. Compared to small blurb or medium blurb, this text has a lot more lines. It gets wrapped multiple times and will cause small blurb and medium blurb to show some empty space due to the fact, that we equalized the columns of this row and made the blurb fill the height.

</div>
</div>
</div>

Large Blurb

Large blurb has a really long text. Compared to small blurb or medium blurb, this text has a lot more lines. It gets wrapped multiple times and will cause small blurb and medium blurb to show some empty space due to the fact, that we equalized the columns of this row and made the blurb fill the height.

Large Blurb

Large blurb has a really long text. Compared to small blurb or medium blurb, this text has a lot more lines. It gets wrapped multiple times and will cause small blurb and medium blurb to show some empty space due to the fact, that we equalized the columns of this row and made the blurb fill the height.

</div>
</div>
</div>

Medium Blurb

Medium blurb has a longer text. It might get wrapped and is probably longer than only one line. At least it is longer than small blurbs text.

Medium Blurb

Medium blurb has a longer text. It might get wrapped and is probably longer than only one line. At least it is longer than small blurbs text.

</div>
</div>
</div>

Small Blurb

Small blurb has a short text.

Small Blurb

Small blurb has a short text.

</div>
</div>
</div>

Ok

Utilize the Buttons

Documentation

Here you find the answers to the most common questions and problems.

How to install Material Blurb for Divi
Material Blurb for Divi is a WordPress plugin. Install and activate it as any other WordPress plugin in the Plugin section of your backend.
How to activate the license?
To activate the license, go to the Plugin section of your WordPress backend. If you installed and activated the Material Blurb for Divi plugin, you will see a new submenu called Material Blurb for Divi. Enter the license key, save it and then click the activate button. If your license is valid, you will see a activation confirmation.
How to update Material Blurb for Divi
After successfully activating your licenses, you will get updates directly via WordPress’s Plugin page.
Where to find the License Key?
During purchase, a license key will be generated by elegantmarketplace. You can find it in the confirmation email or on your account. Simply go to Account -> My Purchase History and click on the View Licenses button.If you didn’t receive a license and can’t find it in your purchase history, contact the elegantmarketplace support. They will provide you with your license.

How to move the CTA between the Image and the Text?
To achieve a look as in the example above, where the call to action is positioned above the text, all you have to do is to tweak the CSS of the blurb a little bit. First, make the text container position relative and add a top margin to the text content to make room for the button. Then position the button container absolute.

The actual numbers can vary depending on the configuration of your button. Depending on the buttons content you might need to play with the top positioning.

How to equalize heights?
Equalizing the heights of multiple blurbs in one row requires some CSS hacking. Fortunately, Material Blurb for Divi has custom CSS fields for every element, so you don’t need to touch your themes or pages CSS. Everything can be done directly in the module. So heres how you can equalize the height.The first step is to activate the Equalize Column Heights setting of the Page Builder Row which will contain your Material Blurbs. Then switch to the advanced tab of the Row Module Settings and add display: flex; to each Column Main Element

The second step is to make the Material Blurbs use flexes as well. First add display: flex; flex-direction: column; flex: 1; to the main element. This will already cause the blurbs to fill the available space. However, the text as well as the buttons are still only filling as much space as they need, causing the blurbs with less content to have empty space at the bottom.

It is now up to you how you want your blurbs to look like. If you want the button to be positioned at the bottom of the blurb, you can add display: flex; flex-direction: column; flex: 1; to the Material Blurb Container, Material Blurb Text Container and Material Blurb Text Content as well as flex: 1; to Material Blurb Text Body.

Another styling option we like is centering the text and button. You can achieve that by adding display: flex; flex-direction: column; flex: 1; to the Material Blurb Container as well as display: flex; flex-direction: column; flex: 1; justify-content: center; to the Material Blurb Text Container.

CSS flex property is very powerful and we thought the elements of Material Blurb for Divi very well through so you have a lot of freedom. To learn more about the possibilities, we recommend these tutorials:

  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
  • https://www.w3schools.com/css/css3_flexbox.asp
How to fix cut off shadows?
If shadows of Material Blurb for Divi are being cut of at either side or the bottom of the blurb, you should check if the Row containing the blurbs has the overflow: hidden; property set. Add overflow: visible; to the rows Main Element in the rows Advanced settings. Another solution is to set a margin around on the blurbs or a padding on the row.
Hover Animation vs. Hover Elevation
The Material Blurb for Divi module offers you two different kinds of animations when hovering over the module.Elevation

Elevation is used to “lift up” the blurb so that it appears to be closer to the viewer. The drop shadow will be increased in size and look softer. Use the Elevation, Use Hover Elevation and Hover Elevation settings to cofigure this behavior.

Animation

Animation is used to move the blurb around. You can for example move the blurb up, down to the left or to the right.

Support & Feature Suggestions

7 + 13 =