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 <strong>fun</strong>. You should try it!
Blurb
It's fun. You should try it!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_3″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/antelope-canyon.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /><img src=”https://janthielemann.de/wp-content/uploads/2017/06/antelope-canyon-2.jpg” alt=”” class=”et_pb_jt_material_blurb_image_hover” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>It’s fun. You should try it!</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button et_pb_custom_button_icon” rel=”nofollow” data-icon=””>Go</a>
</div>
</div>
</div>
</div>
for Divi
It's fun. You should try it!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_5″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mar-sea.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /><img src=”https://janthielemann.de/wp-content/uploads/2017/06/waterfalls.jpg” alt=”” class=”et_pb_jt_material_blurb_image_hover” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>for Divi</h2>
<div class=”et_pb_jt_material_blurb_body”>It’s fun. You should try it!</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button et_pb_custom_button_icon” rel=”nofollow” data-icon=”9″>Go</a>
</div>
</div>
</div>
</div>
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
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_0 et_pb_jt_material_blurb_7″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/landscape-1.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>No Elevaton</h2>
<div class=”et_pb_jt_material_blurb_body”>Just flat</div>
</div>
</div>
</div>
</div>
Elevaton 1
First level of elevation.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_9″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/turkey.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Elevaton 1</h2>
<div class=”et_pb_jt_material_blurb_body”>First level of elevation.</div>
</div>
</div>
</div>
</div>
Elevaton 2
Second level of elevation.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_2 et_pb_jt_material_blurb_11″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/sunrise.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Elevaton 2</h2>
<div class=”et_pb_jt_material_blurb_body”>Second level of elevation.</div>
</div>
</div>
</div>
</div>
Elevaton 3
Third level of elevation.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_3 et_pb_jt_material_blurb_13″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/spring-lake.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Elevaton 3</h2>
<div class=”et_pb_jt_material_blurb_body”>Third level of elevation.</div>
</div>
</div>
</div>
</div>
Elevaton 4
Fourth level of elevation.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_4 et_pb_jt_material_blurb_15″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/seascape.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Elevaton 4</h2>
<div class=”et_pb_jt_material_blurb_body”>Fourth level of elevation.</div>
</div>
</div>
</div>
</div>
Elevaton 5
Fifth level of elevation.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_5 et_pb_jt_material_blurb_17″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/landscape2.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Elevaton 5</h2>
<div class=”et_pb_jt_material_blurb_body”>Fifth level of elevation.</div>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_4 et_pb_jt_material_blurb_elevation_1_hover et_pb_jt_material_blurb_19″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/sunset.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Material Blurb for Divi</h2>
<div class=”et_pb_jt_material_blurb_body”>Lets you create stunning, beautiful, retention increasing designs which your customers will love to play with.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” rel=”nofollow”>Try it out!</a><a href=”#” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button” >It's awesome!</a>
</div>
</div>
</div>
</div>
Material Blurb for Divi
Increase engagement and sales, improve your Google ranking and make your visitors happy.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_4 et_pb_jt_material_blurb_elevation_1_hover et_pb_jt_material_blurb_21″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/rock-on-sea.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Material Blurb for Divi</h2>
<div class=”et_pb_jt_material_blurb_body”>Increase engagement and sales, improve your Google ranking and make your visitors happy.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” rel=”nofollow”>It's worth a try</a><a href=”#” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button” >Don't you think?</a>
</div>
</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 class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_23″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/water2.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/water1.jpg” alt=”” class=”et_pb_jt_material_blurb_image_hover” /></div>
</div>
</div>
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_25″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/men-2425121_640.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /><img src=”https://janthielemann.de/wp-content/uploads/2017/06/whatamidoing.png” alt=”” class=”et_pb_jt_material_blurb_image_hover” /></div>
</div>
</div>
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_27″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/cothach.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/water3.jpg” alt=”” class=”et_pb_jt_material_blurb_image_hover” /></div>
</div>
</div>
Two Buttons
Below each other, wrapping the button text.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_33″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Two Buttons</h2>
<div class=”et_pb_jt_material_blurb_body”>Below each other, wrapping the button text.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Button 1</a><br><a href=”#” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button” >Button 2</a>
</div>
</div>
</div>
</div>
Two Buttons
Below each other, filling the blurb.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_35″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Two Buttons</h2>
<div class=”et_pb_jt_material_blurb_body”>Below each other, filling the blurb.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Button 1</a><br><a href=”#” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button” >Button 2</a>
</div>
</div>
</div>
</div>
Two Buttons
Side by side, filling the blurb.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_37″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Two Buttons</h2>
<div class=”et_pb_jt_material_blurb_body”>Side by side, filling the blurb.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Button 1</a><a href=”#” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button” >Button 2</a>
</div>
</div>
</div>
</div>
Two Buttons
Side by side, wrapping the button text.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_39″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Two Buttons</h2>
<div class=”et_pb_jt_material_blurb_body”>Side by side, wrapping the button text.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Button 1</a><a href=”#” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button” >Button 2</a>
</div>
</div>
</div>
</div>
Many Options
You can customize everything.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_41″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/water2.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_left”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>Many Options</h2></a>
<div class=”et_pb_jt_material_blurb_body”>You can customize everything.</div>
</div>
</div>
</div>
</div>
Endless Options
It's incredible!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_43″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/water3.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h4 class=”et_pb_jt_material_blurb_title”>Endless Options</h4></a>
<div class=”et_pb_jt_material_blurb_body”>It’s incredible!</div>
</div>
</div>
</div>
</div>
Your Imagination
is the only limiting factor!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_45″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/water1.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_right”>
<a href=”#” rel=”nofollow”><h1 class=”et_pb_jt_material_blurb_title”>Your Imagination</h1></a>
<div class=”et_pb_jt_material_blurb_body”>is the only limiting factor!</div>
</div>
</div>
</div>
</div>
And of course
We also do icons instead of images
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_47″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off” style=”color: #8300e9;”>N</span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>And of course</h2></a>
<div class=”et_pb_jt_material_blurb_body”>We also do icons instead of images</div>
</div>
</div>
</div>
</div>
But our Icons
Are a little bit better!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_49″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off” style=”color: #8300e9;”>t</span><span class=”et_pb_jt_material_blurb_icon_hover et-pb-icon et-waypointet_pb_animation_off” style=”color: #8300e9;”>r</span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>But our Icons</h2></a>
<div class=”et_pb_jt_material_blurb_body”>Are a little bit better!</div>
</div>
</div>
</div>
</div>
Because you can
Create really cool effects
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_51″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off” style=”color: #8300e9;”>/</span><span class=”et_pb_jt_material_blurb_icon_hover et-pb-icon et-waypointet_pb_animation_off” style=”color: #0c71c3;”></span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>Because you can</h2></a>
<div class=”et_pb_jt_material_blurb_body”>Create really cool effects</div>
</div>
</div>
</div>
</div>
And customize
Just about everything
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_53″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off et-pb-icon-circle et-pb-icon-circle-border” style=”color: #8300e9; background-color: rgba(126,190,197,0); border-color: #8300e9; border-width: 2px;”>N</span><span class=”et_pb_jt_material_blurb_icon_hover et-pb-icon et-waypointet_pb_animation_off et-pb-icon-circle et-pb-icon-circle-border” style=”color: #ffffff; background-color: #8300e9; border-color: #8300e9; border-width: 2px;”>N</span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>And customize</h2></a>
<div class=”et_pb_jt_material_blurb_body”>Just about everything</div>
</div>
</div>
</div>
</div>
Gradients
Make nice backgrounds too
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_55″>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off” style=”color: #ffffff;”></span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>Gradients</h2></a>
<div class=”et_pb_jt_material_blurb_body”>Make nice backgrounds too</div>
</div>
</div>
</div>
</div>
Parallax Images
Make also cool backgrounds
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_57 et_pb_section_parallax”>
<span
class=”et_parallax_bg”
style=”background-image: url(http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/antelope-canyon.jpg);”
></span>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off” style=”color: #ffffff;”></span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>Parallax Images</h2></a>
<div class=”et_pb_jt_material_blurb_body”>Make also cool backgrounds</div>
</div>
</div>
</div>
</div>
Videos
Make sooo cool backgrounds
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_dark et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_59 et_pb_section_video et_pb_preload”>
<span class=”et_pb_section_video_bg”>
<video loop=”loop”>
<source type=”video/mp4″ src=”https://janthielemann.de/wp-content/uploads/2017/07/MVI_2884_1.mp4″ />
</video>
</span>
<div class=”et_pb_jt_material_blurb_container”>
<a href=”#” rel=”nofollow”><div class=”et_pb_jt_material_blurb_image_container”><span class=”et_pb_jt_material_blurb_icon et-pb-icon et-waypointet_pb_animation_off” style=”color: #ffffff;”></span></div></a>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<a href=”#” rel=”nofollow”><h2 class=”et_pb_jt_material_blurb_title”>Videos</h2></a>
<div class=”et_pb_jt_material_blurb_body”>Make sooo cool backgrounds</div>
</div>
</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.
<img class=”alignleft wp-image-25565 size-thumbnail” src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/building-3-150×150.jpg” alt=”” width=”150″ height=”150″ />
<h2>I am a rich text blurb</h2>
Use me as if <strong>you</strong> would create a <em>post or page</em>. You can use all the cool features of WordPress TinyMCE editor.
Rich Text is Awesome
<p style=”text-align: left; padding: 0px;”>With <span style=”color: #3366ff;”>rich text</span></p>
<p style=”text-align: center; padding: 0px;”><strong><em>you</em> <em><span style=”color: #ff0000;”>can</span> do</em></strong></p>
<p style=”text-align: right; padding: 0px;”>really interesting things.</p>
<a href=’#’ class=’small-button smallblue’>Like</a><a href=’#’ class=’small-button smallblue’>additional</a><a href=’#’ class=’small-button smallblue’>buttons</a>
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!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_65″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/colosseum-1799675_1280.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Material Blurb for Divi</h2>
<div class=”et_pb_jt_material_blurb_body”>Get it now!</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”https://elegantmarketplace.com/downloads/material-blurb-for-divi/” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button et_pb_custom_button_icon” target=”_blank” rel=”nofollow” data-icon=””>BUY NOW</a>
</div>
</div>
</div>
</div>
Material Blurb for Divi
Get it now!
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_67″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/petra-237066_1280.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Material Blurb for Divi</h2>
<div class=”et_pb_jt_material_blurb_body”>Get it now!</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”https://elegantmarketplace.com/downloads/material-blurb-for-divi/” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button et_pb_custom_button_icon” target=”_blank” rel=”nofollow” data-icon=””>BUY</a><a href=”https://janthielemann.de/material-blurb-for-divi/#styles” class=”et_pb_jt_material_blurb_button et_pb_jt_material_blurb_second_button et_pb_button_two et_pb_more_button et_pb_button et_pb_custom_button_icon” data-icon=”t”>MORE</a>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_69″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-3.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Large Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>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 class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Wow, amazing!</a>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_71″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-2.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Medium Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>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 class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Got It!</a>
</div>
</div>
</div>
</div>
Small Blurb
Small blurb has a short text.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_73″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-1.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Small Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>Small blurb has a short text.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Ok</a>
</div>
</div>
</div>
</div>
Small Blurb
Small blurb has a short text.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_75″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-1.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Small Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>Small blurb has a short text.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Ok</a>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_77″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-2.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Medium Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>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 class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Got It!</a>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_79″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-3.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Large Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>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 class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Wow, amazing!</a>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_81″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-3.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Large Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>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 class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Wow, amazing!</a>
</div>
</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.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_83″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-2.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Medium Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>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 class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Got It!</a>
</div>
</div>
</div>
</div>
Small Blurb
Small blurb has a short text.
<div class=”et_pb_jt_material_blurb et_pb_module et_pb_bg_layout_light et_pb_jt_material_blurb_elevation_1 et_pb_jt_material_blurb_elevation_4_hover et_pb_jt_material_blurb_85″>
<div class=”et_pb_jt_material_blurb_container”>
<div class=”et_pb_jt_material_blurb_image_container”><img src=”http://purrfectangelsanimalrescue.org/wp-content/uploads/2018/02/mt-fuji-1.jpg” alt=”” class=”et_pb_jt_material_blurb_image” /></div>
<div class=”et_pb_jt_material_blurb_text_container”>
<div class=”et_pb_jt_material_blurb_text_content et_pb_jt_material_blurb_text_align_center”>
<h2 class=”et_pb_jt_material_blurb_title”>Small Blurb</h2>
<div class=”et_pb_jt_material_blurb_body”>Small blurb has a short text.</div>
</div>
<div class=”et_pb_jt_material_blurb_button_container et_pb_jt_material_blurb_text_align_center”>
<a href=”#” class=”et_pb_jt_material_blurb_button et_pb_button_two et_pb_jt_material_blurb_first_button et_pb_more_button et_pb_button” >Ok</a>
</div>
</div>
</div>
</div>
Documentation
Here you find the answers to the most common questions and problems.