Custom Divi Blurbs – Part 2

In first week of June we have published tutorial Custom Blurbs - Part 1. Now it’s a time for Part 2. Today I will show you how to customize Blurb Module to achieve nice and clean design with subtle hover effect. We will tweak Blurb settings, add custom class and CSS code that will make the magic.

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

Live Preview      Download Section

1

Add section and columns

  1. Add Standard Section and select 3 columns layout.
  2. Add Blurb module to one column (we will be editing settings so after module in 1st column is ready we will copy it to 2nd and 3rd column).
2

Apply classes for all 3 columns

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

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. Set Icon/Image Placement to Top
  5. Disable animation and set Text Orientation to Center
  6. Add Description Text. For link use class blurb_link_2

ADVANCED DESIGN SETTINGS

  1. Use Icon Font Size - YES
  2. Icon Font Size - 60px
  3. Header Font Size - 25px
  4. Header Line Height - 1.4em
  5. Body Font Size - 15px
  6. Body Line Height - 1.6em
  7. Body Text Color – #b5b5b5
  8. Edit Margins and Paddings as follows:

8. Now it’s time to duplicate our blurb module and move to 2nd and 3rd column.

5

Adding CSS

In this last step we will 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.

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

Maciej Ekstedt

Maciej Ekstedt

Creative Director

Live Preview

Made With Love

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

Highly Customizable

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

Download Section

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

Create amazing websites in minutes.

Polygon is a multipurpose Premium Divi Child Theme perfect for creatives & professional agencies.

13 Comments

  1. Andre

    Another awesome layout tutorial! Keep up the good work! Thanks!

    Reply
  2. Al

    Nice work. Very helpful! Thank you.

    Reply
  3. jan

    Great!! tnx for this tutorial!

    Reply
  4. Justin

    Excellent! Great share.

    Reply
  5. Will

    Great work lads!

    Reply
  6. David Leger

    Awesome stuff. Can’t wait to play around with it.

    Reply
  7. nelson

    These tutorials are the best around for Divi! Good work!

    Reply
  8. Nelson

    How do I update the colors in the .json layout?
    Also, I tried building it from scratch and changed the colors in the css, but nothing changes?

    Reply
    • Maciej Ekstedt

      It must be caching issue then. Please clear your browser cache and check again.

      Reply
  9. Dehn Merrill

    Beautiful tutorial yet again. Truly fine work!

    Reply
  10. Jekamedia

    Thanks for share.. i just hunting this tutorial. I want to build beautiful blurb like above!

    Reply
  11. Richard

    I keep returning to use this blurb … it’s very elegant, it’s perfect. Thanks so much for sharing.

    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 resell 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 resell either on its own or as a part of a project. Distribution of source files is not permitted.
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