WordPress

Style your Divi Blurbs like Material Design Cards

Style a row of Divi Blurbs to appear as cards/blocks — with a cool animation on hover.

Here is an example video of it in action:


Video 1: https://i.gyazo.com/cde555daaf878bc9257156d2babca838.mp4


Video 2: https://i.gyazo.com/2649e6b5e8a7a3b0410bf277b6885540.mp4


Screenshot 1: https://i.gyazo.com/f6f7979824a90f09bbb254dd0077c5b0.png

Screenshot 2: https://i.gyazo.com/fba4c36a181cdf6bd4c9fa17de6323a6.png


The code below will override all blurbs to have the cool hover effect. But if you specifically use the .blurb-row class on a Row module, it will also give them the card styling too — which basically adds:

  • some padding
  • white background
  • shadow
  • ensures the blurbs are all the same height, within the row

In addition to adding the .blurb-row class to the Row module, you will also probably want to set:

  • Customer Gutter Width: 1
  • Equalize Column Heights
/* -- BLURBS -- */

.et_pb_section .et_pb_row.blurb-row {
	overflow: visible;
}

.et_pb_section .et_pb_row.blurb-row .et_pb_column {
	display: flex;	
}

.et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb {
	flex-grow: 1;
	padding: 30px;
	-webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
	-moz-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
	box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.06);
	transition: all 0.4s ease-in-out;
	background-color: white;
	position: relative;
}

@media (max-width: 980px) {
	.et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb {
		margin-bottom: 30px !important;
	}
}

.et_pb_section .et_pb_row.blurb-row .et_pb_column .et_pb_blurb:hover {
	-webkit-box-shadow: 0 15px 20px rgba(0,0,0,0.12);
	-moz-box-shadow: 0 15px 20px rgba(0,0,0,0.12);
	box-shadow: 0 15px 20px rgba(0,0,0,0.12);
	-webkit-transform: translate(0, -4px);
	transform: translate(0, -4px);
	background-color: rgba(255,255,255,0.95);
	z-index: 1;
}

.et_pb_blurb .et-pb-icon {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
	opacity: 0.3;
	-webkit-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}

.et_pb_blurb:not(:hover) .et-pb-icon {
	color: #c29445 !important;
}

.et_pb_blurb:hover .et-pb-icon {
	-webkit-transform: scale(1.0);
	transform: scale(1.0);
	opacity: 1;
}

.et_pb_blurb:hover h4 {
	color: #c29445;
}

.et_pb_main_blurb_image {
	margin-bottom: 1em !important;
}

.et_pb_blurb .et-pb-icon {
	font-size: 56px;
}

.et_pb_blurb h4 {
	padding-bottom: 1em !important;
}

/* if blurb has icon on top, and is left aligned, then also left align the image/icon too */
.et_pb_blurb.et_pb_text_align_left.et_pb_blurb_position_top .et_pb_main_blurb_image {
	text-align: left;	
}

/* -- END BLURBS -- */

Need Help?

Tell us about your project!

  • Date Format: MM slash DD slash YYYY
  • This field is for validation purposes and should be left unchanged.
Previous Post
Learning how to use CSS Specificity to override WordPress themes and plugins
Next Post
Move Divi’s Main Header To Below A Hero Section

Related Articles

Menu
Google Rating
5.0
Based on 56 reviews
×
Get a Quote