The blurb module is one of the most popular of all 46 Divi modules and this little bit of customization will allow you to increase your click-through rates to the content you are highlighting by adding an animated button when the user hovers over your module.

All that is required is a few lines of CSS code that can be added into your page or posts custom CSS area, in the theme options custom CSS area or into your Divi child theme style.css file.

Below is the end result and you will see as you hover anywhere in the blurb area the button fades in and up to the bottom of the Blurb image. The button on the example below is red as it takes the styling set glabally in the Theme Customizer for this site. 

Divi Blurb module with animated button demo

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

BUTTON TEXT

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

BUTTON TEXT

How to create the Blurb Module with button

  1. Add your blurb module as usual with a title, icon or image and content.
  2. Go to your Blurb module settings > advanced tab and give the module a CSS Class of myBlurb
    divi blurb module button
  3. In your Blurb Module Settings Content tab add the following code at the bottom of the content you already added;
    <a class="et_pb_button" href="#">BUTTON TEXT</a>

    divi blurb content

  4. Go to Divi > Theme Options (or in your page options or child them) and add the following custom CSS;
    .myBlurb a.et_pb_button {
    position:absolute;
     bottom: 10%;
     opacity: 0;
     width: 100%;
     transition: 0.5s ease;
    }
    .myBlurb:hover a.et_pb_button {
     opacity: 1 !important;
     bottom: 40%;
     transition: 0.5s ease;
    }
    

    divi theme options

Customize the Blurb further

The button will take on the styles you have set in your Theme Customizer for sitewide buttons but you can customize it further by adding your own CSS into the .myBlurb a.et_pb_button class.

For different image sizes or content length you may want to adjust where the button displays. You can do this by editing the values for bottom in the CSS which is a percentage from bottom of the blurb.

For more ways to customize your blurb module with hover effects you can check out the 9 Free Divi blurb module hover effects to copy & paste which lists nine cool hover effects that be recreated on your own blurb modules by adding a class to the module and then adding some custom CSS for that class into your style.css file or into the theme options custom CSS box. My working through the CSS code line by line it is a very useful way to learn how these hover effects work and how you can create them yourself as you start to learn more CSS code.

If you have a great blurb hover effect you would like to share with the Divi community drop me a line via the contact form.

Pin It on Pinterest

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close