Custom Divi Blurbs – Part 1

In this tutorial I will show you how to create a beautiful content box using Image and Blurb modules. We will of course add several animations on hover so our module will be more interactive and will gather more attention. This section is great for featuring services, products, team members and many more!

  • You will need Divi Theme by Elegant Themes installed.
  • You can follow this tutorial or download Ready-To-Use Page Layout with CSS code embedded.

Live Preview    Download Layout

1

Add section and columns

  1. Add Standard Section and select 3 columns layout.
  2. Add Image and Blurb module to one column (we will be adding classes and edit settings of each module. After modules in 1st column are ready we will copy them to 2nd and 3rd column).
2

Apply classes for the columns

Open row settings and add b3_blurb_1 class to each column in Custom CSS tab

3

Add Image and edit module settings

  1. Open Image Module settings and upload image.
  2. Scroll down and make sure that Remove Space Below The Image option is set to YES.
4

Editing Blurb Module Settings

In this step we will be editing Blurb Module settings. We need to add Blurb Title, select icon and add description text.

GENERAL SETTINGS

  1. Open Blurb Module Settings
  2. Add Title and URL
  3. Set Use Icon - YES and choose your icon
  4. Enable Circle Icon option and select colors for the icon and the circle
  5. Set Icon/Image Placement to Top
  6. Disable animation and set Text Orientation to Center

7. Add Description Text. For link use class blurb_link

ADVANCED DESIGN SETTINGS

  1. Use Icon Font Size - YES
  2. Icon Font Size - 34px
  3. Header Font Size - 25px
  4. Header Line Height - 1.4em
  5. Body Line Height - 1.6em
  6. Edit Margins and Paddings as follows:

7. Go to Custom CSS tab and add blurb-ripple-out CSS Class

8. Now it’s time to duplicate our modules. We need Image and Blurb module in each column

5

Adding CSS

In this last step we need to add some CSS to Divi/Theme Options/Custom CSS section or copy and paste it to our style.css file located in our child theme folder.

For the Ripple-Out effect applied for all icons we need to add the following code:

The CSS code below will add image zoom, box shadow and other hover effects.

That’s it and thank you for your attention! This is the fist part of the series where I will be showing you how blurb module can be customized. If you enjoy this tutorial please let me know in the comments below.

Maciej Ekstedt

Maciej Ekstedt

Creative Director

Live Preview

Blurb Title Here

In dignissim ante iaculis turpis venenatis, ut bibendum ante molestie. Vestibulum quis risus eget neque venenatis vestibulum ut ut velit. Read More

Blurb Title Here

In dignissim ante iaculis turpis venenatis, ut bibendum ante molestie. Vestibulum quis risus eget neque venenatis vestibulum ut ut velit. Read More

Blurb Title Here

In dignissim ante iaculis turpis venenatis, ut bibendum ante molestie. Vestibulum quis risus eget neque venenatis vestibulum ut ut velit. Read More

Premium WordPress Divi Child Theme for real estate professionals, experts and agencies. Get 15% discount with coupon code ESTATE15

Learn More

29 Comments

  1. Bernd

    top work, i like it verry. thx for the freebie

    Reply
  2. Keith Davis

    Great looking Blurbs and an easy to follow tutorial showing us how to do it.
    Thanks for sharing Maciej 🙂

    Reply
    • Maciej Ekstedt

      Hi Keith 🙂 I’m glad to hear that. I’m not a native english speaker. This tutorial has been released without any correction so it’s a beautiful feeling to hear it was easy to follow. Thank you for your comment!

      Reply
  3. Andymackk

    Everything a tut should be 🙂 A demo, a download , and comprehensive easy to follow tutorial. Thanks for this. Look forward to more 🙂

    Andy

    Reply
  4. Andre

    Just Wow! This is the kind of tutorial the ET blog just have. Thanks a lot!

    Reply
  5. Andre

    Just Wow! This is the kind of tutorial the ET blog should have. Thanks a lot!

    Reply
  6. Fanny

    Lovely! Thanks for sharing

    Reply
  7. Eric

    Really love this great tutorial.
    Thanks for sharing. Can’t wait to see more of this.

    Reply
  8. Al Harji

    Stunning – like others have mentioned in the comments, this should be the standard for how tutorials are delivered – makes learning a lot easier! The design of the blurbs is beautiful. Looking forward to the rest of the series. Thank you.

    Reply
    • Maciej Ekstedt

      Thank you Al! Our goal is not just to generate traffic, but to deliver valuable content.

      Reply
  9. Eduardo

    Great blurbs really! thank you for making this a freebie.

    Reply
  10. Dehn

    Beautiful work, and many thanks!

    Reply
  11. Will

    Wow, really cool and thanks for sharing it!

    Reply
  12. John

    Love your work!

    Reply
  13. Alan

    Thank you Maciej, I’ve just found your site through a Divi FB group and used this for a new site I’ve started on today. It’s brilliant and I really look forward to the other tutorials in the series!

    Not being too much of a coder, I wondered if it would be too hard to have the icon circles as three different colors – the border color setting in the CSS being the limiting factor?

    /* This is your ripple color & size */
    border: #00cc69 solid 6px;

    Thanks once again,

    Alan

    Reply
    • Maciej Ekstedt

      Hi Alan,

      Thank you for your comment. This is good question 🙂 Unfortunately this code provides only one effect. To create another color and apply for specific icon custom work would be required.

      Reply
    • Alan

      Hi Maciej,

      Thanks for taking the time to get back to me. After trying quite a few different things I couldn’t get the ripple affect to work with different colored icons and so decided to forgo the ripple affect for now as I decided that different color icons were my more important.

      Thanks again for taking the time to respond, and for sharing this customization in the first place, I appreciate it. All the best.

      Alan

      Reply
      • Maciej Ekstedt

        Hi Alan, sorry to hear you could not change the ripple color. It seems it was caching issue only. If you would like to try again, make sure you clear browser cache and refresh page after changes are applied 🙂

        Reply
  14. Patrick Finney

    Love this post, very easy to follow. Did wonder, though, if many of the things defined in px should be in relative units instead so that the design properly scales across different sized displays.

    Reply
    • Maciej Ekstedt

      Hello Patrick. Thank you for your comment. Please notice, this blurbs looks great on all devices 🙂 Let me know if you have any other questions.

      Reply
  15. Korrie Schubert

    Hi, I see that everyone’s having success with your tutorial, but for some reason I’m struggling with making the code work. How can I go about getting help?

    I could give you the url, but it isn’t live and there are multiple log ins through flywheel to get to it.

    hmmm??

    Reply
    • Maciej Ekstedt

      Hey Korrie, unfortunately we cannot help you if make it working if you are on localhost. If you can share your live site url with wp-admin credentials then please send it to support@b3multimedia.ie and we will see what we can do.

      Reply
  16. Liz

    Awesome tutorial! Thank you!

    Reply
  17. Tricia Honeycutt

    Hi. I really like the way these blurbs look – great work and instructions! The layout gave me an idea for a current client’s website. One of his blurbs will be a condensed version of a surf report which he updates daily. I’m wondering if there is some way to make the icon that shows up be dynamic. He adds a rating every day which displays a number from 1-10 on how good the surf is. It’d be really cool if the icon on the homepage blurb would pull the corresponding surf rating number from his report. Any idea if this is possible? Thank you for putting any thought into this at all 🙂

    Reply
    • Maciej Ekstedt

      Hi Tricia, I think Custom Post Type would have to be used. Not sure exactly how 🙂 but this would be the direction.

      Reply
  18. ahmmetwally

    Thank you for this great tutorial!

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Shares

Pin It on Pinterest

Share This
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL1N6X0ZpNGh6bFdvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL0l4NDZjTmNPMFlvP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Are You Ready To Succeed?
If you have any questions or would like to find out more about our services please fill out this form and we will get back to you as soon as possible.
Your Information will never be shared with any third party.
Get in touch
We are ready to talk about your project. Please leave your message and we will get back to you shortly.
Your Information will never be shared with any third party.
Write a review
We would love to hear your feedback. Please take a moment and fill out this form.
Your Information will never be shared with any third party.
PGlmcmFtZSB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkL2ZrcURZbVRZVVowP2F1dG9wbGF5PTEmc2hvd2luZm89MCZ2cT1oZDcyMCZjb250cm9scz0wIiBmcmFtZWJvcmRlcj0iMCIgYWxsb3dmdWxsc2NyZWVuPjwvaWZyYW1lPg==
Your Information will never be shared with any third party.
Thank you!
Your email has been added successfully.
FOLLOW US
Server settings:
Requirements
  • PHP 5.6 or later
  • upload_max_filesize (256M)
  • max_input_time (300)
  • memory_limit (256M)
  • max_execution_time (300)
  • post_max_size (512M)
PHP.ini Settings:
  • php-xml or/and php-dom
  • XMLReader
  • PHP CURL module
PHP Modules:
  • allow_url_fopen
  • allow_url_include
A regular license allows an item to be used in one project for either personal or commercial use by you or on behalf of a client. The item cannot be offered for resale either on its own or as a part of a project. Distribution of source files is not permitted.
Extended license
An extended license allows an item to be used in unlimited projects for either personal or commercial use. The item cannot be offered for resale “as is”. It is allowed to distribute/sublicense the source files as a part of a larger project.
Regular license
License details
Subscribe Now
Join our mailing list to receive the latest news directly to your inbox.
    
DiviEstate
Premium WordPress Divi Child Theme for real estate professionals, experts & agencies.
Testimonial Slider
Testimonial Slider is a highly customizable Divi Plugin that will help you add a slider of various testimonials received from customers, partners or valuable users.
Bruno
Premium Divi Child Theme
BRUNO is perfect for various business domains such as web design, online courses, coaching, agency, finance and many more.
Adventure: A Free Divi Layout