I had a request for a tweak to get the following look:

Divi - blurb text overlay


So here we go!

The video


The class

Add the custom class to the ROW.

Like this:

Divi - blurb text overlay

Add ai-text-overlay in the row’s custom CSS class.


The snippet

Here’s the snippet that will do the styling for you.

.et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content {
  position: relative;
  width: 100%;
  max-width: 100%;
  line-height: 0; }
  .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_main_blurb_image {
    margin-bottom: 0; }
  .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    background: rgba(0, 0, 0, 0.4);
    padding: 6px; }
    .et_pb_row.ai-text-overlay .et_pb_column .et_pb_module.et_pb_blurb .et_pb_blurb_content .et_pb_blurb_container .et_pb_module_header {
      font-size: 14px;
      color: white;
      padding-bottom: 0; }


To add custom CSS, either..
  • Add it to your custom CSS file in your child theme (Get a free basic child theme here) or..
  • Add it to the Custom CSS field in Divi > Theme Options > General or..
  • Add it to the Custom CSS field in Appearance > Customize > Additional CSS or...
  • You could use a plugin like this one so you can keep the customizations separate from the theme.
(A couple more ways, but I guess this is informative enough? - I personally recommend the child theme option)


Divi - blurb text overlay To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! Start learning proper CSS for Divi



Hi! Please consider signing up for my newsletter for... two emails (at most) a month of news, updates, and special offers, including child themes and more courses. Sound interesting? The signup form is right here!

Photo credit: