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.
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.
How to create the Blurb Module with button
- Add your blurb module as usual with a title, icon or image and content.
- Go to your Blurb module settings > advanced tab and give the module a CSS Class of myBlurb
- 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>
- 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; }
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.
